Tables in mobile view displaying information off the page

[dnyuar]

Problem

We currently have an issue displaying our tables in mobile view in which the table goes off the page when the table has 4 or more columns. Users currently on mobile view need horizontal scroll in order to be able to see further information that does not fit within our screen. The current table design pattern does not offer a responsive table pattern out-of-the-box.

Research

Office for National Statistics (ONS) and the NHS both have responsive table patterns which allow the table to be displayed for users in mobile view. With their responsive table design pattern, tables have stacked rows for small viewports. I've attached links below to both design manual websites which show these patterns.

https://service-manual.nhs.uk/design-system/components/table
https://service-manual.ons.gov.uk/design-system/components/table#example.example-table-responsive.html

I've also created a draft PR which involved using a table in which the table goes off the page and creating a CSS class in our service which can replicate the responsive table pattern shown in the links above. The page chosen was the 'Payment you made to HMRC' page shown in the screenshot below.

hmrc/income-tax-view-change-frontend#3077

By adding the custom CSS (based off the ONS version) for a responsive table pattern, the table was able to stay within the page. Below are screenshots of the page in mobile view as it is currently and the next with the added responsive CSS class added. There are however a couple accessibility issues to do with the rows which contain a link which is something I am currently investigating.

With the custom CSS added, I was able to keep the same styling that is used in the GOV.UK design system.

Suggested guidance

A potential solution for this issue would be to add a responsive pattern for tables into the GOV.UK design system. I was able to update this table as it is using plain HTML rather than twirl templates, however this would not be able to be added if I was using twirl. Also it would be a much better user experience for mobile users if we're able to keep the information on the page rather than having the user have to scroll horizontally to find information.

I've attached the CSS/Nunjucks for the responsive table patterns below for ONS & NHS

https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/components/tables/_index.scss
https://github.com/nhsuk/nhsuk-frontend/blob/main/packages/nhsuk-frontend/src/nhsuk/components/tables/template.njk

https://github.com/ONSdigital/design-system/blob/79783b34de3592bfd0fdfb37938ea26e255ccc86/src/components/table/_table.scss
https://github.com/ONSdigital/design-system/blob/79783b34de3592bfd0fdfb37938ea26e255ccc86/src/components/table/_macro.njk

[Jon-Rowe-HMRC]

Thanks @dnyuar for the detailed proposal. I was about to ask you to cross-post on alphagov/govuk-design-system-backlog#61 but see you already have :)

We have a much smaller team than GDS and need to prioritise HMRC specific patterns. And this would be much more useful as a cross-department pattern. However, this issue has been raised before - hmrc/platui-support#4 - and is now nearer the middle of our backlog than the bottom.

So we may look at it before GDS, but it's currently behind a number of HMRC specific tasks.

[dnyuar]

Thanks @Jon-Rowe-HMRC for the information. No problem, happy to know that it's in the backlog and will be worked on :)