Data Table
Usage
When to Use
Use a data table to display a full set of data. Usually, items in data tables are not clickable and are used only to provide information similarly to spreadsheet tables. In many cases, data tables enable users to flexibly sort or rearrange their data to get a better overview.
When Not to Use
If you want to give users a preview of multiple items, use a rich list instead. In contrast to rows in data tables, a click on each row of a rich list opens a dialog or a new page that contains more information about that item.
Variants
Static Table
Static tables are the most basic variant and offer no possibility for users to customize the order of items.
Sortable Columns
Sortable tables allow users to sort the rows according to their preferences. To enable users to do this, the column headings of sortable columns are clickable. Not all columns of the table need to have this sorting functionality.
In this example, the columns 'Department' and 'Members' are sortable, while the column 'Manager' is not
Rearrangeable Columns
Rearrangeable tables offer a drag-and-drop function for each row. This is displayed by the ‘drag’ icon on the left side of each column.
Selectable Columns
Regardless of whether you are using a static, a sortable, or a rearrangeable table, you can include a checkbox to the left of every row to allow users to apply an action to multiple rows at once.
Tree-View Data Table
Tree-view data tables allow you to organize the content of a data table into sections. To open a section, users can click on any parent item.
Titles
You can add a title to your table to clarify what it’s about.
Filters
Consider offering a filter function to help people find values in long tables quickly. There are simple filters that filter only by one predefined column and smart filters that filter depending on what’s entered.
Pagination
You can add a pagination function to long tables.
Content
Left-align textual data and right-align numerical data.
Use the same number of decimal places for each number in one column. Avoid using different units for all numbers of that column.
If your rows contain actions that affect the whole row, include them to the far right of the table. You don’t have to add a column heading for the action column.
Use descriptive column headings to provide context. Each column heading should be a noun or a short noun phrase with title-style capitalization and no period.
If some value is missing, use an em-dash (—) for the respective field. On macOS, type option (⌥) + shift (⇧) + hyphen (-) to create an em-dash. On Windows, press the Windows key (win) + dot (.) to access the emoji keyboard and find the em-dash within the symbols section (Ω).
Layout
