Table events and payloads

comins-table@0.2.2React

Reference for table change notifications and DOM input events. onChangeSelection/onChangeSort/onChangeSortModel/onChangeColumnLayout report internal state changes; there are no matching controlled input props. onChangeData requests a parent data update.

Sort notification example

Table props

onChangeData

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

Entire next row array produced by edits/moves. Apply it to parent data. Sorting alone does not reorder the source data.

onChangeSelection

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

Since 0.2.2, external data changes clearing Flat/Tree selection also notify this callback.

Notification of a changed row-ID/cell/range selection snapshot. Not a data update callback.

onChangeSort

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

Notification of the primary single sort or null. Use onChangeSortModel for all rules.

onChangeSortModel

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

Notification of the full ordered sort model. Does not automatically request server-side sorting.

onChangeColumnLayout

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

Layout-change notification for movement, size, and visibility state. Save and restore using ref.setColumnLayout.

onClickCell

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

Receives raw value and row/column on a cell click, after built-in selection handling. The event may bubble to the row.

onClickRow

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

Row click event; may also run when a cell click bubbles.

onDoubleClickCell

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

Cell double-click event carrying raw value; not an edit commit callback.

onDoubleClickRow

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

Row double-click event.

onContextMenuCell

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

Cell context-menu event. Call event.preventDefault() to suppress the browser menu.

onContextMenuRow

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

Row context-menu event. Account for cell-event bubbling and row selection.

onKeyDownCell

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

React cell keyboard event with row, column, value, and key information.

onKeyDownRow

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

React row keyboard event; cell keyboard events may bubble.

onBeforeRowDrag

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

Return false to veto a drag before it starts. Async Promise returns are not supported.

onRowDrag

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

Reports a native PointerEvent and current target during dragging. Check target.valid; this event alone does not commit a data move.

onAfterDragRow

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

Reports result, reason, and optional target at the end. event can be null. Check for moved before treating it as success.

CominsTreeTableProps

onChangeData

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

In Tree mode, receives the entire next CominsTreeNode array. Apply expansion and move results to the parent.

onBeforeRowDrag

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

Tree starts from pointer or keyboard events; return false to veto.

onRowDrag

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

Receives native pointer/keyboard events and the tree destination.

onAfterDragRow

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

Tree completion result; event may be PointerEvent, KeyboardEvent, or null.

CominsViewportTableProps

onChangeData

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

Viewport receives a CominsViewportData snapshot, not a plain row array.

CominsEventRow

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

data is the source row; id is the business ID. index is the display index and dataIndex is the source-array index. Viewport uses absolute indexes.

CominsEventColumn

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

definition is the normalized column definition; index is the visible column index.

CominsRowEventPayload

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

Top-level index and row.index identify the event row display position.

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 is the raw cell value, not renderer output.

CominsRowKeyboardEventPayload

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

Specializes the row payload event to React.KeyboardEvent.

CominsCellKeyboardEventPayload

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

Specializes the cell payload event to React.KeyboardEvent.

CominsBeforeRowDragPayload

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

Source row and optional group/table identifiers at drag start.

CominsRowDragPayload

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

Replaces the start event with native PointerEvent and adds target.

CominsAfterDragRowPayload

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

Completion includes cancellation and rejection as well as successful drops.

CominsRowDragTarget

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

valid may be false; rowId/groupId/tableId/tree depend on the target mode.

CominsRowDragResult

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

Only moved denotes a successful move.

CominsRowDragReason

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

Distinguishes termination reasons. Check result as well as drop.

CominsBeforeTreeRowDragPayload

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

Tree drag start also supports keyboard input.

CominsTreeRowDragPayload

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

Payload while dragging a tree row.

CominsAfterTreeRowDragPayload

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

Payload when a tree drag ends.

Related API

• Basic options
• Columns
• Data loading
• Filtering
• Grouping
• Row details