JSON to format SharePoint List items under a Header

Question

I have formatted a list to look like the one below. I would like to wrap them in a DIV so i can have a header above them named "Useful Tools" or something. I can't seem to get a header above them.

I copied and pasted the JSON I am using below, too.

Any help is appreciated!

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "hideColumnHeader": "true",
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "a",
    "attributes": {
      "href": "[$_x0055_rl1]",
      "target": "=if([$NewTab] == true, '_blank', '')"
    },
    "style": {
      "width": "100%"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
        },
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "width": "100%",
          "min-height": "10px",
          "margin-right": "10px",
          "margin-top": "10px",
          "box-shadow": "2px 2px 4px darkgrey"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "center",
              "margin": "auto"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-row-title"
                },
                "txtContent": "[$Title]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "iconName": "[$Icon]",
                  "class": "ms-fontSize-su"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Answer 1

You can use @rowIndex == 0 condition to add header before only first item in list view.

Here's example of custom header generated using JSON view formatting:

Sample reference: Custom Header