Tables are structured grids of information that help users understand large amounts of data.

Design and behaviour

When a user needs to understand, manipulate, or edit a group of information that is text-based and has the same content structure you use a Table component. Table’s main content can be of two main types: Normal content tables and file system content. Depending on the type of table’s content some options will be available when selecting one or more rows allowing the user to perform bulk options. As well, if 2 or more items are selected a row, a new row will appear under the header of the table allowing to select all the avaiable items on the table even if it has pagination. Tables can have a breadcrumbs row before the table header if the table type allows folder / files navigation. In that case too a first folder with two dots allows the user go back to the parent folder.

Normal content table design and behaviour

They can have two rows of items before the table header. On the first you can have a title on the top left (optional) and dropdown filters on the right (optional) On second you can have a Search box (Optional) on the left, and toolbar icons (optional) on the right. You can choose between an Add toolbar icon or a more explicit Call to Action button on the right. In case you have toolbar icons and a CTA, please, place your CTA as the latest element of the row. When the user scrolls and reach the header of the table, this element will remain sticked to the main header while scrolling so the user always know what kind of data is seeing on the current table. On scroll up the subheader will appear. To understand better this behaviour please interact with the following tables

Theme customization

You can customize some table styles using the following css variables