Emits 이벤트

API

sort-change

정렬 변경 시トリ거. defaultSort.dataIndex를 찾을 수 없으면 col은 null 반환.

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

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;

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 col resize 시 너비 업데이트.

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