# 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

```tsx
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

```ts
GridToolPanel(props: GridToolPanelProps): ReactElement
```

## Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `props` | <code><a href="/grid/react/api/types/gridtoolpanelprops/">GridToolPanelProps</a></code> |  |