​​​🍄​The “Mega” Table

​
​Definition

​​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. 
​​Modal Dialogue
​​​+mushroomModal Dialogs​ 
​​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.
​​Full-Page Dialogue
​​​+mushroomFull-page Dialogs​ 
​​Full-page dialogues should be used for page-level actions or adding something to a data table (i.e. create a user). 
​​Success/failure confirmations for full-page dialogues should remain in the full-page dialogue. 
​​Snackbar/Toast
​​​+mushroomToasts​ 
​​​+mushroomSnackbars​ 
​​Used as success/failure confirmations for actions taken on slide outs. Usage of a snackbar or a toast depends on if a CTA is needed.
​​
​​

​
​Table Variant Interaction Definition

​​
​​Table
​​Link to Prototype
​​Interaction Notes
​​Simple Table
  • ​​The default data table base style with only the title, header, and rows of data. 
​​Horizontal Scroll
  • ​​A horizontal scroll is used on tables with too many columns to fit into a traditional table width. 
  • ​​The table scrolls left and right to reveal more columns. 
  • ​​In Mountaineer styling, the scroll bar appears at the top of the table.
​​
​​More Menu
  • ​​Tables with single row actions have a More Menu at the end of each row that contains actions related specifically to that row.
​​Expandable Row
  • ​​The expandable data table is used 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.
​​More Menu + Expandable Row 
  • ​​All functionality of the More Menu table plus all functionality of an expandable row. 
  • ​​
​​
​​More Menu + Horizontal Scroll 
  • ​​All functionality of the More Menu table. 
  • ​​A sticky column is used on the More Menu column to make sure that it is always visible and able to be actioned on.
  • ​​
​​
​​Multi Select
  • ​​Tables with multi-select allow the user to select multiple rows and apply an action.
  • ​​When a checkbox on a single row/handful are selected: 
  • ​​More Menu column is hidden from the table.
  • ​​A batch action toolbar appears above the table with applicable icon buttons 
  • ​​Actions that appear in the toolbar are dynamic depending on if 1 or >1 rows are selected. (i.e. edit only appears when 1 row is selected because we can only edit one row at a time). 
​​
​​
  • ​​When the Select All checkbox in the header row is selected:
  • ​​All rows actively being shown on that page are selected (usually will be 20 because we paginate tables after 20 rows)
  • ​​More Menu column is hidden from the table.
  • ​​A batch action toolbar appears above the table with applicable icon buttons 
  • ​​The user has the option to select all rows across all paginated pages of the table.
  • ​​The selection counter updates to reflect all rows being selected and action can be taken across the whole table.
​​
​​
​​
​​Multi Select + Horizontal Scroll 
  • ​​All functionality of the multi-select table.
  • ​​When scrolling to the right, the check box and first column remain sticky on the far left to make sure a user always maintains context for the row they are viewing. 
  • ​​A sticky column is used on the More Menu column to make sure that it is always visible and able to be actioned on.
  • ​​When a checkbox is selected, the More Menu column disappears. 
  • ​​
​​Multi Select + Expandable Row
  • ​​All functionality of the multi-select table above combined with all functionality of the expandable row table above. 
  • ​​
​​
​​

​
​Atomic Model Identification

​​Tables are organisms. The cells and columns are molecules. 
​​

​
​Dos and Don'ts

​
​Do
​​Copy about a good thing. 
​​
​
​Don't
​​Copy about a bad thing. 
​​

​
​Content

​​Insert copy about a content requirements. 
​​

​
​Accessibility Requirements & Resources

​
​Accessibility:
  1. ​​Insert copy about accessibility requirements. 
  1. ​​Insert copy about accessibility requirements. 
  • ​​

​
​Mountaineer Design System Link

  • ​​

​
​Related Components

  • ​​Table Cell Types Molecule
  • ​​Table Column Molecule
​​
​​n'
​​