Skip to content
comins.DOCS
Data TableAPI Reference

Built-in component model and payloads

comins-table@0.2.2React

Configure columns[].cell.components and columns[].header.components with types imported from comins-table. Use the supported type discriminators below; put custom React components in renderer.

Placement and rendering order

Section titled “Placement and rendering order”
type Cell Header Reference
input / checkbox / radio / select / toggle Yes Yes Input components
button / progress Yes Yes Buttons and progress
menu No Yes Header menu
virtual-list Yes No Cell virtual list

A cell renderer takes precedence over format and components. Components replace the default value/format content. Cell input/select appear only when that row is the only selected row; otherwise the default value is displayed. A header renderer replaces label and components. Parent group headers have no component slots.

Component props accept an object or a function of the current payload. Update parent data immutably in callbacks. Built-in click/pointer/keyboard handling is isolated from cell/row selection and header sort/move handling. Custom renderers own their event isolation.

CominsComponentPlacement

Section titled “CominsComponentPlacement”

align

Section titled “align”
align?: CominsComponentAlign;

Default center. Align within the slot using start/center/end.

direction

Section titled “direction”
direction?: CominsComponentDirection;

Default left. Place on the left/right of the value or header label; array order applies within each side.

id

Section titled “id”
id?: string;

Defaults to a slot key based on type and array index. Supply stable unique IDs for dynamic insertion/reordering.

CominsComponentColumnPayload

Section titled “CominsComponentColumnPayload”

definition

Section titled “definition”
definition: CominsTableRuntimeColumn<TData, TValue>;

Normalized runtime column definition. Treat as read-only.

field

Section titled “field”
field: string;

Data path read from the source row.

id

Section titled “id”
id: string;

Column ID used by sorting, filtering, and layout.

index

Section titled “index”
index: number;

Current visible column index, which may differ from the original columns position.

label

Section titled “label”
label: React.ReactNode;

The column ReactNode label.

CominsComponentRowPayload

Section titled “CominsComponentRowPayload”

data

Section titled “data”
data: TData;

Parent-owned source row. Do not mutate it.

dataIndex

Section titled “dataIndex”
dataIndex: number;

Source-data index; absolute in Viewport mode.

disabled

Section titled “disabled”
disabled: boolean;

Resolved disabled state for the row.

id

Section titled “id”
id: CominsRowId;

Stable business row ID.

index

Section titled “index”
index: number;

Current display-row index.

selected

Section titled “selected”
selected: boolean;

Whether the row is selected.

CominsCellComponentPayload

Section titled “CominsCellComponentPayload”

column

Section titled “column”
column: CominsComponentColumnPayload<TData, TValue>;

Column payload described above.

row

Section titled “row”
row: CominsComponentRowPayload<TData>;

Row payload described above.

selection

Section titled “selection”
selection: {
        selectedRowCount: number;
    };

selectedRowCount is the number of selected rows; used for input/select and search visibility.

value

Section titled “value”
value: TValue;

Raw cell value before format/renderer processing.

CominsHeaderComponentPayload

Section titled “CominsHeaderComponentPayload”

column

Section titled “column”
column: CominsComponentColumnPayload<TData, TValue>;

Payload for the header column. There is no row field.

layout

Section titled “layout”
layout: {
        hidden: boolean;
        width?: number;
    };

hidden is resolved visibility state; width is the current width and may be undefined.

sort

Section titled “sort”
sort: {
        count: number;
        direction: CominsSortDirection | null;
        enabled: boolean;
        priority: number | null;
    };

count is total sort-rule count; direction is this column direction or null; enabled reports sort capability; priority is its one-based rank or null.

CominsCellComponent

Section titled “CominsCellComponent”
export type CominsCellComponent<TData, TValue = unknown> = CominsComponentPlacement & CominsCellComponentConfig<TData, TValue>;

Combines placement with a cell-specific type configuration.

CominsHeaderComponent

Section titled “CominsHeaderComponent”
export type CominsHeaderComponent<TData, TValue = unknown> = CominsComponentPlacement & CominsHeaderComponentConfig<TData, TValue>;

Combines placement with a header-specific type configuration.

CominsTableComponentProps

Section titled “CominsTableComponentProps”
export type CominsTableComponentProps<TPayload, TProps> = TProps | ((payload: TPayload) => TProps);

A props resolver receives the current slot payload and returns React attributes.

CominsTableOptions

Section titled “CominsTableOptions”
export type CominsTableOptions<TPayload> = CominsTableComponentOption[] | ((payload: TPayload) => CominsTableComponentOption[]);

Option array or function deriving options from the current payload.

Section titled “Related API”