Column options

import type { ColumnConfig } from "@datagrid/vue-ui";

const columns: Array<ColumnConfig<Person>> = [{ field: "name", sortable: true }];

Callback parameters (params) contain value, data (the row data), item (the row object) and column.

Identification & header

Option	Type	Description
field	string	property of the row data, nested with dots ("address.city")
id	string	unique id, default field
text	string	header text
type	string | string[]	"text", "number", "date", "boolean" or custom types
children	ColumnConfig[]	columns of a column group
headerTooltip	string	tooltip of the header
meta	any	your own data

Size & layout

Option	Type	Default	Description
width	number	100	width in px
minWidth / maxWidth	number	–
flex	number	–	share of the free space
autosize	boolean	false	width from the content
autosizeAdjust	(column, widths) => number	–	adjust the autosized width
autoHeight	boolean	false	text wraps, rows grow
pinned	"left" | "right"	–	pinned column
visible	boolean	true

Features

Option	Type	Default	Description
sortable	boolean	false
filterable	boolean	false
resizeable	boolean	false
moveable	boolean	false
groupable	boolean	false
editable	boolean | (params) => boolean	false
menu	boolean	grid option columnMenu	column menu button
rowDrag	boolean | (params) => boolean	false	drag handle to drag rows
cellSelectable	boolean | (params) => boolean	true	for cell selection
cellFocusable	boolean | (params) => boolean	true

Values

Option	Type	Description
valueGetter	(params) => value	computed value
valueFormatter	(params) => string	displayed text, see formatters
valueSetter	(params) => void | boolean	writes an edited value, return false if nothing changed
valueParser	({ value, oldValue, item, column }) => value	converts input to the column type

Sorting

Option	Type	Description
sort	"asc" | "desc"	initial sort
sortingOrder	("asc" | "desc" | null)[]	order when clicking
sortFunc	(a, b) => number	comparator, a / b contain value and item

Filtering

Option	Type	Description
filterType	"text" | "number" | "date" | "set" | "boolean"	default depends on type
filterParams	{ operators?, values?, debounce? }	see options
filter	(value, filterValue, row) => boolean	custom filter function
filterComponent	Component	custom floating filter; Vue: props modelValue, column, emits update:modelValue; React: props value, onChange, column

Editing

Option	Type	Description
editor	"text" | "textarea" | "number" | "date" | "select" | "checkbox"	built-in editor
editorParams	{ options?, placeholder?, min?, max?, step? }	parameters of the editor
editComponent	Component	custom editor, see custom editors

Aggregation

Option	Type	Description
aggFunc	"sum" | "avg" | "min" | "max" | "count" | "first" | "last" | (values, rows) => any	aggregation for group rows and the total row

Rendering

Option	Type	Description
align	"left" | "center" | "right" | (params) => alignment	cell alignment
headerAlign	"left" | "center" | "right"	header alignment
cellClass	string | string[] | (params) => string | string[]
cellStyle	style | (params) => style
headerCellClass	string | string[] | ({ column }) => …
headerCellStyle	style | ({ column }) => style
tooltip	boolean | (params) => string	cell tooltip
flashOnChange	boolean	highlights the cell when its value changes (green/red for numbers)
component	Component	cell component
componentProps	object | (params) => object	additional props of the cell component
headerComponent	Component	header component (text, column)