useGrid

Hook for programmatic access to a grid instance.

Usage

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

function MyComponent() {
  const { ref, isReady, getConfig, forceLayout } = useGrid<Employee>();

  const handleResize = async () => {
    await forceLayout();
  };

  const handleExport = async () => {
    const config = await getConfig();
    console.log('Exporting with columns:', config?.columns);
  };

  return (
    <>
      <button onClick={handleResize}>Force Layout</button>
      <button onClick={handleExport} disabled={!isReady}>Export</button>
      <DataGrid ref={ref} rows={rows} />
    </>
  );
}

useGrid(selector: string): UseGridReturn<TRow>

Parameters

Name	Type	Description
selector	string	Optional CSS selector to target a specific grid element via
DOM query instead of using ref. Use when the component contains multiple
grids, e.g. 'tbw-grid.primary' or '#my-grid'.