Table

Left align text and qualitative numbers, including zip or postal codes and phone numbers.

Right align quantitative numbers including money, quantities, measures, and percentages unless they are in the first column of the table. Align numbers to their decimal for readability.

The sorting feature resides within the action menu. Once the action menu is triggered, sort can be applied in either ascending or descending order. Sort functionality can be enabled on one, multiple, or all columns within the table.

A sticky header can clarify each column’s context when a table consists of more rows than can be shown within a fixed height, and vertical scroll is required to view the entire dataset.

Users can pin columns of a table component. Enabling a pinned column ensures that it, and all columns that precede it, will remain in view within the defined width of the table as users scroll horizontally. Any column can be pinned, but it’s most common to pin either the column to the left or the column to the right. When a column that is not the left or the right one is pinned, it automatically pins all columns to the left side of it. An elevation effect gives pinned ones height over unpinned ones.

Columns are pinned to the left when there are more columns that can be shown within a fixed width. Users pin columns to the left for various purposes, such as needing a more visible identifier, creating groups, categorizing or organizing data.

Users can pin columns to the right when there is a demand for data comparison or providing visibility to results. Columns presenting row actions are commonly placed on the right side and display buttons. This facilitates actions such as editing, deleting, viewing details, and others.

If there is a column consisting of an overflow action menu, that column is programmatically pinned at the end of the table in the UI.

Expandable rows are used to provide additional information that is not visible in the table’s default rest view. Upon selection, the row expands to fill the width of the table and, if necessary, the expanded row’s content can be further accessed by scrolling.

Note that loading data may occur at the moment the row is expanded. In this case, speak with your engineering team about how your table will retrieve and display data. If there is a wait time of three seconds or more, use a small loading indicator as a placeholder to let users know that their content is loading.

Supported content within the expanded section is limited to text in grid or list form.

Search capabilities are available for tables using an embedded search input. As a user types into the input, the table updates to display full rows containing matches to the search query. If no results match the query, show a “no results” message in the body of the table with a recommendation on a follow up action the user can take (see empty state pattern documentation).

The filter inquiries are applied per column. As a user types into the input, the table updates to display full rows containing matches to the column filter’s query. If your table is paginated, all matching results will appear beginning from the first page, regardless of which page the user was on when the search was submitted. The filter should be triggered after 0.1s of inactivity, during a stop or pause on typing. In case there are multiple filters applied, the table will display results that match all queries.