Skip to main content

We're excited to launch Tallinn Design System! While it allows you to create interfaces the Tallinn way it's still a work in progress. If you think something’s missing or isn't working, please let us know at disain@tallinnlv.ee

Components

Table

Overview

When to use

  • To display and organize tabular data.
  • When comparing, sorting, and filtering multi-dimensional data and objects.

When not to use

  • As a layout mechanism.
  • As a replacement for a spreadsheet or similar application.

Consider using 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.

Size​

Table is available in two sizes — regular and compact.

Use regular size for simple tables with 2-4 columns and a maximum of 10 rows. Compact size is recommended for large data tables with more than 4 columns and 10 rows.

If you have multiple tables on a page then use the same size for all of them.

Caption​

Caption is the title right above the table.

Caption may be omitted for simple tables with self-explanatory content and is highly recommended for larger tables in more complex interfaces.

A table header is the row at the top of the table that helps identify the columns below. The header provides clarity if data is non-descriptive or ambiguous.

Headers should be clear, concise, and straightforward and use sentence-case, not all-caps..

Use of a header is highly recommended in all cases but it may be omitted for very simple tables if the content is self-explanatory.

Content​

Table cells can contain a variety of content — text, links, buttons, badges, avatars etc.

Sorting​

Sorting allows reordering all the items included in a table based on the values of one of its columns. Any number of columns can be sortable, but data can only be sorted by one column at a time.

Columns that do contain a sortable data type are interactive and therefore have corresponding hover, active, and focus states.

Alignment​

Align content to the left by default. This ensures readability across different content types, consistency in content of varying lengths, and alignment between the column header and the content within the cell.

Use left alignment for:

  • Text-based content, links, dates, phone numbers, etc.
  • Numerical values that do not contain decimals or floating point numbers.
  • Nested components that display a string or text value (buttons, badges, chips, etc.)

Right alignment can be used when expressing numerical values with decimals (for example financial information and currency amounts) as this aligns the decimal places vertically.

Right alignment can also be used in a last column of a table if it contains inline actions.

Multi-select​

A multi-select table includes checkboxes enabling users to select multiple rows in a table to perform bulk operations. Checking or unchecking the checkbox in the table header either selects or deselects the checkboxes on each row in the table body. Individual checkboxes in the rows can also be selected or deselected.

The bulk action button(s) appear on top right of the table after making the first selection.

Empty state​

If there is no data to display in a table (for example, after some filters are applied to the data), a message should be displayed.

Tables on a small screen​

On small screens tables can be either horizontally scrollable or collapsed to a list.

Scrollable​

If a table doesn't fit on the screen on a narrow display, it can be made horizontally scrollable. This is the default behavior for tables and recommended behavior for large data tables.

Collapsed​

In a collapsed table, each row is displayed as a separate section, repeating the header cells in each section. This is the recommended variant for small and simple tables.