Table
Data tables are used to organize and display data efficiently to provide users with insights and potential actions.
Data tables are used to organize and display data efficiently to provide users with insights and potential actions.
Expanded component guidance coming soon.
This page will be updated soon with expanded guidance and clarity from Design, Platform, and Accessibility teams.
The default data table is the base style with only the title, header, filter bar, and table elements. The default style does not have a multi-select.
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 replace the filter bar with actions they can take. To close “bulk edit mode”, the user can cancel out or deselect the items.
With image options gives tables a visual reference of content and quick scannability. This option can have selection checkboxes as the leading element too if desired.
Our data tables are available in 3 different row sizes: Compact, Comfy, Relaxed.
For rows with images there are 3 image sizes available: Small Medium and Large. These sizes override the default row sizes. To scale rows correctly add the image size plus 16px top & bottom padding.
The hover/focus states indicate that a cursor is actively hovering over a component or a keyboard has tabbed to a component.
Unsorted (Sort)
Sorted-up (Sort-up)
Sorted-down (Sort-down)
When a user selects a checkbox from the table, inline editable fields change to an edit state and the bulk action bar replaces the filter bar.
Dropdown
This action allow users to make a single selection from multiple options.
When a row from the table is selected, text fields change to an active state to allow for quick edits.
Overflow buttons provide actions that may be performed on a specific table row. When possible, limit actions in menus to 3-5 options.
When the overflow menu contains fewer than three options, keep the actions inline as icon buttons instead. This reduces a click and keeps available actions visible.