Tables

Tables are used to display large amounts of data in rows and columns. They are useful to compare and manipulate data efficiently.

Wrap tables inside cards to provide the users with context by adding card headers as well as filters and global actions.
Rows always change the background color on hover. This improves readability.
The main actions on a table such as filtering, sorting, deleting, etc. happen in the table's heading. Use dropdowns in tables to provide more options on rows if the space is limited.
In certain scenarios, you may require to provide quick and positive actions by adding actionable icons inside each row. Make sure you never include disruptive actions in quick action like "delete" and never exceed more than two quick actions to avoid overwhelming the user with too many options available.

Table types

How to use this element

Example

Code

Report an issue or share an idea

Include screenshot of current page

moveclose

Thank you for helping us improve EOS.