Table

Tables enable users to accomplish a task by finding records of interest, then take action against them. They present structured data in a grid, with columns and rows to aid readability, scanability, and show the meaning of the data.

Controls
Table controls should live above the table and facilitate a user's ability to locate and take actions against records of interest. A controls section may contain search and filter controls, as well as action controls such as batch applying settings or data export.

Table header
Contain table header cells concisely labeling the column's contents. Column headers may be enhanced by enabling sorting.

Table body
Consists of rows allowing users to scan, read and take action on the data. Rows may be enhanced by enabling actions such as record selection and navigation to a record's detailed view.

Table footer
Optional. Used for presenting summary counts, sums, averages, and other aggregations.

Users interacting with a Table are trying to accomplish one of the following types of tasks. They are not, however, trying to do all of these tasks at once. Keeping "what is the user setting out to accompish?" at the center of our mindset helps guide which table features to include and, more importantly, exclude when we add a Table to our interfaces.

Often, a user's task is to find and take action against a specific record. Whether it be finding a customer's record to review their chat history, tracking a particular order's status, etc., the user experience objective is to enable a user to locate that record as quickly as possible.

• Use Search. This is often the quickest, most efficient method for users to find a record of interest.
• As backup, use sortable columns coupled with paginated results. This combination provides users with the knowledge of alpha-numeric range, enabling an educated guess as to the record's location in the sort.

When a user is looking to focus on a group of records sharing similar characteristics, providing thoughtful filter controls allows for incremental reduction of the table's result set.

• Provide filter controls.
• Filter control input types should be chosen to best fit the data type and breadth of values.

Sometimes users are "checking up on things" or do not have specific records in mind. In this case, they are assessing the state of their records and the user experience objective is to facilitate the scanning of records to identify potential outliers or records which the user is unaware need attention or action.

• Use infinite scroll. In this scenario, infinite scroll removes friction, allowing users to browse records effortlessly.
• Consider adding column data types such as status indicators or meters which call attention to records needing attention.

Distinct from the user objectives above, tables containing data for analytical purposes deserve distinct treatments as well. While tables are useful for providing initial "discovery" type insights, such as identifying available attributes and ranges of values, purpose built tools are often a better choice for conducting in depth analysis. In this scenario, a table's design should be optimized for assembling the data set for analysis and easy portability of that data into the user's preferred analytical tool.

• Provide filter controls.
• Filter control input types should be chosen to best fit the data type and breadth of values.
• Provide export capability for users to consume the data in their analytical tool of choice.
• Provide aggregate measures in the table footer.
• Organize table columns to group like elements and to keep most important elements to the left.

Column headers behave as a button and perform the sort action. A caret icon indicates the directionality and to which column the sort is currently applied.

Columns can be resized if a DataTable has the resizeable prop applied. Column resizing allows the user to change the width of the header columns. Each column can be resized by dragging the right side of its header to the left or to the right to expand the column.

Complimenatary elements such as search or filters should be guided by the task the user is setting out to accomplish.

• Looking for a specific record? --> Search.
• Trying to narrow records down to a set of shared characteristics? --> Filter.
• Not quite certain for what I am looking, but I know its general characteristics? --> Filter.

See Filtering for greater detail.

Clicking on a table row takes the user to a context where the most prominent heading matches the primary column text. This context could either be a page or a modal. In this example, clicking on a table row navigates to a detail page.

Checkboxes allow for selection of multiple records, which then may apply batch actions via action control buttons or menus.

With long sets of data, pagination can help to create a more efficient means of navigating to a specific item or range of items.

Fixing or pinning header rows, columns, or footers allow users to track and maintain context across long and wide data sets.

Should be guided by the task the user is setting out to accomplish.

• Browsing? --> Infinite Scroll
  • Perhaps I am reviewing a customer's account history. I am not looking for a particular record, rather I am in scanning mode, trying to get a sense of the volume and types of interaction with a customer over time. Infinite Scroll creates a nice, frictionless experirence for this to occur.
• Searching for a specific record? --> It depends.
  • Do you have a good search experience? --> Infinite Scroll
  • Do you have a performant API?
  • Do you require page reloads?
  • Is your data structured?
• Do rows have many interactive elements? --> Pagination
  • Be mindful of keyboard users.