# GridResponsiveCard

Component for defining custom card layouts in responsive mode.

Renders a `<tbw-grid-responsive-card>` custom element in the light DOM that
the ResponsivePlugin picks up to render custom cards in mobile/narrow layouts.

## Usage

```tsx
import { DataGrid, GridResponsiveCard } from '@toolbox-web/grid-react';
import { ResponsivePlugin } from '@toolbox-web/grid/all';

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

  return (
    <DataGrid rows={employees} gridConfig={config}>
      <GridResponsiveCard cardRowHeight={80}>
        {({ row, index }) => (
          <div className="employee-card">
            <img src={row.avatar} alt="" />
            <div>
              <strong>{row.name}</strong>
              <span>{row.department}</span>
            </div>
          </div>
        )}
      </GridResponsiveCard>
    </DataGrid>
  );
}
```

## How it works

1. This component renders a `<tbw-grid-responsive-card>` element in the grid's light DOM
2. The ReactGridAdapter detects this element and creates a card renderer
3. When the grid enters responsive mode, the plugin calls your render function for each row
4. The React component is rendered into the card container

```ts
GridResponsiveCard(props: GridResponsiveCardProps<TRow>): ReactElement
```

## Parameters

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