Table

StableAccessible

Tables are used to present tabulated data to the user in a consistent manner. HDS Tables offer multiple variants to allow clear presentation of vastly different data sets.

More table features are coming!
HDS Tables are work in progress. The current feature set will serve most projects but later we are also looking into adding more features such as single row actions (edit, delete), expandable rows and supporting more HDS components inside tables.

Usage

Example

Table 1: Service users (dark variant)
First nameSurnameAgeProfession
LauriKekkonen
39
Engineer
MariaSarasoja
62
Designer
AnneliRouta
50
Meteorologist
OskuRausku
18
Mail Carrier

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.

Table 2: Service users (dark variant)
First nameSurnameAgeProfession
LauriKekkonen
39
Engineer
MariaSarasoja
62
Designer
AnneliRouta
50
Meteorologist
OskuRausku
18
Mail Carrier
Table 3: Service users (light variant)
First nameSurnameAgeProfession
LauriKekkonen
39
Engineer
MariaSarasoja
62
Designer
AnneliRouta
50
Meteorologist
OskuRausku
18
Mail Carrier

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.

Table 4: Units sold by weekday
8-1212-1414-1616-18
Monday32456228094
Tuesday341688425113
Wednesday29449228067
Thursday312501455112
Friday150142362455

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.

Table 5: Service users (zebra variant)
First nameSurnameAgeCityProfessionExperience (years)
LauriKekkonen
39
HelsinkiEngineer
10
MariaSarasoja
62
TampereDesigner
39
AnneliRouta
50
TurkuMeteorologist
25
OskuRausku
18
OuluMail Carrier
1

Vertical lines

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

Table 6: Units sold by weekday (vertical lines variant)
DayProduct 1Product 2Product 3
Monday
12
24
5
Tuesday
10
32
6
Wednesday
14
35
6
Thursday
11
18
2
Friday
16
45
12

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.

Table 7: Service users (dense variant)
First nameSurnameAgeProfession
LauriKekkonen
39
Engineer
MariaSarasoja
62
Designer
AnneliRouta
50
Meteorologist
OskuRausku
18
Mail Carrier

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.

Table 8: Service users (sorting, dark variant)
LauriKekkonen
39
Engineer
MariaSarasoja
62
Designer
AnneliRouta
50
Meteorologist
OskuRausku
18
Mail Carrier
LindaKoululainen
8
School student

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.

Employees
First nameSurnameAgeProfession
LauriKekkonen
39
Engineer
MariaSarasoja
62
Designer
AnneliRouta
50
Meteorologist
OskuRausku
18
Mail Carrier