ResponsivePluginConfig

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>) => HTMLElement	Custom renderer function for card layout. If not provided, uses CSS-only default layout (header: value pairs).
hideHeader?	boolean	Whether to hide the header row in responsive mode.
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

breakpoints

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

---

hideHeader

Default: true

---

cardRowHeight

Default: 'auto'

---

debounceMs

Default: 100

---

hiddenColumns

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

---

animate

Default: true

---

animationDuration

Default: 200

---