GridDetailPanel

Component for defining a master-detail panel within a DataGrid.

Renders a <tbw-grid-detail> custom element in the light DOM that the MasterDetailPlugin picks up to render expandable row details.

Usage

import { DataGrid, GridDetailPanel } from '@toolbox-web/grid-react';
import { MasterDetailPlugin } from '@toolbox-web/grid/all';

function EmployeeGrid() {
  const config = {
    plugins: [new MasterDetailPlugin()],
    // ... other config
  };

  return (
    <DataGrid rows={employees} gridConfig={config}>
      <GridDetailPanel showExpandColumn animation="slide">
        {({ row }) => (
          <div className="detail-panel">
            <h3>{row.firstName} {row.lastName}</h3>
            <p>Department: {row.department}</p>
            <p>Email: {row.email}</p>
          </div>
        )}
      </GridDetailPanel>
    </DataGrid>
  );
}

How it works

1. This component renders a <tbw-grid-detail> element in the grid’s light DOM
2. The ReactGridAdapter detects this element and creates a detail renderer
3. When a row is expanded, the adapter calls your render function
4. The React component is rendered into the detail row container

GridDetailPanel(props: GridDetailPanelProps<TRow>): ReactElement

Parameters

Name	Type	Description
props	GridDetailPanelProps<TRow>