Emits

API

sort-change

Triggered when sorting changes. When defaultSort.dataIndex is not found, col will return null.

(e: 'sort-change', col: StkTableColumn<DT> | null, order: Order, data: DT[], sortConfig: SortConfig<DT>): void;

Parameter	Description
col	The sorted column
order	Sort direction
data	The table's current working data (internal copy after sorting and filtering), not the original props.dataSource. If filters are active, data only contains filtered rows. In sort-remote scenarios, sort your original data source and assign it back, do NOT directly assign data to dataSource
sortConfig	Sort configuration

row-click

Click event for a row.

(e: 'row-click', ev: MouseEvent, row: DT, data: { rowIndex: number }): void;

current-change

Triggered when a row is selected. ev returns null if not triggered by a click event.

(e: 'current-change', ev: MouseEvent | null, row: DT | undefined, data: { select: boolean }): void;

cell-selected

Triggered when a cell is selected. ev returns null if not triggered by a click event.

(e: 'cell-selected', ev: MouseEvent | null, data: { select: boolean; row: DT | undefined; col: StkTableColumn<DT> | undefined }): void;

row-dblclick

Double click event for a row.

(e: 'row-dblclick', ev: MouseEvent, row: DT, data: { rowIndex: number }): void;

header-row-menu

Right click event for table header.

(e: 'header-row-menu', ev: MouseEvent): void;

row-menu

Right click event for table body row.

(e: 'row-menu', ev: MouseEvent, row: DT, data: { rowIndex: number }): void;

cell-click

Click event for a cell.

(e: 'cell-click', ev: MouseEvent, row: DT, col: StkTableColumn<DT>, data: { rowIndex: number }): void;

cell-mouseenter

Mouse enter event for a cell.

(e: 'cell-mouseenter', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;

cell-mouseleave

Mouse leave event for a cell.

(e: 'cell-mouseleave', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;

cell-mouseover

Mouse over event for a cell.

(e: 'cell-mouseover', ev: MouseEvent, row: DT, col: StkTableColumn<DT>): void;

cell-mousedown

Mouse down event for a cell.

(e: 'cell-mousedown', ev: MouseEvent, row: DT, col: StkTableColumn<DT>, data: { rowIndex: number }): void;

header-cell-click

Click event for header cell.

(e: 'header-cell-click', ev: MouseEvent, col: StkTableColumn<DT>): void;

scroll

Table scroll event.

(e: 'scroll', ev: Event, data: { startIndex: number; endIndex: number }): void;

scroll-x

Table horizontal scroll event.

(e: 'scroll-x', ev: Event): void;

col-order-change

Header column drag event.

(e: 'col-order-change', dragStartKey: string, targetColKey: string): void;

th-drag-start

Header column drag start.

(e: 'th-drag-start', dragStartKey: string): void;

th-drop

Header column drag drop.

(e: 'th-drop', targetColKey: string): void;

row-order-change

Row drag event.

(e: 'row-order-change', dragStartKey: string, targetRowKey: string): void;

col-resize

Triggered when column width changes.

(e: 'col-resize', col: StkTableColumn<DT>): void;

filter-change

Triggered when filter status changes. This callback is only triggered when calling the setFilter method to set the filter status.

(e: 'filter-change', status: Record<UniqKey, FilterStatus>): void;

toggle-row-expand

Triggered when expanding a row.

(e: 'toggle-row-expand', data: { expanded: boolean; row: DT; col: StkTableColumn<DT> | null }): void;

toggle-tree-expand

Triggered when clicking to expand a tree row.

(e: 'toggle-tree-expand', data: { expanded: boolean; row: DT; col: StkTableColumn<DT> | null }): void;

area-selection-change

Area selection change event.

(e: 'area-selection-change', ranges: AreaSelectionRange[]): void;

AreaSelectionRange

Cell selection range type. Each range describes the cells covered in the table via the index field.

type AreaSelectionRange = {
    index: {
        /** Column index range [startCol, endCol] (both ends inclusive) @deprecated Use begin/end instead */
        x: [number, number];
        /** Row index range [startRow, endRow] (both ends inclusive) @deprecated Use begin/end instead */
        y: [number, number];
        /** Start point index of the selection */
        begin: { row: number; col: number };
        /** End point index of the selection */
        end: { row: number; col: number };
    };
};

Field	Type	Description
index.x	[number, number]	Column index range covered by the selection, [startCol, endCol], both ends inclusive. Deprecated, use begin/end instead
index.y	[number, number]	Row index range covered by the selection, [startRow, endRow], both ends inclusive. Deprecated, use begin/end instead
index.begin	{ row: number; col: number }	Start point index of the selection
index.end	{ row: number; col: number }	End point index of the selection

When using Ctrl multi-select or Shift range-select, ranges may contain multiple selection ranges.

update:columns

Update width when v-model:columns col is resized.

(e: 'update:columns', cols: StkTableColumn<DT>[]): void;