How to Add Groupings to a Grid

In this article, we will show you how to use groupings in Knack's grid views to organize records based on a shared value in selected grid columns.

Use Case

Grids are an excellent way to display information in your Knack apps. Especially, since they offer many features to further organize your data for easy understanding.

For instance, consider creating a grid to easily identify the top donors based on their donation amounts. Begin by setting up a grid displaying all donations:

While the initial setup is a good foundation, it may not immediately highlight your top donors. This is where utilizing a feature like grouping can significantly enhance the visibility of key donors.

Grouping enables you to organize records based on a shared value in chosen grid columns. Here's a glimpse of how your grid will appear when donations are grouped by donor:

With a header row for each donor and their donations listed below them, you can see who’s in the giving spirit at a glance. Plus, since the "Amount" column was already totaled using a row summary, the grouping now shows the total per donor.

Though, there’s still a complete total for all donors at the bottom of the grid:

Requirements

If this is your first time creating an app, you'll need to know some basics about adding tables, fields, pages, and views. You can start by watching our "Introducing Knack" video tour and then working through the articles in our Builder Basics section. Other good resources can be found in our About Your Database and Working With Pages sections of the knowledge base.

Steps

Here's a quick video walkthrough of the steps below using the Donations Manager sample app:

• Select the Page with the Grid:

  • In the Pages section of the Builder, select the page that holds the grid you want to add grouping to.

• Open the Grid Editor:

  • Click on the grid in the Builder page preview, or you can also click on the pen icon for the grid on that page to open the editor:

• Edit the Field/Column within the Grid View:

  • Hover over the column you want to add grouping to and click the pen icon to access the column properties.

• Enable Grouping:

  • Enable the grouping option by checking the “Grouping” checkbox: 

Once grouping is enabled, the field will form a column across the grid: