Group Header with Count

The Group Header with Count shows the number of items in each group right in the group header of a grouped SharePoint view, so you can see how many items sit under each section at a glance. It is built with a standard Microsoft List and a small piece of view formatting JSON that styles the group header. Each header shows the column name and value with a tidy count pill, and it leaves the rows themselves unchanged.

Author

SharePoint Maven

Built with

• Lists

Features

Choice Column, JSON, Person or Group Column, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Shows the item count for each group inside its header as a clean pill
• The header names the grouped column and its value for clear context
• The count comes straight from SharePoint, so it is always accurate
• The collapse and expand behavior stays native to SharePoint grouping
• Applied as view formatting JSON on the group header, so it changes nothing about the rows or the data
• Works on any grouped column without editing

Common Use Cases

• Tickets grouped by status with counts
• Tasks grouped by stage
• Items grouped by category
• Requests grouped by priority
• Records grouped by owner
• Any grouped list where counts matter

Details

• Design Pattern: Grouped Views
• Format Scope: View

Required Columns

Prerequisites

1. Build a list with these columns before you paste the JSON.
2. Populate the list with data.
3. Group the view first – the JSON does not create the groups by itself. Set the view’s Group by to the grouping column and save before formatting.
4. No separate Count column is required; SharePoint supplies the live count. Apply the JSON under Format current view, not Format this column.

How to Apply JSON code

1. Group the view by Status (open the Status column header menu and choose Group by Status, or set it under view settings).
2. Open the view dropdown at the top right and choose Format current view.
3. Switch to Advanced mode, paste the JSON below, and click Save.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "style": {
        "display": "flex",
        "align-items": "center",
        "padding": "6px 4px"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "width": "180px",
            "min-width": "180px",
            "max-width": "180px",
            "font-size": "17px",
            "font-weight": "600",
            "color": "#201f1e",
            "white-space": "nowrap",
            "overflow": "hidden",
            "text-overflow": "ellipsis"
          },
          "txtContent": "=@group.columnDisplayName + ': ' + @group.fieldData"
        },
        {
          "elmType": "div",
          "style": {
            "margin-left": "10px",
            "padding": "4px 14px",
            "min-width": "60px",
            "text-align": "center",
            "border-radius": "13px",
            "background-color": "#e3e6ea",
            "color": "#323130",
            "font-size": "14px",
            "font-weight": "600",
            "white-space": "nowrap"
          },
          "txtContent": "=@group.count + if(@group.count == 1, ' item', ' items')"
        }
      ]
    }
  }
}

Common Questions About the Group Header with Count