Data Organization

Summary & Aggregates

Automatic aggregate calculations with group summaries and grand totals.

NuGrid provides built-in summary calculations for grouped data, with support for grand totals and per-group summaries displayed in collapsed group headers.

Interactive Demo

Enabling Summaries

Configure summaries at the grid level with the summaries prop:

<template>
  <NuGrid
    v-model:grouping="grouping"
    :data="data"
    :columns="columns"
    :layout="{ mode: 'splitgroup' }"
    :summaries="{
      grandTotals: { label: 'Grand Total' },
      groupSummaries: true,
    }"
  />
</template>

Column Summary Configuration

Define aggregates at the column level:

const columns: NuGridColumn<SalesData>[] = [
  { accessorKey: 'product', header: 'Product' },
  { accessorKey: 'category', header: 'Category' },
  {
    accessorKey: 'quantity',
    header: 'Qty',
    summary: {
      aggregate: 'sum',
      format: (v) => v.toLocaleString(),
    },
  },
  {
    accessorKey: 'unitPrice',
    header: 'Unit Price',
    summary: {
      aggregate: 'avg',
      format: (v) => `$${v.toFixed(2)}`,
    },
  },
  {
    accessorKey: 'revenue',
    header: 'Revenue',
    summary: {
      aggregate: 'sum',
      format: (v) => `$${v.toLocaleString()}`,
    },
  },
  {
    accessorKey: 'rating',
    header: 'Rating',
    summary: {
      aggregate: 'avg',
      format: (v) => `${v.toFixed(2)} ★`,
    },
  },
]

Built-in Aggregates

Aggregate	Description
`sum`	Sum of all values
`avg`	Average of all values
`count`	Count of rows
`min`	Minimum value
`max`	Maximum value

Custom Aggregate Function

For complex calculations, provide a custom function:

{
  accessorKey: 'status',
  header: 'Status',
  summary: {
    aggregate: (rows) => {
      const active = rows.filter(r => r.status === 'active').length
      return `${active}/${rows.length} active`
    },
  },
}

Summaries Prop Options

Option	Type	Default	Description
`grandTotals`	`boolean \| object`	`false`	Show grand totals footer row
`grandTotals.label`	`string`	`'Total'`	Label for grand totals row
`grandTotals.position`	`'top' \| 'bottom'`	`'bottom'`	Position of grand totals row
`groupSummaries`	`boolean`	`true`	Show summaries in collapsed groups

Split Group Mode Behavior

In splitgroup layout mode:

Collapsed groups display summary values in a compact row below the group header
When groupSummaries is disabled, column headers are hidden for collapsed groups
Grand totals appear at the bottom of the entire grid

Key Features

Grand Totals: Footer row with aggregates across all data
Group Summaries: Per-group calculations shown when collapsed
Custom Formatting: Format function for display customization
Multiple Aggregates: Different columns can use different aggregates
Custom Functions: Provide your own aggregate calculation logic

Group Paging

Pagination combined with grouped data.

Add Row

Add new rows with inline editing and validation.