Tables are structured grids of information that help users make sense of potentially large amounts of data.
When a user needs to understand, manipulate, or edit a group of information that is text-based and has the same content structure.
Table header capitalization is ALL CAPS
To allow a user to focus on their task at hand, tables consist of 3 modes: Default mode, Batch Action mode, and Edit mode.
Table modes image
At a minimum, a table includes a header and rows of content. It may include sorting, filtering, grouping by category, selecting items, indicating status, customizing, editing, and pagination. These features are not necessarily mutually exclusive; for example, a table may both be sortable and also allow for item selection.
The table itself should have a minimum width, but the layout should be fluid, with the width growing to the entire space allocated. So that tables can behave responsively, each column may have a minimum width as well.
This is the basic view of the table. Above the column headers, a 45px tall bar remains docked. It contains any filter/find capabilities as well as controls for table settings, edit, print and export.
Settings may include adjusting the number of rows visible, showing and hiding columns, or changing the table type. Settings are retained upon return viewings of the same table.
TABLE SETTINGS USE A HORIZONTAL LAYOUT TO AVOID SCROLLING
Filter and Find
Live filtering/find is used to filter content as soon as the user makes a selection with a form control. When available, filter and find controls are placed on the left side of the table bar. There are 3 types of filter/find controls available:
- Simple filter (a dropdown menu that lets users choose a single category)
- Simple find (a text box that limits results shown based on what the user types)
- Complex filter control (combines multiple filters as well as find control into 1 popover menu)
Note: No more than one control should ever be present so if a simple filter and find are both available to the user, use the complex filter control to neatly tie them together.
Find only / Simple Filter only / Complex Filter or Filter + Find
FIND ONLY / SIMPLE FILTER ONLY / COMPLEX FILTER OR FILTER + FIND
When complex filters are applied, they display in the table bar. Each filter can be removed by clicking the x next to it, using the clear all control, or by editing the filter menu. If many filters are applied, a “more” treatment is used to keep the table neat.
EXAMPLE OF COMPLEX FILTERS APPLIED
Batch Action Mode
Batch Action mode allows the user to take action on one or multiple rows and is activated when box(es) are checked. Each selected rows receives a highlight treatment of #F3F8FE. Any table settings, filters or action buttons above the table hide temporarily with a dissolve transition due to the action buttons appearing. If overflow is needed due to space constraints, a More… menu button is used.
Note: In 99% of cases, buttons are always enabled. However, 2 edge cases have been identified. 1) As multiple items are checked, if any buttons don’t apply to all rows, they are disabled so the user can see that they have become unavailable for their selections. 2) In the extremely rare case that a table has no filters on the left and also no icons on the right, but does have batch actions, the table bar looks strange with nothing inside of it. In this case only, it’s okay to display batch actions by default. All buttons are disabled until a checkbox is selected.
Batch action mode is triggered by checking box(es)
BATCH ACTION MODE IS TRIGGERED BY CHECKING BOX(ES)
A user should be able to select all items on a page and apply actions to them all at once. If an item is de-selected, the master checkbox shows a dash. To make it clear to the user that select all applies only to the current page, a count appears to the right of the buttons with the total number of selected items.
Example of multiselect count and master checkbox
EXAMPLE OF MULTISELECT COUNT AND MASTER CHECKBOX
Success and Errors
Upon successful save, a toast confirmation appears, all items uncheck and the table is brought back to default mode. Occasionally upon save of many row edits, an error will occur. To help the user understand what happened, an error message is placed inline, unsuccessful rows remain checked, and the table remains in batch action mode.
Example of an inline error
EXAMPLE OF AN INLINE ERROR
Edit Mode can be enabled by clicking the pencil icon in the right side of the table bar. If multiple edit options are available, a popover menu can be used to choose the appropriate items to edit.
Save and Cancel never scroll away because the header is docked
SAVE AND CANCEL NEVER SCROLL AWAY BECAUSE THE HEADER IS DOCKED
Basic Table Attributes for All Modes:
All table content is left aligned, except for monetary amounts, which are right aligned. Monetary amounts should also be the right-most columns of the table (examples: totals, gross pay). Table headings should be aligned with the content they represent.
The table bar and headers should remain docked and all contents should scroll underneath them. This will make data more readable and allow actions to remain accessible while scrolling through table content.
All text and links in a table row are #404040. When a row is selected or hovered over, the background changes to light blue (#f3f8fe) and links show as the link color (#365ebf).
Rows can have 1 or 2 lines of text. Single-line rows are either standard (45px) or compact (30px). Tables inside of a Trowser should always be compact. Two-line rows are 48px high. Never mix row heights! It becomes hard to scan.
Top-aligning the content works better when the rows include just text, while center-aligning works better when the rows include controls (example: rows with buttons).
EXAMPLE OF STANDARD HEIGHT SINGLE-LINE ROWS
EXAMPLE OF COMPACT HEIGHT SINGLE-LINE ROWS
EXAMPLE OF TWO-LINE ROWS
Actions in a table row actions affect only that row, never other rows.
- Most of the row should link to the primary action, which leads to the detail view of the transaction / person / item. If there is no detail view, the primary action can be editing the entire row.
- The secondary actions should be the frequently used controls (e.g. selecting, reordering , or printing). Each secondary action should have a separate target from the primary action, which can be:
- Checkboxes to select a row: Tables with selectable rows contain a Checkbox in the left of each row. Additionally, a global Checkbox in the table header is used to quickly select or deselect all of the rows within the table.
- Drag-and-drop icons to change row order: Including a column with drag icons allows the user to change row order by dragging a row up and down. Always place the drag-and-drop icons in the left-most column of the table
- Either Buttons, Combo buttons, or Combo links in the right-most column of the row
- Text links or icon buttons wherever inside the row with your best judgement
An example of a table with a drag icon for each row so that user can change row order
EXAMPLE OF A TABLE WITH CHECKBOXES AND DRAG-AND-DROP ICONS, ALLOWING THE USE TO SELECT A ROW AND/OR TO CUSTOMIZE ROW ORDER
An example of reordering rows in a drag and drop table
AN EXAMPLE OF REORDERING ROWS IN A DRAG AND DROP TABLE
Clicking on a column Header sorts the table based on the data within – alphabetical, numeric, date, etc. Clicking on the Header again reverses the sort, ascending or descending. The column selected to sort the table is displayed with a darker visual background and an upward/downward arrow attached to the end of the header name.
A Table that contains more columns than can be displayed within the available width for the table can scroll horizontally. When scrolling a table horizontally, the first and/or last columns may remain fixed so that they are still accessible as the table is being scrolled.
TABLE WITH HORIZONTAL SCROLL
Table rows can also be grouped into distinct categories that can be expanded and collapsed. Categories appear as row headers within the table, with a unique visual treatment and the ability to be expanded or collapsed.
Clicking the category header within the table toggles between the category’s expanded or collapsed state. When expanded, the rows corresponding to the category are displayed. Alternatively, when collapsed, the corresponding rows are hidden. Multiple categories may be expanded at a time.
- Rows are 44 px tall.
- Collapsible row headers are gray #f4f5f8.
- Top shadows are 4 px deep.
- Amounts should be aligned to the right.
A Table may also indicate status via a Status Indicator that appears within the Table rows. Status Indicators can help the user identify which rows may require special attention. Status indicators identify which customers have overdue (red) and paid (green) invoices.
EXAMPLE OF STATUS INDICATORS
Tables may also include pagination, though it is not required. If pagination is supported, users may select how many results they’d like to see per page in the settings area.
A total row calculates and shows the total of each applicable column (e.g. Balance, Rates). If a total row is included, place it at the bottom of the table.
EXAMPLE OF TABLE WITH TOTAL ROW
For our tables to work appropriately when presented on smaller form factors, we have 3 layout options:
- Stacked formatted list
- Locked first column scrolling table
- Regularly scrolling table
In all cases that used popovers in tables (such as settings, filters, etc), we use a drawer. Sorting options are also inside the drawer.
Transaction tables, aka row edit mode has 2 options available. 1 option is to open the editable fields in a drawer. The second is to expand the items on screen if there are very few fields to display.
Explore the table component to view all the possible configurations.