ResponsivePluginConfig

Since v1.1.0

Configuration options for the responsive plugin.

Properties

Property	Type	Description
`breakpoint?`	`number`	Width threshold in pixels to trigger responsive mode. When grid width < breakpoint, switches to card layout.
`breakpoints?`	`BreakpointConfig[]`	Multiple breakpoints for progressive degradation. Evaluated from smallest to largest maxWidth. When provided, the single `breakpoint` property is ignored.
`cardRenderer?`	`(row: T, rowIndex: number, column: ColumnConfig<any, ColumnFieldKey<any>>) => HTMLElement`	Custom renderer function for card layout. If not provided, uses CSS-only default layout (header: value pairs).
`hideHeader?`	`boolean`	Whether to hide the per-field label rendered inside each card.
`cardRowHeight?`	`number \| auto`	Card row height in pixels. Only applies when cardRenderer is provided. Use ‘auto’ for dynamic height based on content.
`debounceMs?`	`number`	Minimum interval in ms between layout switches.
`hiddenColumns?`	`HiddenColumnConfig[]`	Columns to hide in responsive mode (when using CSS-only default). Useful for hiding less important columns in card view. Supports enhanced syntax with showValue option.
`animation?`	`ResponsiveAnimation`	How the switch between table and card layout is animated. v3.7.0+
`animate?`	`boolean`	⚠️ Enable smooth animations when transitioning between modes.
`animationDuration?`	`number`	Animation duration in milliseconds.

Property Details

`breakpoint`

Width threshold in pixels to trigger responsive mode. When grid width < breakpoint, switches to card layout.

Required: If not provided, a warning is logged and responsive mode is effectively disabled (defaults to 0). Users must explicitly configure the breakpoint based on their grid’s column count and layout needs.

Common values:

400-500px for grids with 3-5 columns
600-800px for grids with 6-10 columns
900-1200px for grids with 10+ columns

Note: If breakpoints array is provided, this property is ignored.

`breakpoints`

breakpoints: [
  { maxWidth: 800, hiddenColumns: ['createdAt', 'updatedAt'] },
  { maxWidth: 600, hiddenColumns: ['createdAt', 'updatedAt', 'status'] },
  { maxWidth: 400, cardLayout: true },
]

`hideHeader`

Whether to hide the per-field label rendered inside each card.

In card mode each cell renders its column header as a label (e.g. Name: Alice) via the data-header attribute. Set this to true to suppress that label — only the value is shown.

Note: this does NOT control the column header row at the top of the grid; that row is always hidden in card mode (a card layout has no use for a tabular header).

Default: false

`cardRowHeight`

Default: 'auto'

`debounceMs`

Minimum interval in ms between layout switches.

The first width change after this interval applies immediately; further changes inside the window are collapsed into a single trailing evaluation. Resizes that only change the grid’s height are ignored entirely.

Default: 100

`hiddenColumns`

hiddenColumns: [
  'createdAt',  // Entire cell hidden
  { field: 'email', showValue: true },  // Label hidden, value shown full-width
]

`animation`

How the switch between table and card layout is animated.

Each element named for a morph becomes its own compositor layer, so 'morph-cells' costs the most: reach for it on compact grids where the column-to-label movement is the point, and stay on 'morph-rows' for dense ones.

Default: 'fade'

`animate`

Default: true

`animationDuration`

Default: 200