Skip to content
comins.DOCS
Data TableAPI Reference

Column, header, and cell options

comins-table@0.2.2React

Reference for columns and columnGroups. A column ID connects sorting, filtering, pinning, and saved layouts. Omitted rendering options use the built-in renderer.

Column pinning example

CominsTableColumn

Section titled “CominsTableColumn”

field

Section titled “field”
field: string;

Required value path in each row. Supports dotted nested paths.

label

Section titled “label”
label: React.ReactNode;

Required ReactNode displayed in the header.

id

Section titled “id”
id?: string;

Defaults to field. Use distinct IDs when displaying the same field more than once.

width

Section titled “width”
width?: number;

Initial width in pixels. Omission uses the default layout calculation.

minWidth

Section titled “minWidth”
minWidth?: number;

Minimum width in pixels. The default resize minimum is 88px.

maxWidth

Section titled “maxWidth”
maxWidth?: number;

Maximum width in pixels; no custom upper limit when omitted.

hidden

Section titled “hidden”
hidden?: boolean;

Default false. Hides the column; interpreted together with runtime layout state.

pinned

Section titled “pinned”
pinned?: CominsColumnPinned;

Pins to left or right. Unpinned when omitted. Insufficient available width may temporarily move some pinned columns into the center.

lockPosition

Section titled “lockPosition”
lockPosition?: boolean;

Default false. Restricts positional moves; it does not lock width.

sort

Section titled “sort”
sort?: boolean | ((left: TValue, right: TValue, leftRow: TData, rightRow: TData) => number);

Omitted/false disables sorting. true uses built-in comparison; a comparator receives raw values and rows and returns negative/zero/positive.

filter

Section titled “filter”
filter?: CominsColumnFilterConfig<TData, TValue>;

No column filter when omitted. See filter options for kind and value extraction.

Section titled “header”
header?: CominsTableHeaderConfig<TData, TValue>;

Header renderer, components, and HTML props; see below.

cell

Section titled “cell”
cell?: CominsTableCellConfig<TData, TValue>;

Cell renderer, format, components, tooltip, and props; see below.

CominsTableColumnGroup

Section titled “CominsTableColumnGroup”

id

Section titled “id”
id: string;

Required unique header-group ID.

label

Section titled “label”
label: React.ReactNode;

Required group-header content.

children

Section titled “children”
children: string[];

Required member column IDs. Use resolved column.id values rather than assuming field names.

hidden

Section titled “hidden”
hidden?: boolean;

Default false. Header-group hidden state.

lockPosition

Section titled “lockPosition”
lockPosition?: boolean;

Default false. Restricts moving the group.

pinned

Section titled “pinned”
pinned?: CominsColumnPinned;

Group pinning to left/right; none at group level when omitted. See the pinning guide for child interactions.

CominsTableHeaderConfig

Section titled “CominsTableHeaderConfig”

components

Section titled “components”
components?: Array<CominsHeaderComponent<TData, TValue>>;

Built-in header components; none added when omitted. See the header guide for component variants.

props

Section titled “props”
props?: React.ThHTMLAttributes<HTMLTableCellElement>;

HTML attributes for the header th, using React attribute types.

renderer

Section titled “renderer”
renderer?: (params: CominsHeaderComponentPayload<TData, TValue>) => React.ReactNode;

Replaces default header content; receives column, layout, and sort information.

CominsTableCellConfig

Section titled “CominsTableCellConfig”

components

Section titled “components”
components?: Array<CominsCellComponent<TData, TValue>>;

Built-in cell components; none added when omitted. See the cell guide for component variants.

format

Section titled “format”
format?: (params: CominsCellComponentPayload<TData, TValue>) => React.ReactNode;

Formats raw values as ReactNodes without changing the underlying sort/filter value.

props

Section titled “props”
props?: CominsColumnProps<TData, TValue> | ((params: CominsCellComponentPayload<TData, TValue>) => CominsColumnProps<TData, TValue>);

Cell class, style, and editing/copy guards. Pass an object or a function of the cell payload.

renderer

Section titled “renderer”
renderer?: (params: CominsCellComponentPayload<TData, TValue>) => React.ReactNode;

Renders custom cell content; omission uses the built-in rendering path.

tooltip

Section titled “tooltip”
tooltip?: string | ((params: CominsCellComponentPayload<TData, TValue>) => React.ReactNode) | {
        /** Informational content shown on hover/focus. Interactive popovers are not supported. */
        render?: (params: CominsCellComponentPayload<TData, TValue>) => React.ReactNode;
    };

Tooltip string or function returning a ReactNode from the cell payload. No custom tooltip when omitted.

parseClipboard

Section titled “parseClipboard”
parseClipboard?: (params: CominsCellComponentPayload<TData, TValue> & {
        text: string;
    }) => TValue;

Converts external TSV text to a cell value. text is the incoming string; value and row describe the original target. Without this callback, values remain strings. Throwing rejects the entire paste. Must be synchronous and must not mutate inputs. Not used by Fill.

validateFill

Section titled “validateFill”
validateFill?: (params: Omit<CominsCellComponentPayload<TData, TValue>, "value"> & {
        value: unknown;
    }) => boolean | void;

Validates the candidate value with its original type against the unchanged target row. Return true or undefined to accept; return false or throw to reject the entire fill. Protected cells and unchanged values are not validated. Async validation is unsupported. Rejection reaches the React error callback and the Ref returns false.

CominsColumnProps

Section titled “CominsColumnProps”

className

Section titled “className”
className?: string | ((params: CominsCellComponentPayload<TData, TValue>) => string | undefined);

Cell class string or payload-based function.

copyable

Section titled “copyable”
copyable?: CominsClipboardGuard<TData, TValue>;

Boolean or per-cell copy guard. Omission follows the default copy policy.

disabled

Section titled “disabled”
disabled?: CominsClipboardGuard<TData, TValue>;

Boolean or per-cell disabled guard. Defaults to false.

pasteable

Section titled “pasteable”
pasteable?: CominsClipboardGuard<TData, TValue>;

Controls paste permission; this alone does not enable keyboard clipboard handling.

style

Section titled “style”
style?: React.CSSProperties | ((params: CominsCellComponentPayload<TData, TValue>) => React.CSSProperties | undefined);

Cell inline styles or payload-based function.

Section titled “Related API”

render

Section titled “render”
render?: (params: CominsHeaderComponentPayload<TData, TValue>) => React.ReactNode;

See the 0.2.2 migration guide for rendering precedence and return values.

render

Section titled “render”
render?: (params: CominsCellComponentPayload<TData, TValue>) => React.ReactNode;

See the 0.2.2 migration guide for rendering precedence and return values.