FeatureProps

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.
sorting?	boolean | multi | MultiSortConfig | single	⚠️
filtering?	boolean | VueFilterConfig<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 | 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.
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 -->
<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'] },
  ],
}" />

---

columnVirtualization

<TbwGrid columnVirtualization />

---

reorderRows

<TbwGrid reorder-rows />

---

groupingRows

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

---

pinnedRows

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

---

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

---