Table

Tables are used for arranging information in a tabular format by laying out resource items, displaying data heavily based on numbers, or a list of homogenous items in their simplest form.

A table of resources where a resource is an object in itself and has a detailed view linked to it.

Usually, there is only one resource table on a page. Think of a resource as - a campaign, a measure, a workspace, etc.

To reduce noise, a resource table doesn’t have column dividers.

A data table is only meant for information consumption. It can occasionally contain minor actions such as copy, edit, remove, etc. Since the data can be dense, it can also have column dividers for subtle distinctions among columns. This way a data table also resembles spreadsheet-like tools which users are already familiar with.

If in some rare cases the data in a cell needs to be edited, it is recommended to use inline editable fields in those cases.

The table component can also be used to generate a list that has a simple structure than a table. A list is a subset of a table in a way that it does not contain the header row (and hence no columns). It comes in two options -

A list of options where an option is an entity that a user can select/pick.

A list of items containing simple information which is meant for consumption only.

It can occasionally contain minor actions such as copy, edit, remove, etc.

There are 3 types of sizes available for use which differ in the vertical padding and header row height -

This size is typically suited for information-dense data tables

The table is typically laid out on the default card, which helps in differentiating it from the background gray color.

There can be cases when the table has to be used on a side sheet or a full-screen modal where the background is white. In that case, flat card should be used instead of the default card.

The position of the header is fixed at the top so that the rows scroll between the header and footer.

The headers for these tables have a ‘Showing x items’ label and optional ‘Search’ input, filtering options.

Checkbox precedes the ‘Showing x items’ label in the header row when using the table as a list since it doesn’t have the column header row. As there are no columns, hence there is no option to Sort. In that case, use the Search + Sort variant of the header where there is a dropdown for sorting following the search input.

To indicate a row is not interactive, the opacity of the row should be reduced to 40%.

Disabled state is kept at 40% opacity since it is closest to the disabled state of other components.

An exception may be added to a specific row such as a failure or a warning. In that case, use the Subtle badge component and resize the list to have 8px padding from the bottom.

This behavior is not available out of the box and hence a custom cell should be used to design and build this.

Standard table cells cover the most frequent use cases. For the other use cases, a custom cell can be created by using the Emply Cell component. Minimum padding of 12px from either side of the empty cell is maintained.

Content in table cells should be aligned to the center of the row in cases where the height of content is similar in cells across the same row.

Content in table cells should be aligned to the top of the row in cases where the height of content is different in cells across the same row.

This action appears in the extreme right just above the header row.

Another way to offer column sorting is by clicking on the column name.

Although filters in a table are applied using dropdowns, there is a provision to apply filters in a specific column.

The cursor changes to Pointing Hand when hovering on a header cell indicating that the column can be picked and moved.

Pinned column divider is used to pin columns to the left so that they get fixed and do not scroll along with the rest of the columns. It is quite handy when the no. of columns is too many and all of them are not visible without scrolling. In that case, the pinning can help freeze the crucial columns in order to maintain the context.

On selection - Sort, Filters, and other actions disappear in lieu of Bulk Action(s). There can be different states and behaviors after selection is triggered -

When a selection is triggered, there is an option to provide actions related to the selection at the top right.

An option to select all the items across all pages is presented in the header.

An option to clear selection is presented in the header.

Table header remains fixed when scrolling so as to maintain the connection of the values in the cells with the column headers which helps easy understanding of data.

Use pagination over infinite scroll so that the user can navigate to an item’s detail page and return back to the same page. Retaining the scroll position in a long list of items can be resource-intensive and hence infinite scroll is avoided and Pagination is used.

Since the filters are frequently used, there is a dedicated fixed section alongside the table to apply those filters. The applied filters are added as chips just below the search bar to quickly enable/disable an already applied filter. Please note that there is no filtering option in the table itself.

In the case of 4 or fewer filters, all the filters are available in the table card for quick access.

In case the need arises to use more than 3 filters, the top 3 filters are available inside the table card as they should be. There is an additional button to add more filters. When clicked, a side panel appears in the right just like the case where filters are frequently used.

The only difference is that this panel can be closed/opened on demand unlike case 1.

Textual data is easier to read when aligned to the left.

Note: For cases where the content can span across multiple lines( description, subtitle, etc.), align the content at the top for better readability.

Right align
Numerical data indicating size or quantity of an entity (such as count, score, percent, etc) is easier to read and compare when aligned to the right.

Note: In case of decimal numbers, use the same number of decimal places( append/ remove trailing zeros after decimal place if needed) and align on the decimal point.

Left align
Numerical data indicating non-quantitative data (such as zip-code, id, version number, etc) should align to the left.