Table states

Basic rules for table states ​

When a message with a loading or error state appears, it should have a margin-top: 40px. This prevents the message from "sticking" to the table header when the user changes the viewport size.

Basic rules for table states

	First screen	Scrolling the page
Example with ProgressBar
Example with Spin

Skeleton ​

Display the structure of the page and data using the Skeleton when loading data for the first time. Show the skeleton for the first three-five rows, not the entire table.

Show skeleton while:

• Initial page loading
• Initial data loading
• New data uploading

ProgressBar ​

If data gathering takes more than 1 minute, use the ProgressBar to indicate that data is being collected. The progress bar should be sticky and centered relative to the scrolling screen.

When scrolling the table, fix the progress bar to the table header while keeping it centered relative to the user's viewport.

Loading ​

Use Spin when filtering, sorting, or searching data. If data loading is fast, skip this state.

Use it when:

• Filtering vast data volumes in a table
• Sorting a large amount of data in a table
• Moving user to another page
• Performing other data operations that don’t require a long wait
• Searching in the table (if possible, display the search query)

The loading message should be sticky and centered relative to the scrolling screen.

Empty table ​

The table can be empty due to deleted or unavailable data. Use the empty state when:

• The table is empty and needs data connection
• The user deleted all data from the table

Refer to Empty page pattern for more information.

No data ​

Show this message when:

• There is no data for some reason
• The data cannot be displayed for some reason

Nothing found ​

Display this state when the user has been searching or applying a filter in the table, and nothing is found.

Include a control, such as a "Clear Filters" button, to help the user correct the situation.

Something went wrong ​

Show this state when there is an error in the product on the backend, preventing data display. Display it when:

• An error occurs during table loading
• An error occurs while the user is working with the table

Examples of "Something went wrong" state

	Appearance example
We are aware of the problem, and fixing it
We don't know about the problem yet

Message text ​

• Title: Indicate the essence of the current situation
• Description: Explain what the user needs to do to change the situation
• If possible, suggest an action (button or link) to help the user change the situation

Refer to guides like WidgetEmpty and Global errors.

Table header ​

Keep the header for all empty states of the table, including sorting icons.

Table cell states ​

No data in cell ​

• Show the n/a text in the secondary text color (--text-secondary token).
• Display a tooltip explaining that the data isn’t available and why.

Data uploading in cell ​

When loading content in one or more cells, show the Spin of XS size.

Error in cell ​

Display a Warning icon with M size and use the --icon-primary-warning token for color. Always show a tooltip on hover explaining that something went wrong.

Cell is blocked ​

A cell may be blocked due to a limit or the need to take action to unlock the data.

• Use the Lock icon with M size and the --icon-secondary-neutral token for color.
• Always show a tooltip on hover explaining why the cell is blocked and, if possible, how to resolve it.