Grouped Rows

PreviewCopy Anchor Link

UsageCopy Anchor Link

When rows belong to a category, like plugins by type or tasks by project, pass groupBy. Return the category's name from key, and the Data Table puts each category's rows under a heading that shows its name and how many rows it holds.

<ContentDataTable
  id="plugins-table"
  groupBy={{ key: (plugin) => plugin.category }}
  columns={columns}
  edges={data.edges}
  pageInfo={data.pageInfo}
  order={{ defaultOrder: { column: 'name', order: 'asc' } }}
/>

groupBy works with columns and with custom rows. The AdminCP's AI → Actions page uses both: one card per action, grouped by the plugin that registers it.

Change the headingCopy Anchor Link

The heading shows the key by default. Pass label to render something else, such as a translated name or an icon. The row count stays next to it.

groupBy={{
  key: (action) => action.pluginId,
  label: (group) => <span className="font-mono">{group.key}</span>,
}}

How the groups are orderedCopy Anchor Link

Groups appear in the order their first row does, and rows keep their order within a group. To get groups in a particular order, sort the rows by the category first, then by anything else. Ordering by category on the API is usually enough.

Grouping happens per page. If a category runs across two pages, its heading appears on both, with the count for that page.

APICopy Anchor Link