json view formatting, wrap all items

Question

I want to basically wrap all my items in one div for a view. So the json I am using:

"rowFormatter": {
"elmType": "div",
"style": {
  "display": "flex",
  "flex-direction": "column",
  "align-items": "flex-start"
}

But I want to wrap all my items in 1 top level div. If I change rowFormatter, to colFormatter it blows it away.

Perhaps I need to edit as a column level and add all the items do that one div? Any suggestions?

Answer 1

You could use the following JSON view formatting:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "align-items": "flex-start"
    },
    "attributes": {
      "class": "sp-row-card"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-title"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Status]"
          }
        ]
      }
    ]
  }
}

More information, please refer to Use view formatting to customize SharePoint