FeatureProps

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

Properties

Property	Type	Description
selection?	SelectionConfig<TRow> | cell | row | range	Enable cell/row/range selection.
editing?	boolean | EditingConfig | click | dblclick | manual	Enable inline cell editing.
clipboard?	boolean | ClipboardConfig	Enable clipboard copy/paste. Requires selection to be enabled (will be auto-added).
contextMenu?	boolean | ContextMenuConfig	Enable right-click context menu.
multiSort?	boolean | MultiSortConfig | single | multi	Enable multi-column sorting.
sorting?	boolean | MultiSortConfig | single | multi	⚠️
filtering?	boolean | ReactFilterConfig<TRow>	Enable column filtering.
reorderColumns?	boolean | ReorderConfig	Enable column drag-to-reorder.
reorder?	boolean | ReorderConfig	⚠️
visibility?	boolean | VisibilityConfig	Enable column visibility toggle panel.
pinnedColumns?	boolean	Enable pinned/sticky columns. Columns are pinned via the sticky column property.
groupingColumns?	boolean | ReactGroupingColumnsConfig	Enable multi-level column headers (column groups).
columnVirtualization?	boolean | ColumnVirtualizationConfig	Enable horizontal column virtualization for wide grids.
reorderRows?	boolean | RowReorderConfig	Enable row drag-to-reorder.
rowReorder?	boolean | RowReorderConfig	⚠️
groupingRows?	GroupingRowsConfig	Enable row grouping by field values.
pinnedRows?	boolean | PinnedRowsConfig	Enable pinned rows (aggregation/status bar).
tree?	boolean | TreeConfig	Enable hierarchical tree view.
masterDetail?	MasterDetailConfig	Enable master-detail expandable rows.
responsive?	boolean | ResponsivePluginConfig<unknown>	Enable responsive card layout for narrow viewports.
undoRedo?	boolean | UndoRedoConfig	Enable undo/redo for cell edits. Requires editing to be enabled (will be auto-added).
export?	boolean | ExportConfig	Enable CSV/JSON export functionality.
print?	boolean | PrintConfig	Enable print functionality.
pivot?	PivotConfig	Enable pivot table functionality.
serverSide?	ServerSideConfig	Enable server-side data operations.

Property Details

selection

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

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

---

editing

// 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

<DataGrid selection="range" clipboard />

---

contextMenu

<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.

// 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

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

---

reorderColumns

<DataGrid reorderColumns />

---

visibility

<DataGrid visibility />

---

pinnedColumns

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

---

groupingColumns

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

---

columnVirtualization

<DataGrid columnVirtualization />

---

reorderRows

<DataGrid reorderRows />

---

groupingRows

<DataGrid groupingRows={{
  groupBy: ['department', 'team'],
  defaultExpanded: true,
}} />

---

pinnedRows

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

---

tree

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

---

masterDetail

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

---

responsive

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

---

undoRedo

<DataGrid editing="dblclick" undoRedo />

---

export

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

---

print

<DataGrid print />

---

pivot

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

---

serverSide

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

---