Table
Usage
Data tables are used to organise and display all information from a data set. They can include three or more columns and can include a corresponding visualisation, such as a graph.
Anatomy
Every table must incorporate the following elements:
Container - holds all data table content
Title - name of the table describing the data it contains
Column header - titles for column content
Table content - content (and header accordingly) justified as follows:
Text content - Left-justified
Monetary content - Right-justified
Numerical content (any numbers not relating to money or currency) - Left-justified
Inline actions - centre-justified (see below)
Page count - allows changing the amount of rows via a dropdown
Pagination - buttons to move back and forth between pages (scroll can be used instead)
Best practices
Tables should:
Show values across multiple categories and measures.
Allow for filtering and ordering when comparison is not a priority.
Help users visualise and scan many values from an entire data set.
Help users find other values in the data hierarchy through use of links.
Minimise clutter by only including values that supports the data’s purpose.
Include a summary row to surface the column totals.
Not include calculations within the summary row.
Wrap fist then truncate content if its not possible. This is because if row titles start with the same word, they’ll all appear the same when truncated.
Not to be used for an actionable list of items that link to details pages.
Alignment within tables
Column content types can vary from product, so the following alignment rules should be followed as a rule of thumb:
Textual data = Left aligned
Monetary value (i.e £13.50, $24.24) = Right aligned
Numerical (i.e. employee number, IP address) = Left aligned
Align headers with their related data (text only, numerical should align to the left too despite the data aligning to the right. )
Don’t centre align
Give equal padding to each column to allow ease for the user to read the content. Padding can vary due to how much data needs to be shown (see below)
Here is an example
Padding column
When possible there should be 32px padding between columns, as shown below.
Condense column padding
The minimum padding spacing in condense table should be 8px. Increase by 4px where applicable see padding visual.
Here is an example of what a table with 2 lines in the column header looks like.
Table content guidelines
Headers should:
Be informative and descriptive
Concise and scannable
Use sentence case (first word capitalised, rest lowercase)
Don't include units of measurement symbols (put those symbols in the rows)
Where needed a tooltip can be used to showcase the full column header (see below)
Column content should:
Be concise and scannable
Include units of measurement symbols on each row to clearly show the currency for users to read
Use sentence case (first word capitalised, rest lowercase)
Where needed a tooltip can be used to showcase the full content as (see below)
Decimals
Keep decimals consistent. For example, don’t use 3 decimals in one row and 2 in others.
For currency alway use 2 decimals i.e £2,999.13 then within the table if you are using decimals make sure they are the same as currency i.e 0.23
Truncated with tooltip
Text that is longer than the column width is truncated with an ellipsis. Only do this if the copy can not be wrapped first. On hover, a tooltip shows the full name.
Truncated row example
Text that is longer than the column width within a row is truncated with an ellipsis. On hover, a tooltip shows the full content.
Table Types
Default table example
Selectable rows
Selectable rows must always be supported by the actions block, which is always placed on top of the table at the right edge.
Behaviour
The hover and selected states apply to the whole row
The disabled state can be be applied to the whole row or just the cell, depending on requirements
The danger state is applied only to the cells to call attention to an error or a specific negative value in the row
States
Hover, danger, and disabled states always apply to both default and selectable rows tables. The selected state belongs to the selectable table only.
Features variations
The following features can be applied to both default and selectable rows tables, according to the product requirements:
Expandable rows
Allow users to a more in-depth level of knowledge.
Inline actions
Allows some inline actions to happen on a row.
Column sorting
Sorting functionality allows users to sort the data according to specific columns and is controlled by the table header.
Column resizing
Allows long content to unwrap and be readable by dragging the column headers to resize columns.
Button group navigation
Combines different views and allows users to navigate them through the buttons group.
Search
The search bar is always placed as first item at the top left.
Filters
Filters should always placed at the top left and stacked one next to the other.
Behaviour
If combined with a search bar, the filters will shift to the action area on the right, only in case of tables where no actions are required.
If both search bar and actions are required, then it’s up to the designer to define an appropriate solution, maintaining the placement pattern as much as possible.
Total row
The row counting the total is always placed at the last row, even if there are more rows that cannot be displayed. Pagination will indicate there are more rows to be seen.
Last updated
