Back to view formats
View formattingSharePoint Online

Remove Column Name from Group Header

This view formatting sample can be used to customize the group header to remove column name from group header.

Remove Column Name from Group Header formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 definitions

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "style": {
        "padding-left": "12px",
        "font-size": "16px",
        "font-weight": "400",
        "cursor": "pointer",
        "outline": "0px",
        "white-space": "nowrap",
        "text-overflow": "ellipsis"
      },
      "customRowAction": {
        "action": "defaultClick"
      },
      "children": [
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "span",
              "style": {
                "padding": "5px 5px 5px 5px"
              },
              "txtContent": "@group.fieldData.displayValue"
            }
          ]
        },
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-direction": "row",
                "justify-content": "center"
              },
              "children": [
                {
                  "elmType": "div",
                  "txtContent": "=' (' + @group.count + ')'"
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

From the contributor

How to use this sample

Summary

This view formatting sample can be used to customize the group header to remove column name from group header.

screenshot of the sample

This sample contains two JSON files, one in which the group header is clickable (group-header-remove-column-name-clickable.json) and one in which it is not (group-header-remove-column-name.json). If you apply group-header-remove-column-name-clickable.json and click on a group header, you will see the view filtered by the value of the group header you clicked on.

View requirements

List view with Group by applied on any column in the view.

[!NOTE] If grouping by Person or Lookup column and applying this sample JSON, [object Object] will appear in the group header. If you group by Person or Lookup columns, please refer to the following table to make the necessary changes in the JSON.

Type of column to group Part of the JSON to be changed After the change
Person @group.fieldData.displayValue @group.fieldData.title
Lookup @group.fieldData.displayValue @group.fieldData.lookupValue

Sample

Solution Author(s)
group-header-remove-column-name.json Ganesh Sanap
group-header-remove-column-name-clickable.json Ganesh Sanap & Tetsuya Kawahara

Version history

Version Date Comments
1.0 November 10, 2021 Initial release
1.1 October 17, 2023 Added group-header-remove-column-name-clickable.json
1.2 November 10, 2023 Added note for grouping by Person and Lookup columns

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.


Additional notes