DataGrid

React wrapper component for the tbw-grid web component.

Basic Usage

import { DataGrid } from '@toolbox-web/grid-react';

function MyComponent() {
  const [rows, setRows] = useState([...]);

  return (
    <DataGrid
      rows={rows}
      columns={[
        { field: 'name', header: 'Name' },
        { field: 'age', header: 'Age', type: 'number' },
      ]}
      onRowsChange={setRows}
    />
  );
}

With Custom Renderers

import { DataGrid, GridColumn } from '@toolbox-web/grid-react';

function MyComponent() {
  return (
    <DataGrid rows={rows}>
      <GridColumn field="status">
        {(ctx) => <StatusBadge status={ctx.value} />}
      </GridColumn>
      <GridColumn
        field="name"
        editable
        editor={(ctx) => (
          <input
            defaultValue={ctx.value}
            onBlur={(e) => ctx.commit(e.target.value)}
            onKeyDown={(e) => e.key === 'Escape' && ctx.cancel()}
          />
        )}
      />
    </DataGrid>
  );
}

With Ref

import { DataGrid, DataGridRef } from '@toolbox-web/grid-react';
import { useRef } from 'react';

function MyComponent() {
  const gridRef = useRef<DataGridRef>(null);

  const handleClick = async () => {
    const config = await gridRef.current?.getConfig();
    console.log('Current columns:', config?.columns);
  };

  return <DataGrid ref={gridRef} rows={rows} />;
}

const DataGrid: (props: DataGridProps<TRow> & { ref?: Ref<DataGridRef<TRow>> }) => ReactElement