# TreeConfig

> _Since v0.1.1_

Configuration options for the tree plugin.

#### Example

```ts
const grid = document.querySelector('tbw-grid');
grid.plugins = [
  new TreePlugin({
    childrenField: 'subItems',
    defaultExpanded: true,
    indentWidth: 24,
    animation: 'slide',
  }),
];
```

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `childrenField?` | <code>string</code> | Field name containing child rows (default: 'children') |
| `autoDetect?` | <code>boolean</code> | Auto-detect tree structure from data (default: true) |
| `defaultExpanded?` | <code>boolean</code> | Whether nodes are expanded by default (default: false) |
| `indentWidth?` | <code>number</code> | Indentation width per level in pixels (default: 20) |
| `showExpandIcons?` | <code>boolean</code> | Show expand/collapse icons (default: true) |
| `treeColumn?` | <code>string</code> | Field name of the column that displays the tree toggle and indentation. Defaults to the first visible column. Use this when the first column is narrow (e.g. an ID column) or when combining with pinned columns. |
| `animation?` | <code><a href="/grid/api/core/types/expandcollapseanimation/">ExpandCollapseAnimation</a></code> | Animation style for expanding/collapsing tree nodes. - `false`: No animation - `'slide'`: Slide animation (default) - `'fade'`: Fade animation |

### Property Details

#### animation

**Default:** `'slide'`

---