Tables display lists of information and data points in rows and columns.Â
Usage
Displays lists of information and tabular data, equivalent to a spreadsheet.
Data should have the ability for filter, search, sort and provide pagination when needed.
If applicable, rows can be actioned on in batch actions on single row action.Â
Tables paginate after 20 rows.Â
n
Principles
Informational: Displays a large amount of of information in a digestible way.Â
Simple: Visually, the table is simple and to-the-point for ease of scanning.Â
Interactive: When applicable, a table should have strong affordances for what actions can be taken.
Consistent: Even when used for vastly different data sets, tables should be as consistent as possible from one page to another.Â
Table Vocabulary
Component
Description
Single-Row Action
Single row actions are functions that may be performed on one specific table row at a time.Â
Multi-Row Actions
Multi-row actions are functions that may be performed on multiple rows within a table at a time.Â
More Menu
More Menus are in the far right column of each table row and contain actions related specifically to that row. Use the overflow menu component when additional single-row options are available to the user but there is a space constraint.
Table Action Toolbar
When a multi-select table is being used, the action toolbar appears above the table when 1 or more rows’ checkboxes are selected. The actions in the toolbar display dynamically — single row actions appear if one row is selected. Multi-row actions display if >1 rows are selected.
Data Table Variant PropertiesÂ
Variant
Purpose
Default
The default data table comes with a base style with only the title, header, and table elements.Â
With Inline Action
Tables with inline actions have an overflow menu at the end of each row that contains actions related specifically to that row. A batch action toolbar appears above the table when a singtable rows are selected.
With Batch Action
Tables with batch actions allows the user to select multiple rows and apply an action. A batch action toolbar appears above the table when table rows are selected.
With Expandable Row
The expandable data table is useful for presenting large amounts of data in a small space. Â Rows are collapsed and can be expanded to reveal extra information. Use the expanded section for supplementary information or data that needs additional query time.
With Horizontal Scroll
A horizontal scroll is used on tables with too many columns to fit into a traditional table width. The table scrolls to the left and right on the page to reveal more columns. If necessary, sticky columns can be used to make sure that inline action menus and/or batch action checkboxes are always visible and able to be actioned on.Â
Dialogue, Modal, Panel, and Confirmation Usage for Table Actions
Component
Link to Component
Usage in Tables
Slide-Out Panels
Panels float over page content and are treated as a lightbox.Â
Panels have a consistent width, span the full height of the viewport, and are flush to the right edge of the viewport.Â
This component is not yet documented in Mountaineer. Â
Slide-out panels should be used for tertiary actions taken and/or more complex interactions. They behave much like an additional webpage while maintaining a contextual connection to the primary task. Success/failure confirmations from actions taken on panels should be displayed on a snackbar or a toast.Â
Modals should be used to confirm an action or decision(such as“Do you wish to delete the selected files”). Success/failure confirmations from actions taken on modals should be displayed on a snackbar or a toast.
Definition
Usage
Principles
Table Vocabulary
Data Table Variant PropertiesÂ
Dialogue, Modal, Panel, and Confirmation Usage for Table Actions
Table Variant Interaction Definition