Skip to main content

Components Scrollable pane

Open this example (Sortable table (example)) in a new window 
<div class="moj-scrollable-pane">
  <table class="govuk-table">

    <caption class="govuk-table__caption">Historic rainfall in June</caption>

    <thead class="govuk-table__head">
      <tr class="govuk-table__row">

        <th scope="col" class="govuk-table__header">Station</th>

        <th scope="col" class="govuk-table__header">2022</th>

        <th scope="col" class="govuk-table__header">2021</th>

        <th scope="col" class="govuk-table__header">2020</th>

        <th scope="col" class="govuk-table__header">2019</th>

        <th scope="col" class="govuk-table__header">2018</th>

        <th scope="col" class="govuk-table__header">2017</th>

        <th scope="col" class="govuk-table__header">2016</th>

        <th scope="col" class="govuk-table__header">2015</th>

        <th scope="col" class="govuk-table__header">2014</th>

        <th scope="col" class="govuk-table__header">2013</th>

      </tr>
    </thead>

    <tbody class="govuk-table__body">

      <tr class="govuk-table__row">

        <td class="govuk-table__cell">Lerwick</td>

        <td class="govuk-table__cell">13.7mm</td>

        <td class="govuk-table__cell">13.8mm</td>

        <td class="govuk-table__cell">13.9mm</td>

        <td class="govuk-table__cell">12.7mm</td>

        <td class="govuk-table__cell">13.3mm</td>

        <td class="govuk-table__cell">13.3mm</td>

        <td class="govuk-table__cell">12.9mm</td>

        <td class="govuk-table__cell">11.2mm</td>

        <td class="govuk-table__cell">13.3mm</td>

        <td class="govuk-table__cell">12.7mm</td>

      </tr>

      <tr class="govuk-table__row">

        <td class="govuk-table__cell">Eskdalemuir</td>

        <td class="govuk-table__cell">17.0mm</td>

        <td class="govuk-table__cell">17.9mm</td>

        <td class="govuk-table__cell">17.2mm</td>

        <td class="govuk-table__cell">16.2mm</td>

        <td class="govuk-table__cell">19.7mm</td>

        <td class="govuk-table__cell">16.4mm</td>

        <td class="govuk-table__cell">17.6mm</td>

        <td class="govuk-table__cell">15.7mm</td>

        <td class="govuk-table__cell">17.8mm</td>

        <td class="govuk-table__cell">16.9mm</td>

      </tr>

      <tr class="govuk-table__row">

        <td class="govuk-table__cell">Valley</td>

        <td class="govuk-table__cell">17.5mm</td>

        <td class="govuk-table__cell">17.4mm</td>

        <td class="govuk-table__cell">17.9mm</td>

        <td class="govuk-table__cell">17.1mm</td>

        <td class="govuk-table__cell">20.2mm</td>

        <td class="govuk-table__cell">17.6mm</td>

        <td class="govuk-table__cell">18.0mm</td>

        <td class="govuk-table__cell">16.6mm</td>

        <td class="govuk-table__cell">18.0mm</td>

        <td class="govuk-table__cell">17.5mm</td>

      </tr>

      <tr class="govuk-table__row">

        <td class="govuk-table__cell">Heathrow</td>

        <td class="govuk-table__cell">23.2mm</td>

        <td class="govuk-table__cell">22.5mm</td>

        <td class="govuk-table__cell">22.5mm</td>

        <td class="govuk-table__cell">21.8mm</td>

        <td class="govuk-table__cell">24.2mm</td>

        <td class="govuk-table__cell">24.0mm</td>

        <td class="govuk-table__cell">20.7mm</td>

        <td class="govuk-table__cell">22.2mm</td>

        <td class="govuk-table__cell">22.1mm</td>

        <td class="govuk-table__cell">20.3mm</td>

      </tr>

      <tr class="govuk-table__row">

        <td class="govuk-table__cell">Hurn</td>

        <td class="govuk-table__cell">21.0mm</td>

        <td class="govuk-table__cell">20.7mm</td>

        <td class="govuk-table__cell">20.7mm</td>

        <td class="govuk-table__cell">19.9mm</td>

        <td class="govuk-table__cell">22.9mm</td>

        <td class="govuk-table__cell">21.9mm</td>

        <td class="govuk-table__cell">19.6mm</td>

        <td class="govuk-table__cell">20.5mm</td>

        <td class="govuk-table__cell">21.1mm</td>

        <td class="govuk-table__cell">19.6mm</td>

      </tr>

      <tr class="govuk-table__row">

        <td class="govuk-table__cell">Camborne</td>

        <td class="govuk-table__cell">17.9mm</td>

        <td class="govuk-table__cell">17.4mm</td>

        <td class="govuk-table__cell">17.1mm</td>

        <td class="govuk-table__cell">16.5mm</td>

        <td class="govuk-table__cell">19.7mm</td>

        <td class="govuk-table__cell">18.0mm</td>

        <td class="govuk-table__cell">17.0mm</td>

        <td class="govuk-table__cell">16.8mm</td>

        <td class="govuk-table__cell">17.8mm</td>

        <td class="govuk-table__cell">15.9mm</td>

      </tr>

    </tbody>
  </table>

</div>


{%- from "govuk/components/table/macro.njk" import govukTable -%}

<div class="moj-scrollable-pane">
  {{ govukTable({
    caption: "Historic rainfall in June",
    head: [
      {
        text: "Station"
      },
      {
        text: "2022"
      },
      {
        text: "2021"
      },
      {
        text: "2020"
      },
      {
        text: "2019"
      },
      {
        text: "2018"
      },
      {
        text: "2017"
      },
      {
        text: "2016"
      },
      {
        text: "2015"
      },
      {
        text: "2014"
      },
      {
        text: "2013"
      }
    ],
    rows: [
      [
        {
          text: "Lerwick"
        },
        {
          text: "13.7mm"
        },
        {
          text: "13.8mm"
        },
        {
          text: "13.9mm"
        },
        {
          text: "12.7mm"
        },
        {
          text: "13.3mm"
        },
        {
          text: "13.3mm"
        },
        {
          text: "12.9mm"
        },
        {
          text: "11.2mm"
        },
        {
          text: "13.3mm"
        },
        {
          text: "12.7mm"
        }
      ],
      [
        {
          text: "Eskdalemuir"
        },
        {
          text: "17.0mm"
        },
        {
          text: "17.9mm"
        },
        {
          text: "17.2mm"
        },
        {
          text: "16.2mm"
        },
        {
          text: "19.7mm"
        },
        {
          text: "16.4mm"
        },
        {
          text: "17.6mm"
        },
        {
          text: "15.7mm"
        },
        {
          text: "17.8mm"
        },
        {
          text: "16.9mm"
        }
      ],
      [
        {
          text: "Valley"
        },
        {
          text: "17.5mm"
        },
        {
          text: "17.4mm"
        },
        {
          text: "17.9mm"
        },
        {
          text: "17.1mm"
        },
        {
          text: "20.2mm"
        },
        {
          text: "17.6mm"
        },
        {
          text: "18.0mm"
        },
        {
          text: "16.6mm"
        },
        {
          text: "18.0mm"
        },
        {
          text: "17.5mm"
        }
      ],
      [
        {
          text: "Heathrow"
        },
        {
          text: "23.2mm"
        },
        {
          text: "22.5mm"
        },
        {
          text: "22.5mm"
        },
        {
          text: "21.8mm"
        },
        {
          text: "24.2mm"
        },
        {
          text: "24.0mm"
        },
        {
          text: "20.7mm"
        },
        {
          text: "22.2mm"
        },
        {
          text: "22.1mm"
        },
        {
          text: "20.3mm"
        }
      ],
      [
        {
          text: "Hurn"
        },
        {
          text: "21.0mm"
        },
        {
          text: "20.7mm"
        },
        {
          text: "20.7mm"
        },
        {
          text: "19.9mm"
        },
        {
          text: "22.9mm"
        },
        {
          text: "21.9mm"
        },
        {
          text: "19.6mm"
        },
        {
          text: "20.5mm"
        },
        {
          text: "21.1mm"
        },
        {
          text: "19.6mm"
        }
      ],
      [
        {
          text: "Camborne"
        },
        {
          text: "17.9mm"
        },
        {
          text: "17.4mm"
        },
        {
          text: "17.1mm"
        },
        {
          text: "16.5mm"
        },
        {
          text: "19.7mm"
        },
        {
          text: "18.0mm"
        },
        {
          text: "17.0mm"
        },
        {
          text: "16.8mm"
        },
        {
          text: "17.8mm"
        },
        {
          text: "15.9mm"
        }
      ]
    ]
  }) }}
</div>

When to use

Use the scrollable pane component when you have content (typically tables) which unavoidably overflowing the page. It adds scroll shadows to indicate that content overflows the page.

This is often used in the filter a list pattern as the filter takes up additional horizontal space, causing the pane holding the table to shrink.

When not to use

Before using this, try to avoid having content that overflows the page at all. Users should be able to see all of the page’s content without needing to scroll, so this component should only be used when absolutely necessary.

Do not use this component to contain tables which have multi-line text. It will not allow the content to overflow vertically.

Get help and contribute

Get help

You can contact the MoJ Design System team for help or support using this component.

Help improve this component

The MoJ Design System team would like to hear:

  • how you have used this component in your service
  • any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the scrollable pane discussion on GitHub.