Overview & Usage
A table organizes data into rows (of items) and columns (of item attributes). Tables make structured data easy to scan, compare, sort, and analyze. Tables can be embedded into other design patterns. Tables are familiar to users and often the correct choice for structured data, but be careful not to overuse tables. Here are some examples of when not to use a table:
The table pattern should NOT be used when:
- Do users need to find patterns within a data set? Consider a line chart or a bar chart.
- Are users going to browse the data set without knowing exactly what to look for? Consider using a Data List.
Conceptual Design + Description
- Empty State: If no items exist in the table, display the empty state pattern. All features within the data toolbar will be disabled in this state.
- Data Toolbar Pattern: includes a number of components that work in conjunction: simple filter and simple actions (table actions)
- Sorting: Organize data by sorting one or more columns. All columns are sortable, simply click on the column header to sort via info found in that column.
- Active column will be highlighted with a blue line above the column and blue text. The carat indicates the direction of the sort, in this case from ascending order alphabetically.
- Select Row(s): Checkboxes allow the user to select multiple rows in order to perform bulk actions on those rows simultaneously.
- Selecting row(s) activates the checkbox and highlights the row. This highlight is more prominent than the highlight for hovering over a row.
- Hover State: When the user hovers over a row, that row will be lightly highlighted and outlined. This helps the user to isolate the row, especially when clicking on items in the row.
- Inline Actions: Inline actions can be performed within a single row to manipulate the data. The most common 1-2 (max) actions are shown as a button with additional actions, if any, available via a dropdown menu. These actions should use words rather than icons for clarity.
- Bulk Item Actions: Bulk item actions buttons are activated when row(s) are selected. Some actions are available as both a table action and a bulk item action. The number of rows selected is shown near the table action buttons
- Filtering: User can see results of simple filters here. Results include the item and results count, list of active filters (with ability to remove individual filters), and button to clear all filters.
- Select All Rows: Selecting the checkbox in the header row selects all rows on the page. The total number of rows selected is shown near the table action buttons
- Row Highlight (Recommended but optional to turn off): If the table uses alternating row shading, the hover state should be distinguishable from the shading colors used.
What’s not covered in the current design:
- Column customization
- Simple Sort
- Ability to expand and collapse rows to give user the option to view more details on each item
Please let us know if we are missing any other features in this particular pattern.
- The visual design will be created and examples in context will be provided.
- Additional stories have been added to the backlog for more features, such as pagination, expand/collapse rows, simple sort, customizable columns.
Feel free tell us what you like and what you think we could improve upon. Any and all feedback will be helpful with helping us to refine the design in the next iteration. Thank you!
Older wiki proposal for Table including jquery example:
Basic bootstrap current example:
Usability Testing results done on old proposal:
Current Simple Filter Design:
Current Simple Sort Design:
Current Simple Actions Design:
Blank Slate Design: