Grouping, filtering and aggregation in Tanstack table

Let's consider a sample dataset of products that we'll use throughout our examples:

const data = [
  { id: 1, name: 'Product A', category: 'Electronics', price: 99.99 },
  { id: 2, name: 'Product B', category: 'Clothing', price: 29.99 },
  { id: 3, name: 'Product C', category: '', price: 14.99 },
  { id: 4, name: 'Product D', category: 'Electronics', price: 49.99 },
  // ... more products
];

Filtering data is the process of selecting a subset of records from a larger dataset based on specific criteria or conditions. In the context of tables, filtering allows us to present a view that displays only the rows that match certain criteria, effectively hiding the rows that don't meet those criteria.

Tanstack Table provides a powerful filtering mechanism that can be applied at the column level. By defining a `filterFn` for a column, we can specify the logic for determining which rows should be included or excluded from the filtered view.

Adding filtering to tanstack table requires 3 things

• Defining filterFn that will be used to filter values from a column
• Importing getFilteredRowModel and initializing getFilteredRowModel while creating table instance
• Adding state to tanstack table that specifies which columns need to be filtered.

Here's an example of how we can define column filters using Tanstack Table:

const columns = [
  // Other column definitions...
  {
    id: 'category',
    accessorKey: 'category',
    header: 'Category',
    filterFn: (row, columnId, filterValue) => {
      // Filter out products with an empty category
      return row.getValue(columnId) !== '';
    }
  },
  // More column definitions...
];

Typically, the `filterValue` argument in the `filterFn` is provided by the user via a UI input. However, in our case, where we want to filter without user input, we can ignore this value and instead filter based on pre-existing criteria, such as filtering out products with an empty category.

State can be added as shown below

// Other table related code
const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  state: {
    columnFilters: [{id:'catgory', value: ''}],
  },
});
// Rendering table code

While defining filters individually for each column works, it's often more efficient and scalable to write a generic function that combines the `filterFn` definitions to add filters. This also keeps table UI component reusable as we don't have to specify columnid every time we want to add a filter to it.

const initialColumnFilters = React.useMemo(
  () =>
    columns.filter((column) => column.filterFn).map((column) => ({
      id: column.id,
      value: '',
    })),
  [columns]
);

In this code snippet, we use the `useMemo` hook to memoize the computation of `initialColumnFilters`. This ensures that the filters are only recalculated when the `columns` array changes, providing better performance and preventing unnecessary re-computations.

The `initialColumnFilters` array is created by iterating over the `columns` array and selecting only the columns that have a `filterFn` defined. For each column with a `filterFn`, it creates an object with the column ID and empty string as the `value`.

Here is an example showing how to use the state

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  state: {
    columnFilters: initialColumnFilters,
  },
});

With this approach, we can apply the pre-defined column filters by providing the `initialColumnFilters` array as part of the table state. By using this generic approach, we can filter the table data based on pre-defined criteria without requiring user input. The `getFilteredRowModel` function from Tanstack Table will then apply these filters to the table rows, presenting a filtered view of the data based on the specified criteria, without requiring user input.

Let's consider the same sample dataset of products that we used in the previous section:

const data = [
  { id: 1, name: 'Product A', category: 'Electronics', price: 99.99 },
  { id: 2, name: 'Product B', category: 'Clothing', price: 29.99 },
  { id: 3, name: 'Product C', category: '', price: 14.99 },
  { id: 4, name: 'Product D', category: 'Electronics', price: 49.99 },
  // ... more products
];

Grouping data is the process of organizing records into logical groups based on one or more criteria or columns.

Adding grouping to tanstack table requires 4 things

• Making `enableGrouping` to indicate the column is available for grouping.
• Defining accessorFn that will be used to group values from a column or accessorKey if column can be directly grouped without pre-processing. For e.g. if 'category' is accessorKey in data than multiple 'Electronics' values will be grouped together. If however you want 'Product A' and 'Product B' in one group than you will have to write a accessorFn that returns same value for 'Product A' and 'Product B'.
• Importing getGroupedRowModel and initializing getGroupedRowModel while creating table instance
• Adding state to tanstack table that specifies which columns need to be grouped.

Here is the example of grouping products based on their category.

const columns = [
  // Other column definitions...
  {
    id: 'category',
    accessorKey: 'category',
    header: 'Category',
    enableGrouping: true, // Enable grouping for this column
  },
  // More column definitions...
];

