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.

Usage
Code
Interactions

Types


Resource table

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.

Data table

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.

Table as a list

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 -

Option list

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

Description list

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.

Sizes

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




Standard table


Compressed table


Tight table

This size is typically suited for information-dense data tables.


Usage


Table background


Default Card

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

Table on a default card
Flat card

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 is used instead of the default card.

Table on a flat card

Nested table

With column extension
With nested card

Table header

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

Resource and Data table

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

Resource and data table
Table as a list

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.

Table as a list

Exception in a row

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.

Exception in a row

Custom cell

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.

Custom cell

Alignment in table cells

Center aligned

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.

Center aligned
Top aligned

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.

Top aligned

Column actions

Show/Hide columns

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

Show/Hide columns
Sorting a column
Sorting a column

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





Filtering a column

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

Filtering a column
Reordering a column

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

Reordering a column

Pinned Column(s)

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.

Selection

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 -

No items selected - the default state

No items selected
A few items selected

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

A few items selected
All items on the page selected

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

All items on the page selected
All items selected

An option to clear selection is presented in the header.

All items selected

Sorting

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.

All items selected

Pagination vs Infinite Scroll

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.

Filtering


1. When filters are frequently 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.

When filters are frequently used
2. When filters are sparingly used

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

When filters are sparingly used

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.

Panel can be closed in this case