SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Staff Rota Shifts with CSS Table

This sample demonstrates creating a Rota Shifts table using CSS Table layout by using rowFormatter to customise the entire display of a row.

Get this format View on GitHub

Shared by Ariel Kropp
Updated Mar 7, 2019

Staff Rota Shifts with CSS Table formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

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",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card ms-font-m"
    },
    "style": {
      "box-sizing": "border-box",
      "border-width": "0.5px",
      "border-radius": "10px",
      "border-style": "solid",
      "padding": "0px",
      "margin": "3px 0px 3px 0px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "table"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "table-row"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-white ms-bgColor-themePrimary"
                },
                "style": {
                  "display": "table-cell",
                  "padding": "10px",
                  "text-align": "right"
                },
                "txtContent": "Duty Manager"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-white ms-bgColor-themePrimary"
                },
                "style": {
                  "display": "table-cell",
                  "padding": "10px",
                  "text-align": "right"
                },
                "txtContent": "8.00 - 4.30"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "table-cell",
                  "padding": "10px"
                },
                "txtContent": "=join([$Shift1], '\n')"
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "table-row"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-white ms-bgColor-themePrimary"
                },
                "style": {
                  "display": "table-cell",
                  "padding": "10px",
                  "text-align": "right"
                }
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-white ms-bgColor-themePrimary"
                },
                "style": {
                  "display": "table-cell",
                  "padding": "10px",
                  "text-align": "right"
                },
                "txtContent": "9.30 - 6.00"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "table-cell",
                  "padding": "10px"
                },
                "txtContent": "=join([$Shift2], '\n')"
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "table-row"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-white ms-bgColor-themePrimary"
                },
                "style": {
                  "display": "table-cell",
                  "padding": "10px",
                  "text-align": "right"
                },
                "txtContent": "Duty Manager"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontColor-white ms-bgColor-themePrimary"
                },
                "style": {
                  "display": "table-cell",
                  "padding": "10px",
                  "text-align": "right"
                },
                "txtContent": "11.30 - 8.00"
              },
              {
                "elmType": "div",
                "style": {
                  "display": "table-cell",
                  "padding": "10px"
                },
                "txtContent": "=join([$Shift3], '\n')"
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionrota-css-table.json

From the contributor

How to use this sample

Summary

This sample demonstrates creating a Rota Shifts table using CSS Table layout by using rowFormatter to customise the entire display of a row. The aim is to demonstrate the following concepts:

  • using a CSS table layout ("display": "table", "display": "table-row", "display": "table-cell")
  • using Fluent UI classes for font sizing, font color and background color
    • specifically the theme color class to ensure display matches the theme of the site (ms-bgColor-themePrimary)
  • disabling selection (hideSelection)
  • hiding column headers (hideColumnHeader)
  • using join and \n to join choice column values on separate lines

screenshot of the sample

View Requirements

Included in the sample is a site script that will create the list as needed. However if you prefer to create the list yourself here are the fields needed:

Type Internal Name Required
Single line of text Title No
Multi-Choice Shift1 No
Multi-Choice Shift2 No
Multi-Choice Shift3 No
Single line of text Date No

Sample

Solution Author(s)
rota-css-table.json Ariel Kropp

Version history

Version Date Comments
1.0 March 07, 2019 Initial release

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.