GridToolPanel

Component for defining a custom tool panel within a DataGrid.

Renders a <tbw-grid-tool-panel> custom element in the light DOM that the ShellPlugin picks up and displays in the side panel accordion.

Usage

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

function EmployeeGrid() {
  return (
    <DataGrid rows={employees} gridConfig={config}>
      <GridToolPanel id="quick-filters" title="Quick Filters" icon="🔍" order={10}>
        {({ grid }) => (
          <div className="filters">
            <button onClick={() => applyFilter(grid, 'active')}>Active</button>
            <button onClick={() => applyFilter(grid, 'inactive')}>Inactive</button>
          </div>
        )}
      </GridToolPanel>

      <GridToolPanel id="stats" title="Statistics" icon="📊" order={20}>
        {() => <StatsPanel data={employees} />}
      </GridToolPanel>
    </DataGrid>
  );
}

How it works

1. This component renders a <tbw-grid-tool-panel> element in the grid’s light DOM
2. The ReactGridAdapter detects this element and creates a panel renderer
3. When the shell plugin initializes, it finds these panels and renders them
4. The React component is rendered into the accordion panel container

GridToolPanel(props: GridToolPanelProps): ReactElement

Parameters

Name	Type	Description
props	GridToolPanelProps