# MasterDetailConfig

> _Since v0.1.1_

Configuration options for the master-detail plugin.

#### Example

```ts
const grid = document.querySelector('tbw-grid');
grid.plugins = [
  new MasterDetailPlugin({
    detailRenderer: (row) => {
      const el = document.createElement('div');
      el.textContent = `Details for ${row.name}`;
      return el;
    },
    detailHeight: 'auto',
    expandOnRowClick: true,
    animation: 'slide',
  }),
];
```

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `detailRenderer?` | <code>(row: Record&lt;string, unknown&gt;, rowIndex: number) =&gt; string &#124; HTMLElement</code> | Renderer function that returns detail content for a row |
| `detailHeight?` | <code>number &#124; auto</code> | Height of the detail row - number (pixels) or 'auto' (default: 'auto') |
| `expandOnRowClick?` | <code>boolean</code> | Expand/collapse detail on row click (default: false) |
| `showExpandColumn?` | <code>boolean</code> | Show expand/collapse column (default: true) |
| `animation?` | <code><a href="/grid/api/core/types/expandcollapseanimation/">ExpandCollapseAnimation</a></code> | Animation style for expanding/collapsing detail rows. - `false`: No animation - `'slide'`: Slide down/up animation (default) - `'fade'`: Fade in/out animation |

### Property Details

#### animation

**Default:** `'slide'`

---