SharePoint JSON Formatting: Remove column name from group header

SharePoint’s JSON formatting capabilities empower users to customize the look and feel of SharePoint lists and libraries effortlessly. One common customization request is to remove the column name from the group header in a grouped SharePoint list view. In this blog post, we’ll explore why you might want to remove the column name and provide a step-by-step guide on achieving this using SharePoint JSON formatting.

Why Remove the Column Name?

When organizing data in SharePoint lists, you may find that the default group headers display the column names. While this is useful in many scenarios, there are times when you might prefer a cleaner, more streamlined view. Removing the column name from the grouped header can help reduce visual clutter and focus on the column value for each group.

How to Remove Column Name from Group Header?

Follow below steps to remove the column name from group header in SharePoint online or Microsoft Lists’ list view:

1. First, navigate to the SharePoint list for which you want to apply the JSON formatting. Click on the “Switch view options” drop down from top right corner of the list and select the view where you want to remove the column name from the group header.

2. Once in the desired list view, click on the “Switch view options” drop down again and select the “Format current view” option, which opens the list formatting pane.

3. Within the list formatting pane, locate the “Advanced mode” option and click on it to access the JSON formatting editor. Here you can modify the JSON to achieve the desired customization.

4. To remove the column name from the group header, copy below JSON and paste it in the JSON formatting editor:

{
	"$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 + ')'"
								}
							]
						}
					]
				}
			]
		}
	}
}

5. Click on the “Save” button within the JSON list formatting pane to apply the changes.

Once saved, the SharePoint list view will reflect the updated formatting, with the column name effectively removed from the group header.

Note

If you have applied the “Group by” on Person or Group (people field) OR Lookup column, [object object] will appear in the group header after applying above JSON. In that case, you will have to modify above JSON slightly as per the following table:

Type of grouped column	Part of the JSON to be changed	Change to
Person or Group	@group.fieldData.displayValue	@group.fieldData.title
Lookup	@group.fieldData.displayValue	@group.fieldData.lookupValue

Also, if you have grouped your SharePoint list view based on two columns (for example: person or group and single line of text column), you can change the text to show (txtContent) based on display name of column like:

"txtContent": "=if(@group.columnDisplayName == 'Assigned To', @group.fieldData.title, @group.fieldData.displayValue)"

By following these steps, you can harness the power of SharePoint’s JSON formatting capabilities to achieve a cleaner and more tailored presentation of your grouped list view data.

I hope this guide has been helpful in demonstrating how to remove the column name from the group header in a SharePoint list view using JSON formatting.

Above JSON is also available on GitHub in PnP List Formatting Repository at: Remove column name from group header

Learn more

• SharePoint JSON formatting: Check if date & time column is blank/empty
• SharePoint Online: Display Country Flags using JSON Formatting – multiple selections
• SharePoint Online: Why External Image URLs not working in JSON Formatting?
• SharePoint Online: Apply JSON View formatting using PnP PowerShell
• SharePoint: Highlight selected list item rows using JSON formatting

• JSON Formatting
• Microsoft 365
• Microsoft Lists
• SharePoint
• SharePoint Online