# ResponsivePluginConfig

> _Since v1.1.0_

Configuration options for the responsive plugin.

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `breakpoint?` | <code>number</code> | Width threshold in pixels to trigger responsive mode. When grid width &lt; breakpoint, switches to card layout. |
| `breakpoints?` | <code><a href="/grid/plugins/responsive/interfaces/breakpointconfig/">BreakpointConfig</a>[]</code> | Multiple breakpoints for progressive degradation. Evaluated from smallest to largest maxWidth. When provided, the single `breakpoint` property is ignored. |
| `cardRenderer?` | <code>(row: T, rowIndex: number, column: <a href="/grid/api/core/interfaces/columnconfig/">ColumnConfig</a>&lt;any&gt;) =&gt; HTMLElement</code> | Custom renderer function for card layout. If not provided, uses CSS-only default layout (header: value pairs). |
| `hideHeader?` | <code>boolean</code> | Whether to hide the per-field label rendered inside each card. |
| `cardRowHeight?` | <code>number &#124; auto</code> | Card row height in pixels. Only applies when cardRenderer is provided. Use 'auto' for dynamic height based on content. |
| `debounceMs?` | <code>number</code> | Debounce delay in ms for resize events. |
| `hiddenColumns?` | <code><a href="/grid/plugins/responsive/types/hiddencolumnconfig/">HiddenColumnConfig</a>[]</code> | 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?` | <code>boolean</code> | Enable smooth animations when transitioning between modes. |
| `animationDuration?` | <code>number</code> | Animation duration in milliseconds. |

### Property Details

#### breakpoints

```ts
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

**Default:** `100`

---

#### hiddenColumns

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

---

#### animate

**Default:** `true`

---

#### animationDuration

**Default:** `200`

---