# FeatureProps

> _Since v0.7.0_

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

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `selection?` | <code><a href="/grid/plugins/selection/interfaces/selectionconfig/">SelectionConfig</a>&lt;TRow&gt; &#124; cell &#124; row &#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/react/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/react/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/react/api/types/groupingrowsconfig/">GroupingRowsConfig</a></code> | Enable row grouping by field values. |
| `pinnedRows?` | <code>boolean &#124; <a href="/grid/react/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/react/api/types/masterdetailconfig/">MasterDetailConfig</a></code> | Enable master-detail expandable rows. |
| `responsive?` | <code>boolean &#124; <a href="/grid/react/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 styled popover tooltips on overflowing cells and headers. |
| `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

```tsx
// Shorthand - just the mode
<DataGrid selection="range" />

// Full config
<DataGrid selection={{ mode: 'range', checkbox: true }} />
```

---

#### editing

```tsx
// Enable with default trigger (dblclick)
<DataGrid editing />

// Specify trigger
<DataGrid editing="click" />
<DataGrid editing="dblclick" />
<DataGrid editing="manual" />

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

---

#### clipboard

```tsx
<DataGrid selection="range" clipboard />
```

---

#### contextMenu

```tsx
<DataGrid contextMenu />
<DataGrid 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.
Use the `sortable` prop to disable all sorting grid-wide.

```tsx
// Enable multi-column sorting
<DataGrid multiSort />

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

// Full config
<DataGrid multiSort={{ maxSortColumns: 3 }} />
```

---

#### filtering

```tsx
<DataGrid filtering />
<DataGrid filtering={{ debounceMs: 200 }} />
```

---

#### reorderColumns

```tsx
<DataGrid reorderColumns />
```

---

#### visibility

```tsx
<DataGrid visibility />
```

---

#### pinnedColumns

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

---

#### groupingColumns

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

---

#### columnVirtualization

```tsx
<DataGrid columnVirtualization />
```

---

#### reorderRows

```tsx
<DataGrid reorderRows />
```

---

#### rowDragDrop

```tsx
// Intra-grid reorder (parity with reorderRows)
<DataGrid rowDragDrop />

// Cross-grid transfer
<DataGrid rowDragDrop={{ dropZone: 'employees', operation: 'move' }} />
```

---

#### groupingRows

```tsx
<DataGrid 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.

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

---

#### pinnedRows

```tsx
<DataGrid pinnedRows={{
  bottom: [{ type: 'aggregation', aggregator: 'sum' }],
}} />
```

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

---

#### stickyRows

```tsx
// Field-name shorthand
<DataGrid stickyRows={{ isSticky: 'isSection' }} />

// Predicate + stack mode
<DataGrid stickyRows={{
  isSticky: (row) => row.kind === 'section',
  mode: 'stack',
  maxStacked: 3,
}} />
```

---

#### tree

```tsx
<DataGrid tree={{
  childrenField: 'children',
  defaultExpanded: true,
}} />
```

---

#### masterDetail

```tsx
<DataGrid masterDetail={{
  renderer: (row) => <OrderDetails order={row} />,
}} />
```

---

#### responsive

```tsx
<DataGrid responsive={{
  breakpoint: 768,
  cardRenderer: (row) => <EmployeeCard employee={row} />,
}} />
```

---

#### undoRedo

```tsx
<DataGrid editing="dblclick" undoRedo />
```

---

#### export

```tsx
<DataGrid export />
<DataGrid export={{ filename: 'data.csv' }} />
```

---

#### print

```tsx
<DataGrid print />
```

---

#### pivot

```tsx
<DataGrid pivot={{
  rowFields: ['category'],
  columnFields: ['year'],
  valueField: 'sales',
}} />
```

---

#### serverSide

```tsx
<DataGrid serverSide={{
  dataSource: async (params) => fetchData(params),
}} />
```

---

#### tooltip

```tsx
<DataGrid tooltip />
<DataGrid tooltip={{ cell: false }} />
```

---