Tables

Table composition refers to the arrangement and structure of a table, which plays a significant role in organising and presenting information effectively. It involves carefully selecting and placing the elements listed below to create a cohesive and understandable layout.

Components used:

• Empty state
• Pagination
• Filtering controls

Features:

• Full typescript typing
• Sort by clicking on table headers
• Loading spinner when data being fetched
• Queries are debounced
• Inline scrolling

Show codeCopy code

Display a loading spinner above the table whenever the table data changes, e.g. when sorting columns, paginating and filtering. The loading spinner should disappear when the table data has finished loading.

• When implementing the Filtering pattern, use the FilterBar's loading prop for all these scenarios.
• When a filtering experience isn't required, utilise the 2rem/32px gap between the page header area and the table to conditionally display a small LoadingSpinner without causing layout shifts. See example below.

Show codeCopy code

On the table, if you search or filter for something and there are no results, an Empty state should be displayed which replaces the table’s body content. This practice avoids having a screen reader read the entire table before getting to the message that there is no content in the table.

View the Empty state component for further information.

Show codeCopy code

A pagination component is used to split a large dataset into multiple pages within a table. It enables users to navigate through these pages and customise the number of items they want to view per page. The component optimises data loading time and improves overall application performance. Pagination should always be placed below the table.

View the Pagination guide for further information.

Show codeCopy code

Filters allow users to customise the display of information in an associated data-table. By selecting desired parameters in the available filter input table returns a modified view, making visible only the records meeting the user-determined criteria.

Refer to the Filtering pattern for more extensive code examples and concepts.

To compose the Bulk actions pattern, use the table component's Selectable rows feature along with the Bulk action bar component.

Select one or multiple of the table rows below to explore this pattern in action.

Show codeCopy code

In some cases, e.g. when there's only one bulk action that also takes the user to a new UI – then a bulk action bar component may not be needed. Instead, consider having a primary button to represent the bulk action placed below the table.

NOTE: The example below is a simple demonstration and does not navigate to a new UI after actioning.

Show codeCopy code