Emits

API

sort-change

排序が変更されたときにトリガーされます。defaultSort.dataIndexが見つからない場合、colはnullを返します。

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

パラメータ	説明
col	排序対象の列
order	排序方向
data	テーブルの現在の作業データ（排序・フィルタリング後の内部コピー）。元の props.dataSource とは異なります。フィルタが有効な場合、data にはフィルタリングされた行のみが含まれます。sort-remote シナリオでは、元のデータソースを排序して戻してください。data を直接 dataSource に代入しないでください
sortConfig	排序設定

row-click

行のクリックイベント。

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

current-change

行が選択されたときにトリガーされます。evはクリックイベントでトリガーされていない場合はnullを返します。

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

cell-selected

セルが選択されたときにトリガーされます。evはクリックイベントでトリガーされていない場合はnullを返します。

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

row-dblclick

行のダブルクリックイベント。

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

header-row-menu

テーブルヘッダーの右クリックイベント。

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

row-menu

テーブルボディ行の右クリックイベント。

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

cell-click

セルのクリックイベント。

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

cell-mouseenter

セルのマウスエンターイベント。

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

cell-mouseleave

セルのマウスリーブイベント。

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

cell-mouseover

セルのマウスオーバイベント。

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

cell-mousedown

セルのマウストラッグイベント。

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

header-cell-click

ヘッダーセルのクリックイベント。

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

scroll

テーブルスクロールイベント。

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

scroll-x

テーブル横スクロールイベント。

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

col-order-change

ヘッダー列ドラッグイベント。

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

th-drag-start

ヘッダー列ドラッグ開始。

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

th-drop

ヘッダー列ドラッグドロップ。

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

row-order-change

行ドラッグイベント。

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

col-resize

列幅が変更されたときにトリガーされます。

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

filter-change

フィルター状態が変更されたときにトリガーされます。setFilter メソッドを呼び出してフィルター状態を設定したときにのみこのコールバックがトリガーされます。

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

toggle-row-expand

行を展開ときにトリガーされます。

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

toggle-tree-expand

ツリー行を展開するためにクリックしたときにトリガーされます。

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

area-selection-change

エリア選択変更イベント。

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

AreaSelectionRange

セル選択範囲の型。各選択範囲は index フィールドでテーブル内のセル範囲を表します。

type AreaSelectionRange = {
    index: {
        /** 列インデックス範囲 [開始列, 終了列]（両端を含む） @deprecated begin/endを使用してください */
        x: [number, number];
        /** 行インデックス範囲 [開始行, 終了行]（両端を含む） @deprecated begin/endを使用してください */
        y: [number, number];
        /** 選択範囲の開始点インデックス */
        begin: { row: number; col: number };
        /** 選択範囲の終了点インデックス */
        end: { row: number; col: number };
    };
};

フィールド	型	説明
index.x	[number, number]	選択範囲が覆う列インデックス範囲、[開始列, 終了列]、両端を含む。非推奨、begin/endを使用してください
index.y	[number, number]	選択範囲が覆う行インデックス範囲、[開始行, 終了行]、両端を含む。非推奨、begin/endを使用してください
index.begin	{ row: number; col: number }	選択範囲の開始点インデックス
index.end	{ row: number; col: number }	選択範囲の終了点インデックス

Ctrl 複数選択または Shift 範囲選択を使用する場合、ranges には複数の選択範囲が含まれる可能性があります。

update:columns

v-model:columns列のサイズ変更時に幅を更新します。

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