React

@freegridjs/react는 <FreeGrid> 컴포넌트를 제공합니다. 그리드 옵션은 모두 props이고, 이벤트는 on… props입니다. ref로 그리드 API를 받습니다. data, columns, theme, locale, 글꼴, summary를 바꾸면 그리드에…

실행 예제React

React에서는 <FreeGrid> 컴포넌트에 props와 이벤트만 넘기면 됩니다.

이 데모의 코드

import type { GridApi } from '@freegridjs/core';
import { FreeGrid } from '@freegridjs/react';
import { useMemo, useRef, useState } from 'react';
import { demoColumns, makeRows, type Lang } from './data';

export default function ReactDemo({ lang }: { lang: Lang }) {
  const t = (en: string, ko: string) => (lang === 'ko' ? ko : en);
  const columns = useMemo(() => demoColumns(lang), [lang]);
  const [rows, setRows] = useState(() => makeRows(1000));
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
  const [clicked, setClicked] = useState('');
  const [selected, setSelected] = useState(0);
  const grid = useRef<GridApi | null>(null);
  // Keep option objects stable; a new object on every render would re-apply them.
  const summary = useMemo(() => ({ rows: [{ label: t('Total', '합계'), columns: { total: 'sum' as const, id: 'count' as const } }] }), [lang]);

  return (
    <div>
      <div className="demo-controls">
        <button type="button" onClick={() => setRows(makeRows(rows.length + 1000))}>
          {t('Add 1,000 rows', '1,000행 추가')}
        </button>
        <button type="button" aria-pressed={theme === 'dark'} onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
          {t('Dark theme', '다크 테마')}
        </button>
        <button type="button" onClick={() => grid.current?.setSort([{ colId: 'total', dir: 'desc' }])}>
          {t('Sort by total (ref API)', '합계 정렬 (ref API)')}
        </button>
        <span className="demo-note" style={{ margin: 0 }}>
          {t(`${rows.length.toLocaleString()} rows · ${selected} selected`, `${rows.length.toLocaleString()}행 · ${selected}개 선택`)}
        </span>
      </div>
      <FreeGrid
        ref={grid}
        className="demo-grid"
        style={{ height: 480 }}
        columns={columns}
        data={rows}
        theme={theme}
        locale={lang}
        rowSelection="multiple"
        getRowId={row => String(row.id)}
        summary={summary}
        onCellClick={e => setClicked(`${e.colId}: ${String(e.value)}`)}
        onSelectionChange={e => setSelected(e.selected.length)}
      />
      <p className="demo-note">{clicked ? `onCellClick → ${clicked}` : t('Click any cell.', '아무 셀이나 클릭해 보세요.')}</p>
    </div>
  );
}

@freegridjs/react는 <FreeGrid> 컴포넌트를 제공합니다. 그리드 옵션은 모두 props이고, 이벤트는 on… props입니다. ref로 그리드 API를 받습니다. data, columns, theme, locale, 글꼴, summary를 바꾸면 그리드에 반영됩니다. 이 객체들은 useMemo로 안정적으로 유지하세요.

import { FreeGrid } from '@freegridjs/react';
import type { GridApi } from '@freegridjs/core';
import '@freegridjs/core/styles.css';

export function Orders({ rows }) {
  const grid = useRef<GridApi>(null);
  const columns = useMemo(() => [...], []); // keep props stable
  return (
    <FreeGrid
      ref={grid}
      columns={columns}
      data={rows}
      rowSelection="multiple"
      theme="erp"
      locale="ko"
      summary={summary}
      onCellClick={e => console.log(e.row)}
      onSelectionChange={e => setCount(e.selected.length)}
      style={{ height: 520 }}
    />
  );
}
// grid.current?.setSort([{ colId: 'total', dir: 'desc' }])

이 페이지에 대한 질문

React에서 어떻게 쓰나요?

@freegridjs/react를 설치하고 <FreeGrid columns={columns} data={rows} />를 그리면 됩니다. props는 그리드 옵션, 이벤트는 on… props이며, ref로 전체 API를 씁니다.