테이블 이벤트·payload

comins-table@0.2.2React

테이블 변경 알림과 DOM 입력 이벤트 사전입니다. 아래 onChangeSelection/onChangeSort/onChangeSortModel/onChangeColumnLayout은 내부 상태 변경 알림이며 대응하는 controlled 입력 prop은 없습니다. onChangeData는 부모 데이터 갱신 요청입니다.

정렬 변경 알림 실행 예제

테이블 props

onChangeData

onChangeData?: (data: TData[]) => void;

편집·이동으로 생성된 전체 다음 행 배열입니다. 부모 data에 반영합니다. 정렬만 바꾸는 경우 원본 data 순서를 변경하지 않습니다.

onChangeSelection

onChangeSelection?: (selection: CominsSelectionState) => void;

0.2.2부터 외부 data 변경으로 Flat·Tree 선택이 해제되는 경우에도 선택 변경을 알립니다.

행 ID·셀·범위 선택 snapshot 변경 알림입니다. 데이터 갱신 콜백이 아닙니다.

onChangeSort

onChangeSort?: (sort: CominsSortState | null) => void;

대표 단일 정렬 상태 또는 null 변경 알림입니다. 다중 정렬 전체는 onChangeSortModel로 받습니다.

onChangeSortModel

onChangeSortModel?: (sortModel: CominsSortModel) => void;

우선순위가 있는 전체 정렬 모델의 변경 알림입니다. 서버 정렬을 자동 요청하지 않습니다.

onChangeColumnLayout

onChangeColumnLayout?: (layout: CominsColumnLayout) => void;

이동·크기·표시 상태 등의 레이아웃 변경 알림입니다. 저장 후 ref.setColumnLayout으로 복원할 수 있습니다.

onClickCell

onClickCell?: (payload: CominsCellEventPayload<TData>) => void;

셀 클릭 시 원본 value와 row/column을 전달합니다. 기본 선택 처리 뒤 호출하며 이벤트가 행으로 전파될 수 있습니다.

onClickRow

onClickRow?: (payload: CominsRowEventPayload<TData>) => void;

행 클릭 이벤트입니다. 셀 클릭이 전파되면 함께 호출될 수 있습니다.

onDoubleClickCell

onDoubleClickCell?: (payload: CominsCellEventPayload<TData>) => void;

셀 더블클릭 이벤트입니다. 편집 결과 콜백이 아니며 원본 value를 전달합니다.

onDoubleClickRow

onDoubleClickRow?: (payload: CominsRowEventPayload<TData>) => void;

행 더블클릭 이벤트입니다.

onContextMenuCell

onContextMenuCell?: (payload: CominsCellEventPayload<TData>) => void;

셀 우클릭/컨텍스트 메뉴 이벤트입니다. 기본 브라우저 메뉴를 막으려면 event.preventDefault()를 호출합니다.

onContextMenuRow

onContextMenuRow?: (payload: CominsRowEventPayload<TData>) => void;

행 컨텍스트 메뉴 이벤트입니다. 셀 이벤트 전파와 행 선택을 고려합니다.

onKeyDownCell

onKeyDownCell?: (payload: CominsCellKeyboardEventPayload<TData>) => void;

React 셀 키보드 이벤트입니다. row/column/value와 눌린 키 정보를 전달합니다.

onKeyDownRow

onKeyDownRow?: (payload: CominsRowKeyboardEventPayload<TData>) => void;

React 행 키보드 이벤트입니다. 셀 키 이벤트가 전파될 수 있습니다.

onBeforeRowDrag

onBeforeRowDrag?: (payload: CominsBeforeRowDragPayload<TData>) => boolean | void;

드래그 시작 전에 false를 반환하면 시작을 거절합니다. 비동기 Promise 반환은 지원하지 않습니다.

onRowDrag

onRowDrag?: (payload: CominsRowDragPayload<TData>) => void;

이동 중 native PointerEvent와 현재 target을 전달합니다. target.valid를 확인하고 이 이벤트만으로 데이터 이동을 확정하지 않습니다.

onAfterDragRow

onAfterDragRow?: (payload: CominsAfterDragRowPayload<TData>) => void;

종료 시 result/reason/선택적 target을 알립니다. event는 null일 수 있습니다. moved 여부를 확인하고 성공으로 처리합니다.

CominsTreeTableProps

onChangeData

onChangeData?: (data: CominsTreeNode<TData>[]) => void;

Tree에서는 전체 다음 CominsTreeNode 배열입니다. 노드 펼침과 이동 결과도 부모에 반영합니다.

onBeforeRowDrag

onBeforeRowDrag?: (payload: CominsBeforeTreeRowDragPayload<TData>) => boolean | void;

Tree는 Pointer 또는 Keyboard 시작 이벤트를 받습니다. false로 거절할 수 있습니다.

onRowDrag

onRowDrag?: (payload: CominsTreeRowDragPayload<TData>) => void;

Tree의 native PointerEvent 또는 KeyboardEvent와 목적지를 받습니다.

onAfterDragRow

onAfterDragRow?: (payload: CominsAfterTreeRowDragPayload<TData>) => void;

