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

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

GridResponsiveCard(props: GridResponsiveCardProps<TRow>): ReactElement

Parameters

Name	Type	Description
props	GridResponsiveCardProps<TRow>