# FeatureProps

> _Since v0.1.0_

Feature props for declarative plugin configuration.
Each prop lazily loads its corresponding plugin when used.

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `selection?` | <code>row &#124; <a href="/grid/plugins/selection/interfaces/selectionconfig/">SelectionConfig</a>&lt;TRow&gt; &#124; cell &#124; range</code> | Enable cell/row/range selection. |
| `editing?` | <code>boolean &#124; click &#124; dblclick &#124; manual &#124; <a href="/grid/plugins/editing/interfaces/editingconfig/">EditingConfig</a></code> | Enable inline cell editing. |
| `clipboard?` | <code>boolean &#124; <a href="/grid/plugins/clipboard/interfaces/clipboardconfig/">ClipboardConfig</a></code> | Enable clipboard copy/paste. Requires selection to be enabled (will be auto-added). |
| `contextMenu?` | <code>boolean &#124; <a href="/grid/plugins/context-menu/interfaces/contextmenuconfig/">ContextMenuConfig</a></code> | Enable right-click context menu. |
| `multiSort?` | <code>boolean &#124; multi &#124; <a href="/grid/plugins/multi-sort/interfaces/multisortconfig/">MultiSortConfig</a> &#124; single</code> | Enable multi-column sorting. |
| `filtering?` | <code>boolean &#124; <a href="/grid/vue/api/types/filterconfig/">FilterConfig</a>&lt;TRow&gt;</code> | Enable column filtering. |
| `reorderColumns?` | <code>boolean &#124; <a href="/grid/plugins/reorder-columns/interfaces/reorderconfig/">ReorderConfig</a></code> | Enable column drag-to-reorder. |
| `visibility?` | <code>boolean &#124; <a href="/grid/plugins/visibility/interfaces/visibilityconfig/">VisibilityConfig</a></code> | Enable column visibility toggle panel. |
| `pinnedColumns?` | <code>boolean</code> | Enable pinned/sticky columns. Columns are pinned via the `sticky` column property. |
| `groupingColumns?` | <code>boolean &#124; <a href="/grid/vue/api/types/groupingcolumnsconfig/">GroupingColumnsConfig</a></code> | Enable multi-level column headers (column groups). |
| `columnVirtualization?` | <code>boolean &#124; <a href="/grid/plugins/column-virtualization/interfaces/columnvirtualizationconfig/">ColumnVirtualizationConfig</a></code> | Enable horizontal column virtualization for wide grids. |
| `reorderRows?` | <code>boolean &#124; <a href="/grid/plugins/reorder-rows/types/rowreorderconfig/">RowReorderConfig</a></code> | ⚠️ Enable row drag-to-reorder. |
| `rowDragDrop?` | <code>boolean &#124; <a href="/grid/plugins/row-drag-drop/interfaces/rowdragdropconfig/">RowDragDropConfig</a>&lt;TRow&gt;</code> | Enable row drag-and-drop, both within a single grid (reorder) and across grids that share a `dropZone`. |
| `groupingRows?` | <code><a href="/grid/vue/api/types/groupingrowsconfig/">GroupingRowsConfig</a></code> | Enable row grouping by field values. |
| `pinnedRows?` | <code>boolean &#124; <a href="/grid/vue/api/types/pinnedrowsconfig/">PinnedRowsConfig</a></code> | Enable pinned rows (aggregation/status bar). |
| `stickyRows?` | <code><a href="/grid/plugins/sticky-rows/interfaces/stickyrowsconfig/">StickyRowsConfig</a></code> | Pin selected data rows below the header as the user scrolls past them. |
| `tree?` | <code>boolean &#124; <a href="/grid/plugins/tree/interfaces/treeconfig/">TreeConfig</a></code> | Enable hierarchical tree view. |
| `masterDetail?` | <code><a href="/grid/vue/api/types/masterdetailconfig/">MasterDetailConfig</a></code> | Enable master-detail expandable rows. |
| `responsive?` | <code>boolean &#124; <a href="/grid/vue/api/types/responsivepluginconfig/">ResponsivePluginConfig</a>&lt;TRow&gt;</code> | Enable responsive card layout for narrow viewports. |
| `undoRedo?` | <code>boolean &#124; <a href="/grid/plugins/undo-redo/interfaces/undoredoconfig/">UndoRedoConfig</a></code> | Enable undo/redo for cell edits. Requires editing to be enabled (will be auto-added). |
| `export?` | <code>boolean &#124; <a href="/grid/plugins/export/interfaces/exportconfig/">ExportConfig</a></code> | Enable CSV/JSON export functionality. |
| `print?` | <code>boolean &#124; <a href="/grid/plugins/print/interfaces/printconfig/">PrintConfig</a></code> | Enable print functionality. |
| `pivot?` | <code><a href="/grid/plugins/pivot/interfaces/pivotconfig/">PivotConfig</a></code> | Enable pivot table functionality. |
| `serverSide?` | <code><a href="/grid/plugins/server-side/interfaces/serversideconfig/">ServerSideConfig</a></code> | Enable server-side data operations. |
| `tooltip?` | <code>boolean &#124; <a href="/grid/plugins/tooltip/interfaces/tooltipconfig/">TooltipConfig</a></code> | Enable tooltip display for header and cell content. |
| `shell?` | <code>boolean &#124; <a href="/grid/plugins/shell/interfaces/shellconfig/">ShellConfig</a></code> | Enable the grid shell (header bar + collapsible tool panels). |

