Data tables are used to organize and display all information from a data set.

We recommend that you align the text in table columns that contain only digits to the right by adding the class .u-align--right to each individual cell, as in the example that follows. This is considered good practice when formatting data tables as it makes it easier to scan and compare the values quickly.



If any of the cells in a column has an icon, all cells in the same column (including headers) should have a .p-table__cell--icon-placeholder to ensure proper alignment of the text values.


Using the class p-table--sortable and assigning role="columnheader" and aria-sort to each <th> element will show each table column to be sortable. With javascript toggling between ascending and descending for the aria-sort attribute it will change the chevron icon in that direction.



Using .p-table-expanding in conjunction with the <table> element will allow expanding and hidden table cells which take up the full width of the table row element.

This pattern should be used when a table requires configuration fields (add, edit). Expandable rows can also be used to supply additional information not visible on the table row.

Using p-table-expanding__panel it can be hidden using the aria-hidden attribute. The table must contain all table cells required. The expanding panel is implemented as additional cell in each row, so to keep the markup of the table valid, an additional cell is also needed in the table <thead>. This placeholder heading cell should be hidden using aria-hidden="true" attribute.


Applying the class .p-table--mobile-card will give any table a new responsive card view when on smaller screens. Each cell will require an [aria-label] to describe the cell on a mobile screen. We use the content to create a pseudo element and keep it line with the content.

The <thead> element is completely hidden from view on a smaller screen and if the table holds a .p-contextual-menu pattern all the children elements will be visible and be interactive.


To import either or all of these components into your project, copy the snippets below and include it in your main Sass file.

@import 'patterns_table-expanding';
@import 'patterns_table-mobile-card';
@import 'patterns_table-sortable';

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.


For more information view the table, sortable, expanding or mobile card design spec which includes the specification in markdown format and a PNG image.