Row grouping options and events

comins-table@0.2.2React

Single-depth grouping with parent-owned groups, membership, and expansion. Distinct from tree children. The explicit groups array determines group order.

Grouping and selection example

CominsRowGroupingConfig

groups

groups: readonly TGroup[];

Required group definitions. Empty groups remain visible; sorting applies to rows within each group.

getGroupId

getGroupId: (group: TGroup) => CominsRowId;

Required stable unique group ID.

getRowGroupId

getRowGroupId: (row: TData, dataIndex: number) => CominsRowId;

Required resolver from source row and dataIndex to its group ID.

getGroupLabel

getGroupLabel?: (group: TGroup) => React.ReactNode;

Group-header label; defaults to the string form of the group ID.

expandedGroupIds

expandedGroupIds?: readonly CominsRowId[];

Parent-owned expanded group IDs. Defaults to an empty array; update via onChangeExpandedGroupIds.

onChangeExpandedGroupIds

onChangeExpandedGroupIds?: (groupIds: CominsRowId[]) => void;

Reports the full next ID array on expansion/collapse requests. Apply it to update the view.

aggregations

aggregations?: Readonly<Partial<Record<string, CominsRowGroupAggregation>>>;

avg/count/max/min/sum by column ID. None when omitted. With filtering, aggregates only filtered group members.

renderGroupContent

renderGroupContent?: (params: CominsRowGroupRenderParams<TData, TGroup>) => React.ReactNode;

Custom group-header content; omission uses the built-in label/count presentation.

getGroupRowProps

getGroupRowProps?: (params: CominsRowGroupRenderParams<TData, TGroup>) => CominsRowGroupProps | undefined;

Returns className/style for a group row, separate from ordinary rowProps.

groupDraggable

groupDraggable?: boolean;

Default false. Enables group reordering; update the parent array through onChangeGroups.

onChangeGroups

onChangeGroups?: (groups: TGroup[], details: CominsRowGroupMoveDetails) => void;

Receives the new group array and move details. Separate from row-data changes.

setRowGroupId

setRowGroupId?: (params: CominsSetRowGroupIdParams<TData>) => TData;

Returns a row with updated membership for a cross-group move. Do not mutate the original. Apply data through onChangeData.

CominsRowGroupRenderParams

export type CominsRowGroupRenderParams<TData, TGroup> = {
    aggregateValues: Readonly<Record<string, number | null>>;
    expanded: boolean;
    group: TGroup;
    groupId: CominsRowId;
    groupIndex: number;
    isEmpty: boolean;
    rowCount: number;
};

groupIndex is the position in groups; rowCount and aggregateValues describe current group members.

CominsRowGroupMoveDetails

export type CominsRowGroupMoveDetails = {
    fromIndex: number;
    groupId: CominsRowId;
    reason: "move";
    targetGroupId: CominsRowId;
    toIndex: number;
};

Group reorder result. fromIndex/toIndex are group-array indexes; reason is move.

CominsSetRowGroupIdParams

export type CominsSetRowGroupIdParams<TData> = {
    fromGroupId: CominsRowId;
    row: TData;
    rowId: CominsRowId;
    toGroupId: CominsRowId;
};

fromGroupId/toGroupId identify the membership change. Return a row containing the new group field.

label

label?: {
        render?: (group: TGroup) => React.ReactNode;
    };

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

content

content?: {
        render?: (params: CominsRowGroupRenderParams<TData, TGroup>) => React.ReactNode;
    };