State can be added as shown below

// Other table related code
const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getGroupedRowModel: getGroupedRowModel(),
  state: {
    columnFilters: [{id:'category'}],
  },
});
// Rendering table code

Similar to specifying filter state we can take advantage of 'enableGrouping' property of column to infer that the column needs to be grouped and set the state for that column.

const initialGroupFilters = React.useMemo(
  () =>
    columns
      .filter((column) => column.enableGrouping)
      .map((column) => column.id),
  [columns]
);

This code snippet creates an array of initial group filters by iterating over the `columns` array and selecting only the columns that have `enableGrouping` set to `true`. For each column with `enableGrouping` enabled, it adds the column ID to the `initialGroupFilters` array.

The `initialGroupFilters` array needs to be specified in the table state when initializing the table:

const table = useReactTable({
  data,
  columns,
  enableGrouping: true,
  getGroupedRowModel: getGroupedRowModel(),
  // ... other model functions
  state: {
    grouping: initialGroupFilters,
    // ... other state properties
  },
});

When a column is grouped, Tanstack Table provides the `table.getGroupedRowModel().rows` array, which contains the entries after grouping. This array can be used to perform further operations or calculations on the grouped data. For example, if you want to find the percentage contribution of each grouped value, you can use `table.getGroupedRowModel().rows` to access the grouped data and perform the necessary calculations.

const columns = [
  // Other column definitions...
  {
    accessorKey: 'price',
    header: 'Price',
    aggregationFn: 'mean'
    aggregatedCell: (cell) => {return (<div>{cell.getValue()}</div>)}
  },
  // More column definitions...
];

{cell.getIsAggregated() ? (
	    flexRender(cell.column.columnDef.aggregatedCell, cell.getContext())
	  ) : (
	    flexRender(cell.column.columnDef.cell, cell.getContext())
)}

When working with large datasets, it is often necessary to split the data into multiple pages to improve performance and enhance the user experience. Pagination allows users to navigate through the data in a more organized and manageable way, reducing the amount of information displayed at once and making it easier to find specific records.

Tanstack Table provides built-in support for pagination, allowing you to easily implement this functionality in your tables. However, in our scenario, where we want to display multiple views of the same data without user input, we can leverage Tanstack Table's pagination capabilities to conditionally render the pagination component based on the number of pages available.

First, let's define the necessary column definitions for our sample data:

const columns = [
  // Column definitions...
];

Next, we need to initialize the table instance with the `getPaginationRowModel` function:

const table = useReactTable({
  data,
  columns,
  getPaginationRowModel: getPaginationRowModel(), // Enable pagination
  // Other model functions...
});

By including `getPaginationRowModel` in the table initialization, we enable pagination functionality for our table.

To conditionally render the pagination component, we can check the number of pages available using `table.getPageCount()`. If the number of pages is greater than 1, it means we have multiple pages, and we should display the pagination component:

{table.getPageCount() > 1 && (
  <div>
    <button onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
      Previous
    </button>
    <span>
      Page{' '}
      <strong>
        {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
      </strong>
    </span>
    <button onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
      Next
    </button>
  </div>
)}

In the code above, we first check if `table.getPageCount()` is greater than 1. If this condition is true, it means we have multiple pages, and we render the pagination component. The pagination component consists of a "Previous" button, a page indicator, and a "Next" button.

The "Previous" button is rendered with an `onClick` handler that calls `table.previousPage()`, which navigates to the previous page. We also use `table.getCanPreviousPage()` to disable the button if there is no previous page available.

The page indicator displays the current page index (`table.getState().pagination.pageIndex + 1`) and the total number of pages (`table.getPageCount()`).

Similarly, the "Next" button is rendered with an `onClick` handler that calls `table.nextPage()`, which navigates to the next page. We use `table.getCanNextPage()` to disable the button if there is no next page available.

By conditionally rendering the pagination component based on the number of pages, we can ensure that the pagination controls are only displayed when necessary, providing a clean and efficient user interface without requiring user input to initiate pagination.

By combining Tanstack Table's powerful features with generic approaches to define filters, grouping, and other operations, we can programmatically control and present multiple views of the same underlying data, tailored to our application's needs, without relying on user interactions. This flexibility can significantly enhance the user experience and provide valuable insights into the data.