MRT logoMaterial React Table

On This Page

    Aggregation Feature Guide

    Material React Table has built-in aggregation features. There are options for both automatic client-side grouping and aggregation, as well as manual server-side grouping and aggregation. This guide will walk you through the different options and how to use and customize them.

    See the Column Grouping Guide as a prerequisite to this guide. The Aggregation and Grouping Guide was recently split into two separate guides.

    Relevant Table Options

    #
    Prop Name
    Type
    Default Value
    More Info Links
    1
    Record<string, AggregationFn>
    		TanStack Table Grouping Docs
    2
    boolean
    true
    		MRT Expanding Sub Rows Docs
    3
    boolean
    		MRT Aggregation and Grouping Docs
    4
    boolean
    5
    (table: Table<TData>) => () => RowModel<TData>
    		TanStack Table Grouping Docs
    6
    false | 'reorder' | 'remove'
    reorder
    		TanStack Table Grouping Docs
    7
    boolean
    		TanStack Table Grouping Docs
    8
    ChipProps| ({ table }} => ChipProps
    		Material UI Chip Props
    9
    OnChangeFn<GroupingState>
    		TanStack Table Grouping Docs
    10
    'bottom' | 'top' | 'none'
    'top'

    Relevant Column Options

    #
    Column Option
    Type
    Default Value
    More Info Links
    1
    ({ cell, column, row, table }) => ReactNode
    2
    ReactNode | ({ column, footer, table }) => ReactNode
    		MRT Data Columns Docs
    3
    ({ cell, column, row, table }) => ReactNode
    4
    ({ cell, column, row, table }) => ReactNode
    5
    boolean

    Relevant State

    #
    State Option
    Type
    Default Value
    More Info Links
    1
    Record<string, boolean> | boolean
    {}
    		TanStack Table Expanding Docs
    2
    Array<string>
    []
    		TanStack Table Grouping Docs

    Aggregation on Grouped Rows

    One of the cool features of Material React Table is that it can automatically aggregate the data in grouped rows. To enable this, you must specify both an aggregationFn and an AggregatedCell render option on a column definition.

    Built-in Aggregation Functions

    There are several built-in aggregation functions available that you can use. They are:

    • count - Finds the number of rows in a group

    • extent - Finds the minimum and maximum values of a group of rows

    • max - Finds the maximum value of a group of rows

    • mean - Finds the average value of a group of rows

    • median - Finds the median value of a group of rows

    • min - Finds the minimum value of a group of rows

    • sum - sums the values of a group of rows

    • uniqueCount - Finds the number of unique values of a group of rows

    • unique - Finds the unique values of a group of rows

    All of these built-in aggregation functions are from TanStack Table

    const columns = [
      {
        accessorKey: 'team', //grouped by team in initial state below
        header: 'Team',
      },
      {
        accessorKey: 'player',
        header: 'Player',
      },
      {
        accessorKey: 'points',
        header: 'Points',
        aggregationFn: 'sum', //calc total points for each team by adding up all the points for each player on the team
        AggregatedCell: ({ cell }) => <div>Team Score: {cell.getValue()}</div>,
      },
    ];
    

    const table = useMaterialReactTable({
      columns,
      data,
      enableGrouping: true,
      initialState: { grouping: ['team'], expanded: true },
    });
    

    return <MaterialReactTable table={table} />;

    Custom Aggregation Functions

    If none of these pre-built aggregation functions work for you, you can also pass in a custom aggregation function. The aggregation function will be passed in an array of values from the column that you are aggregating. It should return a single value that will be displayed in the aggregated cell.

    If you are specifying a custom aggregation function, it must implement the following type:

    export type AggregationFn<TData extends AnyData> = (
      getLeafRows: () => Row<TData>[],
      getChildRows: () => Row<TData>[]
    ) => any

    Material React Table does not automatically aggregate all rows for you to calculate totals for the entire table. However, it is still easy enough to do this manually and add in your custom calculations into the footer or Footer of a column definition. It is recommended that you do any necessary aggregation calculations on your data in a useMemo hook before passing it to the columns footer in your columns definition.

    //calculate the total points for all players in the table in a useMemo hook
    const averageScore = useMemo(() => {
      const totalPoints = data.reduce((acc, row) => acc + row.points, 0);
      const totalPlayers = data.length;
      return totalPoints / totalPlayers;
    }, [data]);
    

    const columns = useMemo(
      () => [
        {
          accessorKey: 'name',
          header: 'Name',
        },
        {
          accessorKey: 'score',
          header: 'Score',
          Footer: () => <div>Average Score: {averageScore}</div>, //do not do calculations in render, do them in useMemo hook and pass them in here
        },
      ],
      [averageScore],
    );

    Please remember to perform heavy aggregation calculations in a useMemo hook to avoid unnecessary re-renders!

    Custom Cell Renders for Aggregation and Grouping

    There are a few custom cell render overrides that you should be aware of when using grouping and aggregation features.

    AggregatedCell Column Option

    "Aggregation Cells" are cells in an aggregated row (not a normal data row) that can display aggregates (avg, sum, etc.) of the data in a group. The cell that the table is grouped on, however, is not an Aggregate Cell, but rather a GroupedCell.

    You can specify the custom render for these cells with the AggregatedCell render option on a column definition.

    const columns = [
      {
        accessorKey: 'points',
        header: 'Points',
        aggregationFn: 'sum',
        AggregatedCell: ({ cell }) => <div>Total Score: {cell.getValue()}</div>,
      },
    ];

    GroupedCell Column Option

    "Grouped Cells" are cells in a grouped row (not a normal data row) that by default display the value that the rows are grouped on and the number of rows in the group. You can override the default render for these cells with the GroupedCell render option on a column definition.

    const columns = [
      {
        accessorKey: 'team',
        header: 'Team',
        GroupedCell: ({ cell }) => <div>Team: {cell.getValue()}</div>,
      },
    ];

    PlaceholderCell Column Option

    "Placeholder Cells" are cells that are usually meant to be empty in grouped rows and columns. They are simply rendered with a value of null by default, but you can override the default render for these cells with the PlaceholderCell render option on a column definition.

    const columns = [
      {
        accessorKey: 'team',
        header: 'Team',
        PlaceholderCell: ({ cell, row }) => (
          <div>{row.original.someOtherRowValue}</div>
        ),
      },
    ];

    Aggregation/Grouping Example

    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub
    State
    First Name
    Last Name
    Age
    Gender
    Salary
    Alabama (7)Oldest by State:
    64
    		Average by State:
    $43,375
    ThadWiegand64Female$56,146
    AliviaLedner56Male$12,591
    DanykaGleason36Male$71,238
    LionelHartmann30Nonbinary$58,743
    ReinholdReichel30Female$30,531
    LurlineKoepp59Female$10,645
    KodyBraun38Female$63,733
    Alaska (8)Oldest by State:
    59
    		Average by State:
    $68,901
    EloisaKohler31Male$45,801
    KianHand56Male$81,062
    LoyceSchmidt29Female$76,295
    MichaleCollier59Male$75,197
    EldridgeStroman42Male$59,594
    AlveraBalistreri25Female$79,844
    KaydenEmard35Female$98,252
    DomingoBauch36Female$35,159
    Arizona (1)Oldest by State:
    22
    		Average by State:
    $54,027
    GunnerRolfson22Male$54,027
    Arkansas (4)Oldest by State:
    52
    		Average by State:
    $58,194
    Max Age:
    65
    Average Salary:
    $56,319
    1-20 of 249

    Source Code 

    1import { useMemo } from 'react';
    2import { Box, Stack } from '@mui/material';
    3import {
    4  MaterialReactTable,
    5  useMaterialReactTable,
    6  type MRT_ColumnDef,
    7} from 'material-react-table';
    8import { data, type Person } from './makeData';
    9

    10const Example = () => {
    11  const averageSalary = useMemo(
    12    () => data.reduce((acc, curr) => acc + curr.salary, 0) / data.length,
    13    [],
    14  );
    15

    16  const maxAge = useMemo(
    17    () => data.reduce((acc, curr) => Math.max(acc, curr.age), 0),
    18    [],
    19  );
    20

    21  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    22    () => [
    23      {
    24        header: 'First Name',
    25        accessorKey: 'firstName',
    26        enableGrouping: false, //do not let this column be grouped
    27      },
    28      {
    29        header: 'Last Name',
    30        accessorKey: 'lastName',
    31      },
    32      {
    33        header: 'Age',
    34        accessorKey: 'age',
    35        aggregationFn: 'max', //show the max age in the group (lots of pre-built aggregationFns to choose from)
    36        //required to render an aggregated cell
    37        AggregatedCell: ({ cell, table }) => (
    38          <>
    39            Oldest by{' '}
    40            {table.getColumn(cell.row.groupingColumnId ?? '').columnDef.header}:{' '}
    41            <Box
    42              sx={{ color: 'info.main', display: 'inline', fontWeight: 'bold' }}
    43            >
    44              {cell.getValue<number>()}
    45            </Box>
    46          </>
    47        ),
    48        Footer: () => (
    49          <Stack>
    50            Max Age:
    51            <Box color="warning.main">{Math.round(maxAge)}</Box>
    52          </Stack>
    53        ),
    54      },
    55      {
    56        header: 'Gender',
    57        accessorKey: 'gender',
    58        //optionally, customize the cell render when this column is grouped. Make the text blue and pluralize the word
    59        GroupedCell: ({ cell, row }) => (
    60          <Box sx={{ color: 'primary.main' }}>
    61            <strong>{cell.getValue<string>()}s </strong> ({row.subRows?.length})
    62          </Box>
    63        ),
    64      },
    65      {
    66        header: 'State',
    67        accessorKey: 'state',
    68      },
    69      {
    70        header: 'Salary',
    71        accessorKey: 'salary',
    72        aggregationFn: 'mean',
    73        //required to render an aggregated cell, show the average salary in the group
    74        AggregatedCell: ({ cell, table }) => (
    75          <>
    76            Average by{' '}
    77            {table.getColumn(cell.row.groupingColumnId ?? '').columnDef.header}:{' '}
    78            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
    79              {cell.getValue<number>()?.toLocaleString?.('en-US', {
    80                style: 'currency',
    81                currency: 'USD',
    82                minimumFractionDigits: 0,
    83                maximumFractionDigits: 0,
    84              })}
    85            </Box>
    86          </>
    87        ),
    88        //customize normal cell render on normal non-aggregated rows
    89        Cell: ({ cell }) => (
    90          <>
    91            {cell.getValue<number>()?.toLocaleString?.('en-US', {
    92              style: 'currency',
    93              currency: 'USD',
    94              minimumFractionDigits: 0,
    95              maximumFractionDigits: 0,
    96            })}
    97          </>
    98        ),
    99        Footer: () => (
    100          <Stack>
    101            Average Salary:
    102            <Box color="warning.main">
    103              {averageSalary?.toLocaleString?.('en-US', {
    104                style: 'currency',
    105                currency: 'USD',
    106                minimumFractionDigits: 0,
    107                maximumFractionDigits: 0,
    108              })}
    109            </Box>
    110          </Stack>
    111        ),
    112      },
    113    ],
    114    [averageSalary, maxAge],
    115  );
    116

    117  const table = useMaterialReactTable({
    118    columns,
    119    data,
    120    displayColumnDefOptions: {
    121      'mrt-row-expand': {
    122        enableResizing: true,
    123      },
    124    },
    125    enableColumnResizing: true,
    126    enableGrouping: true,
    127    enableStickyHeader: true,
    128    enableStickyFooter: true,
    129    initialState: {
    130      density: 'compact',
    131      expanded: true, //expand all groups by default
    132      grouping: ['state'], //an array of columns to group by by default (can be multiple)
    133      pagination: { pageIndex: 0, pageSize: 20 },
    134      sorting: [{ id: 'state', desc: false }], //sort by state by default
    135    },
    136    muiToolbarAlertBannerChipProps: { color: 'primary' },
    137    muiTableContainerProps: { sx: { maxHeight: 700 } },
    138  });
    139

    140  return <MaterialReactTable table={table} />;
    141};
    142

    143export default Example;
    144

    Multiple Aggregations Per column

    You may want to calculate more than one aggregation per column. This is now easier if you are upgraded to at least v1.3.0. You can now specify an array of aggregationFns, and then reference the aggregation results from an array in the AggregatedCell render option.

    const columns = [
      {
        header: 'Salary',
        accessorKey: 'salary',
        aggregationFn: ['count', 'mean'], //multiple aggregation functions
        AggregatedCell: ({ cell, table }) => (
          <div>
            {/*get the count from the first aggregation*/}
            <div>Count: {cell.getValue()[0]}</div>
            {/*get the average from the second aggregation*/}
            <div>Average Salary: {cell.getValue()[1]}</div>
          </div>
        ),
      },
    ];

    Demo

    Open StackblitzOpen Code SandboxOpen on GitHub
    State
    First Name
    Last Name
    Gender
    Salary
    Alabama (7)Count:
    7
    Average:
    $43,375
    Median:
    $56,146
    Min:
    $10,645
    Max:
    $71,238
    ThadWiegandFemale$56,146
    AliviaLednerMale$12,591
    DanykaGleasonMale$71,238
    LionelHartmannNonbinary$58,743
    ReinholdReichelFemale$30,531
    LurlineKoeppFemale$10,645
    KodyBraunFemale$63,733
    Alaska (8)Count:
    8
    Average:
    $68,901
    Median:
    $75,746
    Min:
    $35,159
    Max:
    $98,252
    EloisaKohlerMale$45,801
    KianHandMale$81,062
    LoyceSchmidtFemale$76,295
    MichaleCollierMale$75,197
    EldridgeStromanMale$59,594
    AlveraBalistreriFemale$79,844
    KaydenEmardFemale$98,252
    DomingoBauchFemale$35,159
    Arizona (1)Count:
    1
    Average:
    $54,027
    Median:
    $54,027
    Min:
    $54,027
    Max:
    $54,027
    GunnerRolfsonMale$54,027
    Arkansas (4)Count:
    4
    Average:
    $58,194
    Median:
    $51,948
    Min:
    $42,997
    Max:
    $85,883
    1-20 of 249

    Source Code 

    1import { useMemo } from 'react';
    2import { Box } from '@mui/material';
    3import {
    4  MaterialReactTable,
    5  useMaterialReactTable,
    6  type MRT_ColumnDef,
    7} from 'material-react-table';
    8import { data, type Person } from './makeData';
    9

    10const localeStringOptions = {
    11  style: 'currency',
    12  currency: 'USD',
    13  minimumFractionDigits: 0,
    14  maximumFractionDigits: 0,
    15};
    16

    17const Example = () => {
    18  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    19    () => [
    20      {
    21        header: 'First Name',
    22        accessorKey: 'firstName',
    23      },
    24      {
    25        header: 'Last Name',
    26        accessorKey: 'lastName',
    27      },
    28      {
    29        header: 'Gender',
    30        accessorKey: 'gender',
    31      },
    32      {
    33        header: 'State',
    34        accessorKey: 'state',
    35      },
    36      {
    37        header: 'Salary',
    38        accessorKey: 'salary',
    39        aggregationFn: ['count', 'mean', 'median', 'min', 'max'],
    40        //required to render an aggregated cell, show the average salary in the group
    41        AggregatedCell: ({ cell }) => (
    42          <>
    43            Count:{' '}
    44            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
    45              {cell.getValue<Array<number>>()?.[0]}
    46            </Box>
    47            Average:{' '}
    48            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
    49              {cell
    50                .getValue<Array<number>>()?.[1]
    51                ?.toLocaleString?.('en-US', localeStringOptions)}
    52            </Box>
    53            Median:{' '}
    54            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
    55              {cell
    56                .getValue<Array<number>>()?.[2]
    57                ?.toLocaleString?.('en-US', localeStringOptions)}
    58            </Box>
    59            Min:{' '}
    60            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
    61              {cell
    62                .getValue<Array<number>>()?.[3]
    63                ?.toLocaleString?.('en-US', localeStringOptions)}
    64            </Box>
    65            Max:{' '}
    66            <Box sx={{ color: 'success.main', fontWeight: 'bold' }}>
    67              {cell
    68                .getValue<Array<number>>()?.[4]
    69                ?.toLocaleString?.('en-US', localeStringOptions)}
    70            </Box>
    71          </>
    72        ),
    73        //customize normal cell render on normal non-aggregated rows
    74        Cell: ({ cell }) => (
    75          <>
    76            {cell
    77              .getValue<number>()
    78              ?.toLocaleString?.('en-US', localeStringOptions)}
    79          </>
    80        ),
    81      },
    82    ],
    83    [],
    84  );
    85

    86  const table = useMaterialReactTable({
    87    columns,
    88    data,
    89    enableGrouping: true,
    90    enableStickyHeader: true,
    91    initialState: {
    92      density: 'compact',
    93      expanded: true, //expand all groups by default
    94      grouping: ['state'], //an array of columns to group by by default (can be multiple)
    95      pagination: { pageIndex: 0, pageSize: 20 },
    96      sorting: [{ id: 'state', desc: false }], //sort by state by default
    97    },
    98    muiToolbarAlertBannerChipProps: { color: 'primary' },
    99    muiTableContainerProps: { sx: { maxHeight: 700 } },
    100  });
    101

    102  return <MaterialReactTable table={table} />;
    103};
    104

    105export default Example;
    106

    Manual Grouping

    Manual Grouping means that the data that you pass to the table is already grouped and aggregated, and you do not want Material React Table to do any of the grouping or aggregation for you. This is useful if you are using a backend API to do the grouping and aggregation for you, and you just want to display the results. However, you will need to put your data in the specific format that the expanding features understand.