Appearance
Grid options
Options are passed with the options prop. All options are optional.
ts
import type { GridOptions } from "@datagrid/vue-ui";
const options: GridOptions<Person> = {
rowId: (data) => data.id,
defaultColumn: { sortable: true, filterable: true },
};Data
| Option | Type | Default | Description |
|---|---|---|---|
rowId | (data, index, parent) => string | number | index | unique id of a row, see row ids |
childrenField | string | "children" | property with child rows (tree data) |
dataGetter | (params) => Promise<{ data, total }> | – | server side data |
infiniteScroll | boolean | { blockSize } | false | load rows block by block while scrolling, see infinite scrolling |
loading | boolean | false | shows the loading indicator |
Columns
| Option | Type | Default | Description |
|---|---|---|---|
defaultColumn | Partial<ColumnConfig> | – | properties for all columns |
columnTypes | Record<string, Partial<ColumnConfig>> | – | reusable column configurations |
columnMenu | boolean | false | column menu button for all columns |
rowNumbers | boolean | false | column with row numbers |
checkboxSelection | boolean | false | column with selection checkboxes |
Rows
| Option | Type | Default | Description |
|---|---|---|---|
rowHeight | number | (row) => number | measured | fixed row height |
estimatedRowHeight | number | 32 | height of rows which are not measured yet |
headerRowHeight | number | 38 (CSS) | height of header rows |
filterRowHeight | number | 36 (CSS) | height of the filter row |
rowClass | (row) => string | string[] | – | css classes of a row |
rowStyle | (row) => style | – | inline styles of a row |
rowExpandable | (row) => boolean | – | which tree / group rows can be expanded |
hasDetails | (row, data) => boolean | – | which rows have details |
renderDetails | (row, data) => component | – | alternative to the detail slot |
animationEnabled | boolean | false | animates rows after sorting and filtering |
Selection
| Option | Type | Default | Description |
|---|---|---|---|
selection | "None" | "Row" | "Cell" | "None" | selection mode ("Row" if checkboxSelection is set) |
singleSelect | boolean | true (false with checkboxSelection) | only one row / cell |
rowSelectable | (row) => boolean | – | which rows can be selected |
emptySelectionAllowed | boolean | true | allow deselecting the last row |
Sorting & filtering
| Option | Type | Default | Description |
|---|---|---|---|
sortingOrder | ("asc" | "desc" | null)[] | ["asc", "desc", null] | order of directions when clicking a header |
multiSortKey | "shift" | "ctrl" | "shift" | modifier key for multi column sorting |
filterFn | (rows, columns, value) => rows | – | custom quick filter |
Grouping
| Option | Type | Default | Description |
|---|---|---|---|
groupDefaultExpanded | number | 0 | expanded levels of new groups (-1 = all) |
groupShowCount | boolean | true | number of rows in group rows |
totalRow | "top" | "bottom" | – | row with aggregated values |
groupFooter | boolean | false | footer row with the aggregations below each expanded group |
stickyGroupRows | boolean | false | group rows of the rows at the top stay visible while scrolling |
Pagination
| Option | Type | Default | Description |
|---|---|---|---|
pagination.enabled | boolean | false | |
pagination.pageSize | number | 25 | |
pagination.pageSizes | number[] | [10, 25, 50, 100] | options of the page size selector |
Editing & clipboard
| Option | Type | Default | Description |
|---|---|---|---|
editTrigger | "dblclick" | "click" | "none" | "dblclick" | mouse action which starts editing |
enterMovesDown | boolean | false | move to the cell below after Enter |
clipboard | boolean | true | copy & paste |
copyHeaders | boolean | false | copy the headers too |
fillHandle | boolean | false | handle to fill cells by dragging (requires selection: "Cell"), see spreadsheet features |
undoRedo | boolean | true | undo / redo cell changes with Ctrl + Z / Ctrl + Y |
undoLimit | number | 50 | maximum number of undo steps |
Menus & status bar
| Option | Type | Default | Description |
|---|---|---|---|
contextMenu | boolean | ContextMenuItem[] | (params, defaultItems) => ContextMenuItem[] | false | built-in context menu of cells |
statusBar | boolean | { items } | false | status bar with row counts and aggregations of the selected cells |
Localization
| Option | Type | Default | Description |
|---|---|---|---|
locale | string | "en" | "en", "de" or a registered locale |
localeText | Record<string, string> | – | override single texts |
localize | (key) => string | – | custom translation function |
Virtualization
| Option | Type | Default | Description |
|---|---|---|---|
virtualization.bufferRow | number | 1 | rows rendered outside of the viewport |
virtualization.bufferColumn | number | 1 | columns rendered outside of the viewport |