Tables

Table is a component used to display data in the structure of rows and columns. It organises information in a way that is easy to scan.

Anatomy

Table consists of the following content blocks:
  • Toolbar
  • Sub-Toolbar
  • Sorting Header
  • List of Items

Toolbar

A container reserved for general information and actions . Common examples are table title, settings and search bars.

It can either stay sticky to the top of the page or scroll away together with content.

Sub Toolbar

A container which holds content related to toolbar actions. Its primary purpose is to store an applied filters list.

Sorting Header

A container which displays column headers. Can also contain a bulk selection checkbox.

List of Items

Main content of the table displayed in rows.

Be aware that tables can display large data sets of different kinds. There are two ways to load and display table items:


A. Pagination. Splits up large amounts of data across multiple pages. Gives user the control to navigate between these pages.

Use pagination:
  1. When users are unlikely to need to see all the content and the first page is enough to make a decision.
  2. When users operate with data chunks instead of a full list.
  3. When you want to inform the user about the total number of results. Users will be able to estimate how much time it’ll take to find what they’re actually looking for.
  4. When you want users to be able to keep a mental location of the item. Pagination allows users to remember the rough location of an item and navigate back easier.


B. Infinite scroll. Loads data progressively. First 100 items load by default and the rest will load on demand when the user scrolls down the list.

Use infinite scroll:
  1. When you want to display all items without interruption.
  2. When users aren’t searching for something specific but are exploring data instead.
  3. When users operate either with single items or a full list.

Features

Table can contain features that let users manipulate data and its display. Common examples are sorting, filters and search, filter saving, single and bulk actions. All of these are optional.

Sorting

Table columns can be sorted in ascending or descending order. Column header acts as a sorting control.

Arrow icon indicates sorted column and ordered list direction. Each column has three states:

Filters and Search

Filter and search allows users to trim down visible list items. It helps users to find an item they are looking for, or see available options within a certain set of criteria.

These actions have a reserved space in the toolbar. This space extends to full toolbar width if the table doesn't have a title.
Filter actions can use a set of various elements i.e. dropdown, multi select, checkbox, radio button etc. The way to organise these elements depends on the number of filters needed.

Single Filter

Place a single filter next to a search. Make sure it floats to the left when filter and search container takes the full toolbar width. It will distribute user attention by using a white space left after the table title is removed.

It is possible to change the order of components used for filter and search actions. Yet, we recommend to keep search on the right side of the container. It will guarantee a consistent position of search across different table setups

Multiple Filters

Using multiple filters introduces a few limitations. Toolbar can contain no more than 3 components used for filter actions. This is due to limited horizontal space on smaller resolution screens.

Components should fit in one line without loss of content clarity. Make sure there's enough room to display filters either with labels or with a clear default value.

Always check your designs in other languages. Short names we pick in english may not be short in other languages.

If there's more than 3 filters, transfer them outside to a side panel. Add a button to a toolbar to call out this panel.

Constructing Filters Panel

Use the following components to construct filters panel:
  • <SidePanel/> with sticky header and footer to store the filters
  • <Accordion/> to list down all available filter categories

There's no limit to the number of filters in the side panel. Items that exceed the content area will scroll between the sticky header & footer.


Keep spacing rules consistent inside <Accordion/> no matter which component displays filter options.


Filter category can have any number of options to choose from. Allow to expand one filter category at a time. This will minimise the amount of scrolling required by the user.


Give the user indication that filters have been successfully applied:

  1. Indicate how many items selected in each filter category.

2.  Display the total count of applied filters. Give an option to clear them all at once.

3.  Indicate active filters in a table itself. Display them as a list of tags in a sub-toolbar area.

Applied Filters List

Limit the number of visible tags so it fits in one line. It will help to keep the height of table header minimal.

<TagList/> by default limits the number of visible tags to 3. This number can be changed. If the actual list surpasses the restricted number of shown tags, an option to expand the full list is given.

Filter Saving

Gives an option to save active filters if combinations of them are used often. Group this action together with an active filters list. It will communicate clearly what will be saved.

Each saved filter needs a unique name. Once save action is clicked, prompt a modal asking the user to give a name for the filter combination. A filter cannot be saved without a name.


User can apply saved filters from a dropdown in the toolbar. This dropdown should be displayed only if there's at least one filter saved.


“Save Filter” button behaves as a toggle from saved to unsaved state. Inform users about a destructive action they’re making and ask for a confirmation.

Single Actions

Single actions are actions that apply for one row at a time. Display these actions in each row separately using <TableActionCell/>.

Action cell serves as the last column of a table. It can contain the main action displayed as a button and secondary actions next to it. Secondary actions can be visible or hidden. Visible actions are displayed in the form of icon buttons. Hidden actions are shown inside a popover menu.

Bulk Actions

Bulk actions allows users to apply a function on multiple items at once. For example, export or delete, assign items to categories, etc. Actions appear in the toolbar when the user selects at least one row from the table.

Bulk actions consist of two content blocks separated by divider:
  1. Selected items count
  2. Actions list

Bulk actions cannot co-exist together with filters. They replace one another in the toolbar area. To exit “bulk action mode”, the user has to deselect the items.


List down the actions using buttons with descriptive labels. This will help to explain the action’s purpose.


Display up to 3 actions in a toolbar at once. This number still fits on smaller resolution screens where horizontal space is limited. If there are more than 3 actions, hide secondary actions in a popover menu. This way we can keep the labels that give users an explanation for an action.


Bulk action can be applied to all table items. “All items” can be interpreted in two ways:
  • Items loaded in a browser (DOM)
  • All existing items (loaded + ones not loaded yet)

You can choose to use bulk selection that marks items loaded in a browser only. If so, add an option to select full list (loaded & not).


Please note that selecting all existing items might take time. The action requires accessing the server, which means a loader might appear.

Relevant Components

Component Name
Link
<Table/>
<TableToolbar/>
<TableActionCell/>
<SidePanel/>
<Accordion/>
<TagList/>
<Pagination/>

Author

Justina Ramanauskaitė
UX Designer at Components Group

If you would like more topics to be covered in this article, have case studies that you would like to share or ideas for future articles then please write to #wix-style-articles Slack channel.
IN THIS ARTICLE