Footer & Aggregation

A footer method picker (sum/avg/min/max/count) per column, scoped to the current row selection when one exists.

Installation

Footer aggregation ships with Data Table — no separate install.

Works with:Data Table

npx shadcn@latest add @kotsas-ui/data-table

Usage

List the columns in calculableColumns. Select a few rows and watch the footer narrow its scope from every visible row to just the selection.


1	Set up CI pipeline	High	12	$2,400.00
2	Design onboarding flow	Medium	8	$3,200.00
3	Migrate auth to OAuth2	Urgent	21	$5,600.00
4	Write API docs	Low	0	$900.00
5	Fix pagination bug	High	4	$600.00
6	Upgrade Next.js to 16	Medium	16	$1,800.00
			61	14,500

Examples

When pagination is server-driven, provide computeAggregate so scopes beyond the loaded rows come from your backend:

// With server-driven pagination, scopes that exceed the loaded rows
// ("all matching") are computed by your backend:
<DataTable
  data={loadedPage}
  columns={columns}
  manualPagination
  totalRowCount={8412}
  calculableColumns={[{ columnId: "amount", default: "sum" }]}
  computeAggregate={async ({ columnId, method, scope }) => {
    const res = await fetch(`/api/aggregate?col=${columnId}&fn=${method}&scope=${scope}`)
    return (await res.json()).value
  }}
/>

API Reference

Prop	Type	Default	Description
calculableColumns?	CalculableColumn[]	—	Which columns get a footer method picker. Scopes automatically to the current row selection when one exists, else every visible row.
CalculableColumn.methods?	AggregationMethod[]	all five	Methods offered in the picker: sum / avg / min / max / count.
CalculableColumn.default?	AggregationMethod \| null	null	Method active before the user picks one; null renders the picker unset.
computeAggregate?	(args) => Promise<number>	—	Server-side aggregate for scopes exceeding what's loaded (manualPagination) — e.g. "sum across all matching rows." Without it, such values render with a partial qualifier.

With Grouping

A related but different mechanism: per-column aggregationFn on the ColumnDef, computed per group rather than shown in a table-wide footer.

See Grouping & Hierarchy for group-level aggregation.