# 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

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

```ts
GridDetailPanel(props: GridDetailPanelProps<TRow>): ReactElement
```

## Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `props` | <code><a href="/grid/react/api/types/griddetailpanelprops/">GridDetailPanelProps</a>&lt;TRow&gt;</code> |  |