AdaptTable for Mantine

Aggregation in Mantine

A summary row is not a pinned data row and not a group footer. summaryRow writes a grand total in the table footer. pinnedSummaryRows sticks host-owned totals above or below the scroll box. groupAggregates plus groupFooters close each group.

Filter the table and every total recomputes from the rows that remain — client aggregate() and a source that already computed the same numbers share one mapper shape. Extra full-width rows stay attached to a person, not to a total.

The footer, the pinned summaries and the group totals render through Mantine's own table rows. Building and reordering group levels stays on the grouping page.

The footer is a Mantine Table.Tfoot, group totals close a Mantine table row, and pinned summaries are extra rows the same Table already knows how to stick.

The code

import { aggregate } from "@adapttable/core";
import { DataTable } from "@adapttable/mantine";
import { groupingPanel } from "@adapttable/mantine/grouping-panel";
import { pinnedSummaryRows } from "@adapttable/mantine/pinned-summary-rows";

export function Sales({ rows, columns }) {
  const budgetSum = aggregate({ budget: "sum" }, { columns });
  return (
    <DataTable
      data={rows}
      columns={columns}
      rowKey={(row) => row.id}
      summaryRow={budgetSum}
      features={[
        groupingPanel(["team"], {
          groupAggregates: budgetSum,
          groupFooters: true,
        }),
        pinnedSummaryRows({
          top: [{ id: "team-total", name: "Team total" }],
          bottom: [{ id: "grand-total", name: "Grand total" }],
        }),
      ]}
    />
  );
}

Install

pnpm add @adapttable/mantine @adapttable/core @mantine/core @mantine/hooks

The same feature in the other kits

More Mantine features

Reference: row-grouping, pinned-summary-rows, full-width-rows. More of this kit: AdaptTable for Mantine, or the live demo.