Basic rules

Ensure that the message inside the table becomes sticky when scrolling and is centered relative to the parent table and the user's viewport. This ensures that the user always sees what's happening with the table without the need to scroll to the top.

Avoid changing the table height when the table state changes.

TIP

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.

Initial loading

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

Show skeleton during:

• Initial page loading
• Initial data loading
• Loading newly added data

TIP

Omit Pagination when loading the table for the first time.

Long loading

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.

Loading filtered or sorted data

Use SpinContainer when filtering, sorting, or searching data. If the loading process 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, continue displaying the search query)

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

Limited data

To hide the limited data, use a blurred overlay. On top of it, make sure to add a message explaining why the data is hidden and what needs to be done to remove the limit.

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.

TIP

Illustrations for these cases are usually unique, designed specifically for each case or product. You can find all illustrations we have in our library on Illustration.

No data

Show this message when:

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

Useful links

• Live example of this state in WidgetEmpty > NoData state
• Full list of illustrations

Nothing found

Display this state when the user has been searching or filtering data, and nothing was found.

TIP

In this state, save the active state of the sorted column.

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

Useful links

• Live example of this state in WidgetEmpty > Nothing found state
• Full list of illustrations

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

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

Useful links

• Live example of this state in WidgetEmpty > Error state
• Full list of illustrations

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 WidgetEmpty and Global errors guides.

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 --text-secondary color.
• Display a tooltip explaining that the data isn’t available and why.

Data loading in cell

TIP

Use Skeleton when loading the table for the first time.

When loading content in one or several cells, show a Spin of the 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.

TIP

Provide a control to reload the data right in the cell, if possible.

Cell is locked

A cell may be locked 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.

TIP

For all main table styles and principles, refer to DataTable. Find svg illustrations for different states and their names in WidgetEmpty.