Table

Component Status

Design documented

React documented

Design

Up to date

React

Up to date

Flutter

n/a

Introduction

Data tables are used to organize and display data efficiently. The data table component allows for customization with additional functionality, as needed by your product’s users.

The data table’s features are ideal for organizing and displaying data in a UI. The column headers can sort data in ascending or descending order and single or batch actions can be taken in rows.

The data table toolbar gives a location for primary buttons, search, filtering, table display settings, and other utilities.

When to use

  • To organize and display data.
  • If your user must navigate to a specific piece of data to complete a task.
  • Displaying all of a user’s resources.

When not to use

  • When a more complex display of the data or interactions are required.
  • As a replacement for a spreadsheet application.

Releated Components & Guidelines