Table
v1.1
Tables are used to organize and display data efficiently to provide users with insights and potential actions.
- CSS
- Marko
- React
Tables are used to organize and display data efficiently to provide users with insights and potential actions.
Unsorted (Sort)
Sorted-up (Sort-up)
Sorted-down (Sort-down)
Small
Medium
Large
Tables are organized logically with clear hierarchy.
Tables are easy to use and behave as expected.
Tables allow interaction and customization for greater control.
A sorted data table has three states: Unsorted, Sorted-up, and Sorted-down. The icon indicates the current sorted state and is only shown if sorting is available.
Bulk 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 and replaces the filter bar with actions they can take. To close “bulk edit mode”, the user can cancel or deselect the items.
Our tables are available in 3 different row sizes: Compact, Default, and Relaxed. All cells have a 16px left/right padding while the top/bottom have a minimum padding of 12px.
For rows containing images or other media types, three sizes are available: Small, Medium, and Large.
Column reordering is available to give users more control over their workflows and data sets.
Simple cells are structured to accommodate a lead, middle, and trailing slot for content.
Numeric table cells showcase numbers like costs, percentages, and stats for easy comparison and insight.
Text fields display as an enabled state to allow for quick edits.
Dropdowns allow users to make quick selections from multiple options.
The action column is used to provide actions that may be performed on a specific table row.
A status cell visually represents the state of a specific row, helping users quickly make informed decisions. Status cells can also be used to indicate row-specific alerts or notifications.
Loading should be unobtrusive and seamless—minimizing any jarring flashes or content shifts whenever possible. When tables are in a loading state, the content is replaced with a simplified skeleton loader that preserves context as the updated or new information loads.
The table header is sticky on vertical scroll. If the table extends beyond the screen then the table will scroll horizontally. Tables have a max height of 90% of the viewport.
An adjusted column width indicator is presented in a focused editing mode that is visually similar to bulk editing, with explicit actions to save, reset, or cancel.
Columns have a minimum width of 124px and a maximum width of 400px, except for selection columns, which have a fixed width of 48px. Additionally, single icon action column types are set at a fixed width of 64px.
Column reordering is presented in a modal for a focused editing mode with explicit actions to save, reset, or cancel.
When a user selects a checkbox from the table it enters the bulk action states with the bulk edit bar displaying on top of the table’s tool bar. Bulk actions are functions that may be performed on multiple items within a table.
Pagination is provided for all tables with more than 60 rows, allowing for easy navigation through the content by limiting the maximum number of rows per page. Don’t use endless scrolling for tables, as it can hinder user experience and make it difficult to manage or act on large data sets effectively.
Hover is applied at the table row and cell levels for inner cell elements such as forms, dropdown, or buttons. Table focus is handled at the cell level. A disabled state can be applied at a row or cell level. See Interaction states for more details on layer state styling.
Do use green to represent a positive trend for sales increasing or costs decreasing and red to represent a negative trend for sales decreasing or costs increasing. However, color cannot express this meaning alone. That is why we use the color in addition to an up or down arrow to represent this change. This provides contrast and conveys meaning for our color blind or low vision users.
Don’t color cells as this is an issue for our color blind or low vision users. Color cannot express meaning alone.
Do be descriptive when a field is empty or unknown.
Don’t use “--” to represent null or unknown fields.
Do align numbers to the right for improved scannability.
Don’t left align numeric values.
Do keep content concise and to 4 lines max within a cell.
Don’t exceeed more then 4 lines of content in a given cell.
