Components
Scrollable pane
Status: To be reviewedHow to use ‘to be reviewed’ components
Components with a ‘to be reviewed’ status have been added for use by everyone, but have not been checked or improved recently.
Read about all the Design System statuses.
<div class="moj-scrollable-pane" role="region" aria-label="Historic rainfall in June" tabindex="0">
<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" role="region" aria-label="Historic rainfall in June" tabindex="0">
{{ 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 a table) which unavoidably overflows 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.
How to use
In order to be accessible the scrollable pane must have a role of region and tabindex="0". This
allows it to be focused using the keyboard and scrolled using the arrow keys.
All focusable elements need an accessible name, so you must also add an aria-label
or aria-labelledby attribute.
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.