Vue Data Grid Events

Events

CDataGrid emits — one event per state change, each carrying structured state as its arguments.

The grid emits one event per state change, each carrying structured state as its arguments. Listen in the template with the kebab-case form — @sorting-change="(sorting) => …".

EventPayload (arguments)
sorting-changesorting: SortingState
filter-changecolumnFilters: ColumnFiltersState, globalFilter: string
selection-changerowSelection: RowSelectionState, selectedItems: object[]
pagination-changepagination: PaginationState
edit-startitem: object, columnId: string
edit-commit{ item, columnId, value, previousValue } — the grid never mutates items; apply the change yourself. Undo/redo re-emits it with the values swapped
edit-cancelitem: object, columnId: string
sizing-changecolumnSizing: ColumnSizingState
pinning-changecolumnPinning: ColumnPinningState
order-changecolumnOrder: ColumnOrderState
visibility-changecolumnVisibility: VisibilityState
data-load{ items, totalRows } (server-side mode)
data-errorerror: unknown (server-side mode)

Events fire for headless-driven changes too — driving the exposed table imperatively emits the same events as user interaction.