addGroupBy

addGroupBy groups rows together based on column values and provides aggregated values for groups of rows. Grouped rows are modeled as sub-rows of a grouping row.

The id of a sub-row is in the format {parentId}>{id}.

Options

const table = createTable(data, {
  group: addGroupBy({ ... }),
});

const table = createTable(data, {
  group: addGroupBy({ ... }),
});

initialGroupByIds?: string[]

Default [].

disableMultiGroup?: boolean

Default false.

isMultiGroupEvent?: (event: Event) => boolean

Override multi-group gesture. Default: shift-click.

Column Options

const columns = table.createColumns([
  table.column({
    header: 'Name',
    accessor: 'name',
    plugins: {
      group: { ... },
    },
  }),
]);

const columns = table.createColumns([
  table.column({
    header: 'Name',
    accessor: 'name',
    plugins: {
      group: { ... },
    },
  }),
]);

disable?: boolean

Disable grouping on the column. Default false.

getAggregateValue?: (values) => any

Return aggregated value for the column.

getGroupOn?: (value) => string | number

Return the grouping key and displayed value on the grouping row.

cell?: ({ column, row, value }, state) => RenderConfig

Custom body cell for grouped rows; receives the row, column, value, and TableState.

Prop Set

HeaderCell props cell.current.props.group

grouped: boolean

Whether this column is currently grouped.

toggle: (event: Event) => void

Function to toggle grouping on this column.

clear: () => void

Function to clear grouping on this column.

disabled: boolean

Whether grouping is disabled for this column.

BodyCell props cell.current.props.group

repeated: boolean

Whether this cell is a repeated group value (not the first in group).

aggregated: boolean

Whether this cell displays an aggregated value.

grouped: boolean

Whether this cell is the primary grouped column.

Interactions

• With addPagination, page size counts group rows. A page of ten rows may hold two groups and eight children; the group header and its children are paged together only as far as the page boundary.
• Register group before sort if you want groups ordered by their aggregated values; sort first if the rows inside each group should follow the sort order.

Plugin State

const vm = table.createViewModel(columns)
const { pluginStates } = vm
const { groupByIds } = pluginStates.group

const vm = table.createViewModel(columns)
const { pluginStates } = vm
const { groupByIds } = pluginStates.group

groupByIds: ArraySet<string>

The column ids to group by, in grouping order. Read groupByIds.current, or change it with add(id), remove(id), toggle(id, { clearOthers }), has(id) and clear(). Assigning groupByIds.current replaces the list.

groupByIds.current = ['status']
groupByIds.toggle('age')

groupByIds.current = ['status']
groupByIds.toggle('age')