The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

info
Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.
close
SUSE product brand logotype

Tables

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


linkDescription

  • 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
content_copy