A table is a specific pattern for comparing datasets in a very direct and analytical way.
A table view is useful for comparing entries that need exhaustive comparison. Tables display text heavily. If you need to display images, we recommend that you use lists or cards.
A table entry or row doesn't support two different data types in the same column. The is due to potential comparison and sorting problems.
When a table is used together with the management toolbar, the table entries must include a checkbox since the selection and actions are reflected in the management toolbar. See the dataset display for examples.
Tables contain the following attributes (labeled in the image above):
Tables headers contain the following elements:
Default column headers are left-aligned, 14px and have semibold weight. However, there are other cases in which column headers can be center or right-aligned to improve readability and alignment with table content. For example, when using numbers in a table, we recommend aligning the column header and content to the right.
A table header can have these interactive attributes:
You can use the table group separator to group a series of table entries.
When a user hovers over a table row, quick actions from the actions menu are displayed for the element. A maximum of three actions (represented by icons) can appear.
When the row is selected, the actions do not appear on hover state.
Table rows contain the following attributes:
Table rows on hover contain the following attributes:
Note that the actions menu has a limitation on the hover state. It is not possible to have a row with a button in the default state because it would be impossible to click on it while the actions menu is active in the hover state.
Never hide an action in the table since both static actions in the row and quick actions are not compatible. Quick actions will always hover an action placed in the table row and it will be impossible to reach, as shown for the "Edit" button in the example below.
Drag and drop is configurable for tables. This lets the user exchange column positions, excluding the first column. Tables that allow drag and drop provide the action in the column's header.
You can only toggle visibility for columns that work with a management toolbar that implements this feature. All columns can be hidden, except the first one since it is the reference column.
A table can contain one or more columns, and deciding how to place them properly can be cumbersome. We provide a set of guidelines that you can follow to make this decision easier.
While the main column must always be placed on the leftmost side, the remaining columns can be placed in a couple different layouts: