I’m having an couple of issues with formatting the grouped headers of a sharepoint list where the JSON formatting seems to be having an odd effect. The first thing, is when I apply any JSON formatting at all, I lose the ability to click on the headers to filter by that group. This is despite having the default click custom row action included. The second issue is when I change the “hideSelection” field to true, the group heading jumps from it’s normal position to half way down the width of the list. If tried setting different padding and position fields, but it always applies from this new position in the middle of the screen. Any advise would be appreciated!

{
“$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json”,
“hideSelection”: true,
“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 + ‘)'”
}
]
}
]
}
]
}
}
}

​I’m having an couple of issues with formatting the grouped headers of a sharepoint list where the JSON formatting seems to be having an odd effect. The first thing, is when I apply any JSON formatting at all, I lose the ability to click on the headers to filter by that group. This is despite having the default click custom row action included. The second issue is when I change the “hideSelection” field to true, the group heading jumps from it’s normal position to half way down the width of the list. If tried setting different padding and position fields, but it always applies from this new position in the middle of the screen. Any advise would be appreciated! {
“$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json”,
“hideSelection”: true,
“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 + ‘)'”
}
]
}
]
}
]
}
}
}    Read More

​