Responsive table

[Fenwick17]

Description

Component for a responsive and accessible table

How it works

When viewed on a destkop the table component will behave like any other table. However, when viewed on a mobile the table collapses into what appears to be a group list style component.
The markup remains the same as it did originally, so when using a screen reader it will still be read out as if it was a normal table just with a different visual representation.
To do this the markup includes numerous extra attributes and elements paired with CSS to modify the layout of the table.

• CSS is used to modify the layout to use flex and block
• Roles are added to all table elements which will then mean screenreader behaviour remains the same and despite having a different visual representation, it will still behave as a normal table would
• aria-hidden is used to provide visual context of the heading which is no longer visible, this will be the same content used in the appropriate table heading

Desktop view

Mobile view

When to use

This should only be used to show tabular data when your table has 3 columns or more.

Further documentation to follow.

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry