Back to components

Data Tables

Data tables present raw data sets and lend meaning to the data, while maintaining that the data is readable, scannable, and easily comparable.

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000

Table of Contents

Edit this section, Opens in new window

Overview

Data tables display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards, blocks or panels.

When to use

  • To organize and display data.
  • If your user must navigate to a specific piece of data to complete a task.
  • Displaying all of a user’s resources.

When not to use

  • When a more complex display of the data or interactions are required.
  • As a replacement for a spreadsheet application.
Edit this section, Opens in new window

Principles

Header row

Use meaningful text to label the table data and provide clarity to the content below.

Sortable

All columns should by default be sortable

Number of columns

For large sets of data, it is preferable to use rows instead of columns in order to guide the eye across the page. It is quicker and easier to scan down a single row rather than scan across multiple columns of related data.

Batch actions

Batch actions are functions that may be performed on multiple items within a table. Use a menu to present batch actions to the user. The menu appears when the user clicks on the icon.

Inline actions

Inline actions are functions that may be performed on a specific table item. Each row is accompanied by a menu or a button that contains actions related specifically to that table row.

Expandable rows

Expandable rows show minimal information at a high-level and a more detailed view nested within that row.

Striped table

Use striped table when you have text on more than one row, or large datasets.

Hover on row

Not needed for small tables, preferably on larger tables (datasets, wider) and denser tables.

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Edit this section, Opens in new window

Variations

Type Purpose
Default The default data table comes with a base style with only the title, header, and table elements. rows.
With selection Batch actions are functions that may be performed on multiple items within a table. This type of table enables the user to select individual rows and apply an action. A batch action toolbar appears when table rows are selected.
With expansion The expandable data table is useful for presenting large amounts of data in a small space. Rows are collapsed and can be expanded to reveal extra information.
Edit this section, Opens in new window

Usage

Sizing

The data table is available in two different row sizes: default and condensed.

Name Age Position
John 38 Hitman
John 38 Hitman
John 38 Hitman
John 38 Hitman
Name Age Position
John 38 Hitman
John 38 Hitman
John 38 Hitman
John 38 Hitman

Placement

Data tables should be placed in a page's main content area and given plenty of space to display data without truncation. Avoid placing data tables inside modals or smaller containers where the information can feel cramped or needs truncation.

The data table can be placed on the grid following the four different grid modes outlined in the layout section. Although, the data table can share horizontal space with other components and content, consider giving your data table the most width on the page to help your user view dense data.

These four examples show the data table on the default, wide, fluid and across grid modes.

Default

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000

Sed accumsan dapibus ligula et maximus. Integer vel suscipit nisl. Nulla facilisis cursus nisi, sed pretium justo tincidunt eget. In pharetra augue tellus, sed pellentesque diam malesuada vitae. Aenean at diam quis nunc maximus elementum sit amet at quam. Vivamus tincidunt et ex eget mollis. Suspendisse rhoncus ultricies dolor, nec finibus dui pellentesque ut. Vestibulum luctus ut lectus et hendrerit. Morbi lobortis justo at sem sagittis, in euismod metus pellentesque. In in efficitur justo. Pellentesque fringilla odio posuere tempus ullamcorper.

Wide

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000

Sed accumsan dapibus ligula et maximus. Integer vel suscipit nisl. Nulla facilisis cursus nisi, sed pretium justo tincidunt eget. In pharetra augue tellus, sed pellentesque diam malesuada vitae. Aenean at diam quis nunc maximus elementum sit amet at quam. Vivamus tincidunt et ex eget mollis. Suspendisse rhoncus ultricies dolor, nec finibus dui pellentesque ut. Vestibulum luctus ut lectus et hendrerit. Morbi lobortis justo at sem sagittis, in euismod metus pellentesque. In in efficitur justo. Pellentesque fringilla odio posuere tempus ullamcorper.

Fluid

Name Age Position
John Wicker 38 Hitman
John Wicker 38 Hitman
John Wicker 38 Hitman
John Wicker 38 Hitman

Sed accumsan dapibus ligula et maximus. Integer vel suscipit nisl. Nulla facilisis cursus nisi, sed pretium justo tincidunt eget. In pharetra augue tellus, sed pellentesque diam malesuada vitae. Aenean at diam quis nunc maximus elementum sit amet at quam. Vivamus tincidunt et ex eget mollis. Suspendisse rhoncus ultricies dolor, nec finibus dui pellentesque ut. Vestibulum luctus ut lectus et hendrerit. Morbi lobortis justo at sem sagittis, in euismod metus pellentesque. In in efficitur justo. Pellentesque fringilla odio posuere tempus ullamcorper.

Across

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000

Sed accumsan dapibus ligula et maximus. Integer vel suscipit nisl. Nulla facilisis cursus nisi, sed pretium justo tincidunt eget. In pharetra augue tellus, sed pellentesque diam malesuada vitae. Aenean at diam quis nunc maximus elementum sit amet at quam. Vivamus tincidunt et ex eget mollis. Suspendisse rhoncus ultricies dolor, nec finibus dui pellentesque ut. Vestibulum luctus ut lectus et hendrerit. Morbi lobortis justo at sem sagittis, in euismod metus pellentesque. In in efficitur justo. Pellentesque fringilla odio posuere tempus ullamcorper.

Alignment

Registravimo data Paslauga Įstaigos pavadinimas Sveikatos išlaidų grupė Statusas Paslaugos kaina, EUR
By default, the table cell is vertically aligned to top 38 Hitman London 01.01.1971 833.000 €
Default text alignment is always to the left 38 Hitman London 01.01.1971 4.123 €
Numbers should always be aligned to the right 38 Hitman London 01.01.1971 833.000 €

Principles

  • By default, the table cell is vertically aligned to top
  • Default text alignment is always to the left
  • Numbers should always be aligned to the right, but there can be exceptions
Edit this section, Opens in new window

Behaviours

Interactions

Pointer

A row can be selected:

Name Age Position Office Salary
John Wicker 38 Hitman London 833 000
John Wicker 38 Hitman London 833 000
Expandable 38 Hitman London 833 000
John Wicker 38 Hitman London 83 312 000
Selected row

The color used for the outline is BL 1, BLUE. The color used for the fill is BL 1, BLUE 5%

  1. Selected row
  2. Checkbox

Hover

Row hover state:

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000

Focus and focus-within

Focused row, or focus within row state:

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Focused/focused within row
  1. The color used for the focus ring is CB 3, LIGHT BLUE

Sorting

Columns can be sorted in ascending or descending order. Sorting controls are located in the column headers and indicated with an arrow icon on hover and when a column has been sorted.

A sorted data table has three states: unsorted (no arrows), ascending (arrow up) or descending (arrow down). The icon indicates the current sorted state and is only shown if sorting is activated. Only the column being sorted should display an icon, and unsorted icons are only visible on hover.

Name Age
C 38
B 38
A 38

NOTE! Table columns should be sortable by default

Name Age Birthdate
C 38 1983-11-10
B 38 1983-11-10
A 38 1983-11-10
Sort controls
  1. On hover
  2. Descending sort
  3. Ascending sort
Style
  1. The color used for the hovered arrow is BR 1, BROWN
  2. The color used for the hovered arrow is LB 1, LIGHT BROWN
  3. The color used for the hovered arrow is LB 1, LIGHT BROWN
Name Age Birthdate
C 38 1983-11-10
B 38 1983-11-10
A 38 1983-11-10
Not sorted
Name Age Birthdate
C 38 1983-11-10
B 39 1983-11-10
A 58 1983-11-10
Ascending
Name Age Birthdate
C 58 1983-11-10
B 39 1983-11-10
A 28 1983-11-10
Descending

Pagination

When there is a lot of content to display, using pagination will help us to add navigation links to reveal more content on the page.

Primarily, put pagination on the bottom of the table. If the table does not fit on the screen, use pagination above the table aswell.

See the pagination component for more information.

Default pagination
Minimal pagination
Default pagination with disabled arrows

Disabled buttons is shown when the data set is at the end, or beginning of the data set.

Expandable

Expandable table

The color for the expanded bar is BR 1, BROWN 50% WHITE. The fill for the expanded row is BE 4, LIGHTER BEIGE

  1. Expanded row
  2. Expanded content

Global actions

If needed, global actions can be added to the table. Basically it is buttons with relevant actions to the whole table, like export or download. Actions for selected rows can also utilize this, i.e. in a form.

Name Age Position Office Salary Availability
John Wicker 38 Hitman London 833 000 Available
John Wicker 38 Hitman London 833 000 Available
Expandable 38 Hitman London 833 000 Available
John Wicker 38 Hitman London 83312 000 Available
Global actions
  1. Table global actions
Name Age Position Office Salary Availability
John Wicker 38 Hitman London 833 000 Available
John Wicker 38 Hitman London 833 000 Available
Expandable 38 Hitman London 833 000 Available
John Wicker 38 Hitman London 83312 000 Available
Global actions with form
  1. Table global actions

Toolbar

The toolbar contains search and filters.

Filters
Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Toolbar
  1. Search
  2. Filters

Bulk actions

Batch actions are functions that may be performed on multiple items within a table. Once the user selects at least one row from the table, the batch action bar appears at the top of the table, presenting the user with actions they can take. To exit or escape “batch action mode”, the user can cancel out or deselect the items.

Performing actions on 3 items
Name Age Position Office Salary Availability
John Wicker 38 Hitman London 833 000 Available
John Wicker 38 Hitman London 833 000 Available
Expandable 38 Hitman London 833 000 Available
John Wicker 38 Hitman London 83312 000 Available
Bulk actions

The color used for the fill is BL 1, BLUE. The color used for the text is BE 5, LIGHTEST BEIGE. The hover state fill for the actions is BL 1 DARK, DARK BLUE

  1. Table bulk actions
  2. Hovered action
  3. Action
  4. Indicator on how many items are to be used in the action

Inline actions

Försäkring Betalningssätt Action
Villaförsäkring, LYXVILLAN PÅ SOLSIDAN Helårsvis
Hemförsäkring, Testgatan 1 Helårsvis
Olycksfallsförsäkring, TESTTVÅ, MYPAGES Helårsvis
Inline actions with text controls
  1. Text control
Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Expandable 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 83312 000
Inline actions with icon controls
  1. Icon control
Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Expandable 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 83312 000
Inline actions with multiple actions
  1. Menu control

Modifiers

Embedded

Tables can be embedded in different content, like cards, panels and modals.

Striped

A table can have alternating striped rows, to differentiate rows.

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Striped rows
  1. The color used for the alternating background is LB 1, LIGHT BROWN 10%

Highlight row

A row can be highlighted. This is useful if you want to highlight a row/several rows for reference.

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Highlighted row

The color used for the outline is BL 1, BLUE. The color used for the fill is BL 1, BLUE 5%

  1. Selected row

Unread row

A row can be marked as unread:

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Unread
  1. The color used for the unread bar is BL 1, BLUE

Interactive row

A row can be interactive:

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Interactive rows
  1. The color used for the focus ring is CB 3, LIGHT BLUE

Hoverable

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Hoverable table rows
  1. The color used for hover is LB 1, LIGHT BROWN 20%

Filled headers

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Filled horizontal headers
  1. The color as background is BE 1, DARK BEIGE
  2. The column header text color is BR 1, BROWN
Name John Wicker John Wicker John Wicker John Wicker John Wicker John Wicker
Age 38 38 38 38 38 38
Position Hitman Hitman Hitman Hitman Hitman Hitman
Office London London London London London London
Start date 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971
Salary 833 000 833 000 833 000 833 000 83312 000 833 000
Filled vertical headers
  1. The color as background is BE 1, DARK BEIGE

Sticky

A table can have sticky headers. This might make the table a bit responsive in some cases:

Name Age Position Office Start date Salary Office Start date Salary Name Age
John Wicker 01.01.1971 833 000 John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 01.01.1971 833 000 John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 01.01.1971 833 000 John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 01.01.1971 833 000 John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 32 Hitman 01.01.1971 833 000 John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 32 Hitman 01.01.1971 833 000 John Wicker 38 Hitman London 01.01.1971 833 000
123 123 123
Sticky headers

When using sticky headers, the table headers always get a dark background.

Name John Wicker John Wicker John Wicker John Wicker John Wicker John Wicker John Wicker John Wicker John Wicker John Wicker John Wicker John Wicker
Age 38 38 38 38 38 38 38 38 38 38 38 38
Position Hitman Hitman Hitman Hitman Hitman Hitman Hitman Hitman Hitman Hitman Hitman Hitman
Office London London London London London London London London London London London London
Start date 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971 01.01.1971
Salary 833 000 833 000 833 000 833 000 83312 000 833 000 833 000 833 000 833 000 833 000 83312 000 833 000
Sticky headers

