Grouping Data

Rowstack allows you to organize your data hierarchically by grouping records based on any column. This is a powerful way to visualize relationships and summarize information.

#How Grouping Works

When you group by a column, Rowstack collapses rows with identical values in that column into a single expandable group header.

#Enabling Grouping

Grouping is enabled by default in Rowstack. Users can interactively group data using the Group button in the toolbar.

To configure grouping via the config prop:

const config = {
  grouping: {
    enabled: true
  }
};

<Table data={data} columns={columns} config={config} />

#Interactive Grouping

Users can:

  1. Click the Group button in the toolbar.
  2. Select a field to group by.
  3. Add multiple groups to create multi-level hierarchies.
  4. Expand or collapse groups using the arrow icons.

#Benefits of Grouping

  • Reduced Clutter: Hide detail rows and focus on high-level categories.
  • Improved Scannability: Quickly find patterns in your data.
  • Contextual Aggregations: Grouping works perfectly with Summaries & Aggregations to show totals for each group.