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;

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;

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;