When using sticky headers, the table headers always get a dark background.

Status

Different statuses can be applied to table elements:

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Row statuses

A status could be: Error, Warning or OK

  1. The color used is CG 3, LIGHT GREEN
  2. The color used is CY 3, LIGHT YELLOW
  3. The color used is CR 3, LIGHT RED

The background colors used is blended with mix-blend-mode: multiply; and opacity: 0.5;

If you want to add statuses to every row, use the Status Indicator:

Name Age Position Office Salary Availability
John Wicker 38 Hitman London 833 000 Available
John Wicker 38 Hitman London 833 000 Available
Expandable 38 Hitman London 833 000 Retired
John Wicker 38 Hitman London 83312 000 Available
Wicked Witch 62 Beheader Moscow 622 430 Away
Black Widow 34 Undercover Agent Copenhagen 1 351 400 Dead
Deadpool ?? Pain in the ass ?? Free Available
Spawn 43 Demon New York Free Away

A cell can have different statuses:

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Cell statuses

A status could be: Error, Warning or OK

  1. On hover
  2. Descending sort
  3. Ascending sort

Table container

A table is to be placed inside a table container, when applicable. It is essentially a wrapper with no extra styling.

However, you can use this wrapper to emphasize a table, by using it as a box.

Table title

Additional description if needed

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Edit this section, Opens in new window

Responsive

If you want to display the table in a narrower vieport, i.e. mobile or table, you need to add some more sugaring to the component. Here are 4 examples on how you can present the table to the user.

Use which ever method that suits the table best.

Name Age Position Office Start date Salary Office Start date Salary Name Age
John Wicker 01.01.1971 833 000 John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 32 Hitman 01.01.1971 833 000 John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 32 Hitman 01.01.1971 833 000 John Wicker 38 Hitman London 01.01.1971 833 000
123 123 123

Mobile table version 1

This table is displayed as separate cards with a table inside, headings to the left, content to the right, in mobile view

Mobile table version 1

Name Age Position Office Start date Salary Office Start date Salary Name Age
John Wicker 01.01.1971 833 000 John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 32 Hitman 01.01.1971 833 000 John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 32 Hitman 01.01.1971 833 000 John Wicker 38 Hitman London 01.01.1971 833 000
123 123 123

Mobile table version 2

This table is displayed as a scrollable table in mobile view

Mobile table version 2

Name Age Position Office Start date Salary Office Start date Salary Name Age
John Wicker 01.01.1971 833 000 John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman John Wicker 38 Hitman 38 Hitman London 01.01.1971 833 000
John Wicker 32 Hitman 01.01.1971 833 000 John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 32 Hitman 01.01.1971 833 000 John Wicker 38 Hitman London 01.01.1971 833 000
123 123 123

The table is too large for this view. Please download or open in new tab.

Download as PDF

Mobile table version 3

The table is hidden and export methods are shown in mobile view. If the usage is to modify, download, if it is to preview, open in new tab

Mobile table version 3

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000

Mobile table version 4

The preselected rows are hidden in mobile view. This method should either be done manually with css, i.e. setting the cells(columns) to be hidden, or by JavaScript

Mobile table version 4

Type Purpose
Default The default data table comes with a base style with only the title, header, and table elements. rows.
With selection Batch actions are functions that may be performed on multiple items within a table. This type of table enables the user to select individual rows and apply an action. A batch action toolbar appears when table rows are selected.
With expansion The expandable data table is useful for presenting large amounts of data in a small space. Rows are collapsed and can be expanded to reveal extra information.

Mobile table version 5

This table is displayed like a definition list with key-value pairs.

Mobile table version 5

Edit this section, Opens in new window

Anatomy

Table title

Additional description if needed

Filters
Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
123 123 123
Anatomy
  1. Table title
  2. Description if needed
  3. Toolbar
  4. Column header
  5. Table row
  6. Table Footer
  7. Pagination
  8. Table global actions
Edit this section, Opens in new window

Specs

Name Age Position Office Start date Salary
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
John Wicker 38 Hitman London 01.01.1971 833 000
Spacing tokens used
Token Rem Pixel
size-spacing-8 0.5rem 8px
size-spacing-16 1rem 16px
size-spacing-24 1.5rem 24px
size-spacing-64 4rem 64px
Edit this section, Opens in new window
Contact us, Opens in new window