ResponsivePluginConfig
Since v1.1.0
Configuration options for the responsive plugin.
Properties
Section titled “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>) => 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 | Debounce delay in ms for resize events. |
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. |
animate? | boolean | Enable smooth animations when transitioning between modes. |
animationDuration? | number | Animation duration in milliseconds. |
Property Details
Section titled “Property Details”breakpoints
Section titled “breakpoints”breakpoints: [ { maxWidth: 800, hiddenColumns: ['createdAt', 'updatedAt'] }, { maxWidth: 600, hiddenColumns: ['createdAt', 'updatedAt', 'status'] }, { maxWidth: 400, cardLayout: true },]hideHeader
Section titled “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
Section titled “cardRowHeight”Default: 'auto'
debounceMs
Section titled “debounceMs”Default: 100
hiddenColumns
Section titled “hiddenColumns”hiddenColumns: [ 'createdAt', // Entire cell hidden { field: 'email', showValue: true }, // Label hidden, value shown full-width]animate
Section titled “animate”Default: true
animationDuration
Section titled “animationDuration”Default: 200
AI assistants: For complete API documentation, implementation guides, and code examples for this library, see https://toolboxjs.com/llms-full.txt