### Property Details

#### selection

```vue
<!-- Shorthand - just the mode -->
<TbwGrid selection="range" />

<!-- Full config -->
<TbwGrid :selection="{ mode: 'range', checkbox: true }" />
```

---

#### editing

```vue
<!-- Enable with default trigger (dblclick) -->
<TbwGrid editing />

<!-- Specify trigger -->
<TbwGrid editing="click" />
<TbwGrid editing="dblclick" />
<TbwGrid editing="manual" />

// Full config with callbacks
<TbwGrid :editing="{ editOn: 'dblclick', onBeforeEditClose: myCallback }" />
```

---

#### clipboard

```vue
<TbwGrid selection="range" clipboard />
```

---

#### contextMenu

```vue
<TbwGrid contextMenu />
<TbwGrid :contextMenu="{ items: customItems }" />
```

---

#### multiSort

Enable multi-column sorting.

Multi-sort allows users to sort by multiple columns simultaneously.
For basic single-column sorting, columns with `sortable: true` work without this plugin.

```vue
<!-- Enable multi-column sorting -->
<TbwGrid multiSort />

<!-- Limit to single column (uses plugin but restricts to 1) -->
<TbwGrid multiSort="single" />

<!-- Full config -->
<TbwGrid :multiSort="{ maxSortColumns: 3 }" />
```

---

#### filtering

Enable column filtering.

The `filterPanelRenderer` property accepts either the core imperative signature
`(container, params) => void` or a Vue render function `(params) => VNode`.

```vue
<TbwGrid filtering />
<TbwGrid :filtering="{ debounceMs: 200 }" />
```

---

#### reorderColumns

```vue
<TbwGrid reorder-columns />
```

---

#### visibility

```vue
<TbwGrid visibility />
```

---

#### pinnedColumns

```vue
<TbwGrid pinnedColumns :columns="[
  { field: 'id', pinned: 'left' },
  { field: 'name' },
  { field: 'actions', pinned: 'right' },
]" />
```

---

#### groupingColumns

```vue
<TbwGrid :groupingColumns="{
  columnGroups: [
    { header: 'Personal Info', children: ['firstName', 'lastName'] },
  ],
}" />
```

```vue
<TbwGrid :groupingColumns="{
  columnGroups: [...],
  groupHeaderRenderer: (params) => h('strong', `${params.label} (${params.columns.length})`),
}" />
```

---

#### columnVirtualization

```vue
<TbwGrid columnVirtualization />
```

---

#### reorderRows

```vue
<TbwGrid reorder-rows />
```

---

#### rowDragDrop

```vue
<TbwGrid :row-drag-drop="{ dropZone: 'employees', operation: 'move' }" />
```

---

#### groupingRows

```vue
<TbwGrid :groupingRows="{
  groupOn: (row) => [row.department, row.team],
  defaultExpanded: true,
}" />
```

```ts
To keep mouse-toggle behavior, either add the `group-toggle` class to a
clickable element (the plugin delegates clicks via `closest('.group-toggle')`)
or call `params.toggleExpand()` from your own handler.

```vue
<TbwGrid :groupingRows="{
  groupOn: (row) => row.department,
  groupRowRenderer: (params) => h(
    'button',
    { type: 'button', class: 'group-toggle' },
    `${params.expanded ? '▾' : '▸'} ${params.value} (${params.rows.length})`,
  ),
}" />
```
```

---

#### pinnedRows

```vue
<TbwGrid :pinnedRows="{
  bottom: [{ type: 'aggregation', aggregator: 'sum' }],
}" />
```

```vue
<TbwGrid :pinnedRows="{
  slots: [
    { id: 'add-row', position: 'bottom', render: () => h(AddRowPanel) },
  ],
}" />
```

---

#### stickyRows

```vue
<!-- Field-name shorthand -->
<TbwGrid :sticky-rows="{ isSticky: 'isSection' }" />

<!-- Predicate + stack mode -->
<TbwGrid :sticky-rows="{
  isSticky: (row) => row.kind === 'section',
  mode: 'stack',
  maxStacked: 3,
}" />
```

---

#### tree

```vue
<TbwGrid :tree="{
  childrenField: 'children',
  defaultExpanded: true,
}" />
```

---

#### masterDetail

```vue
<TbwGrid :masterDetail="{
  renderer: (row) => h(OrderDetails, { order: row }),
}" />
```

---

#### responsive

```vue
<TbwGrid :responsive="{
  breakpoint: 768,
  cardRenderer: (row) => h(EmployeeCard, { employee: row }),
}" />
```

---

#### undoRedo

```vue
<TbwGrid editing="dblclick" undoRedo />
```

---

#### export

```vue
<TbwGrid export />
<TbwGrid :export="{ filename: 'data.csv' }" />
```

---

#### print

```vue
<TbwGrid print />
```

---

#### pivot

```vue
<TbwGrid :pivot="{
  rowFields: ['category'],
  columnFields: ['year'],
  valueField: 'sales',
}" />
```

---

#### serverSide

```vue
<TbwGrid :serverSide="{
  dataSource: async (params) => fetchData(params),
}" />
```

---

#### tooltip

```vue
<TbwGrid :tooltip="true" />
<TbwGrid :tooltip="{ header: true, cell: false }" />
```

---