Grid API

The grid API is the Core instance, the same for all frameworks.

You get it from the ready event, from the template ref (grid.value.core) or from useDatagrid.

const grid = ref<InstanceType<typeof Datagrid>>();
const api = computed(() => grid.value?.core);

You get it from onReady or from the handle of a ref (grid.current.api).

const grid = useRef<DatagridHandle>(null);
const api = () => grid.current?.api;

<Datagrid ref={grid} ... />

Methods accepting a column (ColumnIdentification) take the column id, the column object or the column definition. Rows can be passed as id (ItemUid) or row object.

Data

Method	Description
setData(rows)	replaces the data
getData()	the data array
refresh()	re-applies sorting, filtering, grouping and rerenders cells; reloads server side data
getRow(id) / getItem(id)	row (or group) by id
getAllRows()	all rows including children
getAllVisibleItems() / getAllVisibleRows()	rows (and groups) of the current view
getFilteredSortedItems(includeGroups?)	all rows after filtering and sorting, ignoring pagination and collapsed state
getTotalItemCount() / getFilteredItemCount()	number of rows
setPinnedRows(top, bottom)	pinned rows
getPinnedTopRows() / getPinnedBottomRows()	pinned rows (including the total row)
setValue(column, row, value, source?)	changes a cell value; the event source is "api" (not undoable), pass "edit" for changes made by the user
clearValue(cell)	clears an editable cell
getCellValue(cell) / getFormattedCellValue(cell)	value / text of a cell
isLoading()

Columns

Method	Description
setColumns(configs)	replaces the column definitions
getColumn(id)	column object
getAllColumns()	all columns (hidden and groups included)
getLeafColumns()	visible columns rendering cells
getLeftColumns() / getCenterColumns() / getRightColumns()	by pinned area
setColumnWidth(column, width)
autosizeColumns(columns?, rows?)	width from content (async)
sizeColumnsToFit()	distributes the free space to flex columns
setColumnPinned(column, "left" | "right" | undefined)
moveColumn(column, index)
hideColumn(column) / showColumn(column) / setColumnVisible(column, visible) / toggleColumnVisibility(column)
getColumnState() / setColumnState(state) / resetColumnState()	column layout
ensureColumnVisible(column)	scrolls horizontally

Sorting

Method	Description
sortColumn(column, "asc" | "desc" | null, add?)
toggleColumnSort(column, multiple?)	like a header click
setSortColumns([{ column, asc }])
getSortColumns()	[{ column, asc }]
getColumnSort(column)	sort state of a column
clearSort()

Filtering

Method	Description
setColumnFilter(column, value)
getColumnFilter(column)	{ column, value }
clearColumnFilter(column)
setColumnFilters([{ column, value }])	replaces all column filters
getColumnFilters()
setGlobalFilter(value) / getGlobalFilter()	quick filter
clearFilters()	all column filters and the quick filter
getDistinctValues(column)	values for set filters

Grouping & expanding

Method	Description
setRowGrouping(columns)
addRowGrouping(column, asc?) / deleteRowGrouping(column) / clearRowGrouping()
moveRowGrouping(column, index)
toggleRowGroupingSort(column)
getColumnGroups()	ids of grouped columns
expandAll() / collapseAll()	groups and tree rows
setGroup(item, expanded) / toggleItemExpanded(item)
setExpandedKeys(ids) / getExpandedKeys()
toggleDetails(row)	detail row
getStickyGroups()	group rows currently shown as sticky group rows

Selection & focus

Method	Description
getSelectedData() / getSelectedItems() / getSelectedItemKeys()	selected rows
getSelectedCells()	[{ item, column }]
setSelectedRows(ids) / setSelectedCells(cells)
toggleRowSelection(row, shift?)
selectAll() / deselectAll() / getSelectAllState()
isRowSelected(row) / isCellSelected(cell)
getFocusCell() / setFocusCell({ item, column })
focus()	browser focus to the focused cell
ensureVisible(cell) / ensureVisibleItem(row, smooth?)	scroll into view

Editing & clipboard

Method	Description
startEdit(cell, initialValue?)	returns false if the cell is not editable
endEdit() / cancelEdit()
isEditing() / getEditState()
isCellEditable(cell)
copySelection()	copies to the clipboard (async)
getSelectionAsText()	tab separated text of the selection
pasteText(text)	pastes at the focused cell (one undo step)
cutSelection()	copies the selected cells and clears them (async)
clearSelectedCells()	clears the editable selected cells (or the focused cell)
getSelectionBounds()	{ rowStart, rowEnd, colStart, colEnd } of the cell selection
fillRange(source, target)	fills target with the values (series) of source, see fill handle
undo() / redo()	undo / redo the last change, return false if there is nothing to undo
canUndo() / canRedo() / clearUndoHistory()

Menus & status bar

Method	Description
getContextMenuItems(cell)	resolved items of the context menu for a cell
getDefaultContextMenuItems()	ids of the default items
getStatusBarInfo()	{ totalRows, filteredRows, selectedRows, cellCount, sum, avg, min, max }
getStatusBarItems()	[{ id, label, value }] – the localized items of the status bar

Pagination

Method	Description
setPageIndex(index) / nextPage() / prevPage()
setPageSize(size)
getPaginationState()	{ active, pageIndex, pageCount, pageSize, pageSizes, hasPreviousPage, hasNextPage, rowCount }

State, options & export

Method	Description
getState() / setState(state)	see state
setOptions(options) / getOptions()
getDataAsCsv(params?) / exportCsv(params?)	see export
translate(key, params?)	localized text
getScrollX() / getScrollY() / setScrollX(x) / setScrollY(y)
destroy()	removes all listeners (done by the component)

Utilities

The packages also export helper functions:

import {
  formatters,          // value formatter factories
  getValue,            // (column, row) => raw value
  getText,             // (column, row) => formatted text
  compareValues,       // default comparator
  createFilterPredicate,
  parseNumber, parseDate, parseBoolean,
  registerLocale,
  applyRowDrop,        // reorders an array after a row-drop event
  parseDelimited, toDelimited, downloadFile,
} from "@datagrid/vue-ui";