Table

Usage

Example

Principles

Basic tables (Core and React)

• Use tables to organise and present data.
• You should consider other presentation formats when the data is very simple, e.g. when the table would only have less than 4 rows or less than 3 columns.
  • Also note that HDS Tables are not a spreadsheet application. If you expect the user to need complex data operations it may be wise to share the data as a spreadsheet file.
• Do not use tables to create layouts. Tables are meant to present data.
• Align text to the left and numerical data to the right. Header cells are always aligned to the left. HDS provides CSS classes to make this easier.
• Utilise zebra lines when your table has long rows. Zebra lines help the user to follow a specific row.
• Utilise vertical lines when your table has a lot of content and narrow cells. Number-heavy tables are an example of a situation where vertical lines may help the user.
• HDS Table offers smaller font sizes and spacing on mobile screens.
  • If your table has a large amount of data, you can use the dense property to force mobile spacing on all screen sizes.
• Table container is allowed to be scrollable. This is common on smaller screens where it can be impossible to fit the full table on the device screen.
  • On smaller screens, it may be beneficial to consider other presentation formats for table data. For example, a table can be broken into cards.

Interactable tables (React)

• HDS Tables support sorting. When a column is set to be sortable, a sorting button appears after its header.
  • The sorting icon type can be changed depending on the type of data in the column.
• Only use sorting when it is necessary or otherwise beneficial to the user.
• HDS Table's rows can be made selectable. In this case, HDS automatically provides actions for selecting and deselecting all rows.
• If your table includes actions that can affect multiple rows (e.g. deleting selected rows or exporting a CSV file), these actions must be placed above the table. For more information, see Selecting rows and Custom actions variant examples below.

Variations

Default

The default HDS table variant includes horizontal lines. The header row can be either dark or light depending on the brand colour used as a background. Whether you need a black or white text colour can be checked from HDS Colour documentation page

Vertical headers

Vertical headers can be used to create tables that have both a header row and a header column. Note that the empty header cell on the top left corner has role="presentation" attribute.

Zebra rows

Zebra rows (alternating row colours) should be used on tables that have very long rows. It makes it easier to visually scan the table and follow rows.

Vertical lines

Vertical lines can be used on tables that have a lot of columns or a lot of similar data (e.g. numbers).

Dense tables

If your table has a large amount of data, you can use the dense property to force mobile spacing on all screen sizes. This allows more data to fit into the view at the same time.

Sorting

Columns can be configured to be sortable which makes the sorting button appear after the column header. The sorting icon is different depending on the data type of the column (alphabetical or numeric/other).

Currently, only one column can be sorted at a time.

Selecting rows

HDS Table rows can be set to be selectable. This makes the first column to be a selection column. This also adds two (2) action buttons above the table; one button for selecting all rows and one button to clear selection.