Standard Data
Grouped Summary Table
A data table whose rows collapse into named groups, each with its own subtotal row and a grand total footer — the spreadsheet-pivot view buyers expect for cohort, region, or category reporting without a pivot-table library.
$ velocityx add standard-grouped-summary-table
Built for react.
Needs react already installed
as a peer dependency.
An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.
Full docs for Grouped Summary Table →
Needs a licence key —
subscribe here, then
velocityx loginonce.
| Account | Revenue | Deals |
|---|---|---|
| Meridian Health | 128,400 | 3 |
| Solstice Robotics | 96,200 | 2 |
| Subtotal | 224,600 | 5 |
| Harbor Logistics | 54,300 | 5 |
| Blackwood & Sons | 41,800 | 4 |
| Blue Pine Studio | 22,100 | 2 |
| Subtotal | 118,200 | 11 |
| Grand total | 342,800 | 16 |
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| columns | array | No | [] | |
| groups | array | No | [] | |
| valueKeys | array | No | [] | |
| getRowId | function | No | (row, index) => row.id ?? index | |
| initiallyCollapsed | array | No | [] | |
| caption | string | No | "Grouped summary table" | |
| className | string | No | "" |
No `Props:` JSDoc comment found — types are undocumented in source, only names/defaults are known.
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/standard-grouped-summary-table/GroupedSummaryTable.jsxUsing the Grouped Summary Table component
Install it with velocityx add standard-grouped-summary-table.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Standard Data.
A query-builder for data tables — stack field/operator/value condition rows and combine them with a shared AND/OR joiner, so users compose multi-condition filters without writing a query language.
reactCheckbox row selection for a data table with a correctly indeterminate select-all, a live selected count, and a contextual action bar that appears only once something is selected, so bulk edit, export, or delete never need a separate mode.
reactTurns a truncated table cell into a focus-trapped popover showing the full value with a one-click copy button, so long IDs, JSON blobs or notes never need their own column width.
reactA settings popover for showing or hiding table columns, with the chosen layout remembered between visits so people don't have to rebuild their view every time they come back.
react