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

{#each $headerRows as headerRow (headerRow.id)}
  <Subscribe rowProps={headerRow.props()} let:rowProps>
    {rowProps.group}
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.group}
      </Subscribe>
    {/each}
  </Subscribe>
{/each}

{#each $headerRows as headerRow (headerRow.id)}
  <Subscribe rowProps={headerRow.props()} let:rowProps>
    {rowProps.group}
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.group}
      </Subscribe>
    {/each}
  </Subscribe>
{/each}

HeaderCell props

• grouped: boolean
• disabled: boolean
• toggle: (event: Event) => void
• clear: () => void

BodyCell props

• repeated: boolean
• aggregated: boolean
• grouped: boolean

Plugin State

const { headerRows, rows, pluginStates } = table.createViewModel(columns);
const { ... } = pluginStates.group;

const { headerRows, rows, pluginStates } = table.createViewModel(columns);
const { ... } = pluginStates.group;

groupByIds: ArraySetStore<string>

Active grouping keys.