Tables display tabular data or compare data both vertically and horizontally. Tables rely on a combination of data elements that map to corresponding column objects.


If an API is in progress, or data is being fetched elsewhere, the loading and loadingMessage props are great tools for rendering an indeterminate Progress component within the Table.

Empty content

The Table component can determine whether the data provided is empty. If this occurs, you can customize a message that will display centered within the Table by passing the emptyContent prop.

Render functions

In the examples above, the columns object is composed with a simple string value for the renderer attribute. This is a basic approach to map your data to the corresponding columns. The data keys must match the column renderer values. However, you can customize the styling of the data within rows by passing functions to the column renderer. These functions must return React fragments.


If you intend for your Table to have interactive actions within the rows, you should enable the hoverHighlight prop.