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?	row | SelectionConfig<TRow> | cell | range	Enable cell/row/range selection.
editing?	boolean | click | dblclick | manual | EditingConfig	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 | multi | MultiSortConfig | single	Enable multi-column sorting.
filtering?	boolean | FilterConfig<TRow>	Enable column filtering.
reorderColumns?	boolean | ReorderConfig	Enable column drag-to-reorder.
visibility?	boolean | VisibilityConfig	Enable column visibility toggle panel.
pinnedColumns?	boolean	Enable pinned/sticky columns. Columns are pinned via the sticky column property.
groupingColumns?	boolean | GroupingColumnsConfig	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.
rowDragDrop?	boolean | RowDragDropConfig<TRow>	Enable row drag-and-drop, both within a single grid (reorder) and across grids that share a dropZone.
groupingRows?	GroupingRowsConfig	Enable row grouping by field values.
pinnedRows?	boolean | PinnedRowsConfig	Enable pinned rows (aggregation/status bar).
stickyRows?	StickyRowsConfig	Pin selected data rows below the header as the user scrolls past them.
tree?	boolean | TreeConfig	Enable hierarchical tree view.
masterDetail?	MasterDetailConfig	Enable master-detail expandable rows.
responsive?	boolean | ResponsivePluginConfig<TRow>	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.
tooltip?	boolean | TooltipConfig	Enable tooltip display for header and cell content.
shell?	boolean | ShellConfig	Enable the grid shell (header bar + collapsible tool panels).

Property Details

selection

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

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

---

editing

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

<TbwGrid selection="range" clipboard />

---

contextMenu

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

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

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

---

reorderColumns

<TbwGrid reorder-columns />

---

visibility

<TbwGrid visibility />

---

pinnedColumns

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

---

groupingColumns

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

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

---

columnVirtualization

<TbwGrid columnVirtualization />

---

reorderRows

<TbwGrid reorder-rows />

---

rowDragDrop

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

---

groupingRows

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

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' }],
}" />

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

---

stickyRows

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

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

---

tree

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

---

masterDetail

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

---

responsive

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

---

undoRedo

<TbwGrid editing="dblclick" undoRedo />

---

export

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

---

print

<TbwGrid print />

---

pivot

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

---

serverSide

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

---

tooltip

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

---