Tree 종료 결과입니다. event는 PointerEvent/KeyboardEvent/null입니다.

CominsViewportTableProps

onChangeData

onChangeData?: (data: CominsViewportData<TData>) => void;

Viewport에서는 CominsViewportData snapshot입니다. 일반 배열 콜백으로 처리하지 마십시오.

CominsEventRow

export type CominsEventRow<TData> = {
    data: TData;
    dataIndex: number;
    id: CominsRowId;
    index: number;
};

data는 원본 행, id는 업무 ID입니다. index는 표시 인덱스, dataIndex는 원본 배열 인덱스입니다. Viewport에서는 절대 인덱스 기준을 사용합니다.

CominsEventColumn

export type CominsEventColumn<TData, TValue = unknown> = {
    definition: CominsTableRuntimeColumn<TData, TValue>;
    field: string;
    id: string;
    index: number;
    label: React.ReactNode;
};

definition은 정규화한 컬럼 정의, index는 표시 컬럼 인덱스입니다.

CominsRowEventPayload

export type CominsRowEventPayload<TData, TEvent = React.MouseEvent<HTMLTableRowElement>> = {
    event: TEvent;
    index: number;
    row: CominsEventRow<TData>;
};

최상위 index와 row.index는 이벤트 대상의 표시 위치를 나타냅니다.

CominsCellEventPayload

export type CominsCellEventPayload<TData, TValue = unknown, TEvent = React.MouseEvent<HTMLTableCellElement>> = {
    column: CominsEventColumn<TData, TValue>;
    event: TEvent;
    index: number;
    row: CominsEventRow<TData>;
    value: TValue;
};

value는 renderer 출력이 아닌 원본 셀 값입니다.

CominsRowKeyboardEventPayload

export type CominsRowKeyboardEventPayload<TData> = CominsRowEventPayload<TData, React.KeyboardEvent<HTMLTableRowElement>>;

행 payload의 event만 React.KeyboardEvent로 구체화합니다.

CominsCellKeyboardEventPayload

export type CominsCellKeyboardEventPayload<TData, TValue = unknown> = CominsCellEventPayload<TData, TValue, React.KeyboardEvent<HTMLTableCellElement>>;

셀 payload의 event만 React.KeyboardEvent로 구체화합니다.

CominsBeforeRowDragPayload

export type CominsBeforeRowDragPayload<TData> = {
    event: React.PointerEvent<HTMLElement>;
    row: CominsEventRow<TData>;
    sourceGroupId?: CominsRowId;
    sourceTableId?: string;
};

시작 시점의 원본 행과 선택적 그룹/테이블 식별자입니다.

CominsRowDragPayload

export type CominsRowDragPayload<TData> = Omit<CominsBeforeRowDragPayload<TData>, "event"> & {
    event: PointerEvent;
    target: CominsRowDragTarget;
};

시작 payload의 event를 native PointerEvent로 대체하고 target을 추가합니다.

CominsAfterDragRowPayload

export type CominsAfterDragRowPayload<TData> = Omit<CominsBeforeRowDragPayload<TData>, "event"> & {
    event: PointerEvent | null;
    reason: CominsRowDragReason;
    result: CominsRowDragResult;
    target?: CominsRowDragTarget;
};

종료 결과는 드롭 성공뿐 아니라 취소와 거절을 포함합니다.

CominsRowDragTarget

export type CominsRowDragTarget = {
    tree?: CominsTreeMoveDestination & {
        position: CominsTreeDropPosition;
    };
    dataIndex?: number;
    groupId?: CominsRowId;
    rowId?: CominsRowId;
    tableId?: string;
    valid: boolean;
};

valid가 false일 수 있으며, rowId/groupId/tableId/tree는 대상 모드에 따라 존재합니다.

CominsRowDragResult

export type CominsRowDragResult = "cancelled" | "moved" | "rejected";

moved만 이동 성공입니다.

CominsRowDragReason

export type CominsRowDragReason = "blur" | "drop" | "duplicate-id" | "escape" | "invalid-target" | "pointer-cancel" | "stale-target" | "unchanged";

종료 원인을 구분합니다. drop만 보지 말고 result도 확인하십시오.

CominsBeforeTreeRowDragPayload

export type CominsBeforeTreeRowDragPayload<T> = {
    event: React.PointerEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
    row: CominsEventRow<T>;
};

Tree 시작 이벤트는 키보드도 지원합니다.

CominsTreeRowDragPayload

export type CominsTreeRowDragPayload<T> = {
    event: PointerEvent | KeyboardEvent;
    row: CominsEventRow<T>;
    target: CominsRowDragTarget;
};

Tree 이동 중 payload입니다.

CominsAfterTreeRowDragPayload

export type CominsAfterTreeRowDragPayload<T> = {
    event: PointerEvent | KeyboardEvent | null;
    row: CominsEventRow<T>;
    target?: CominsRowDragTarget;
    reason: CominsRowDragReason;
    result: CominsRowDragResult;
};

Tree 이동 종료 payload입니다.

관련 API

• 기본 옵션
• 컬럼
• 데이터 로딩
• 필터
• 그룹
• 행 상세