Child pages
  • Tables
Skip to end of metadata
Go to start of metadata

The title that introduces the table has been written and the counter with the total items displayed has been also set.

Creating new items is possible through a button, the main call to action on the section. Since we don't want the user to loose context to the task, we'll let him fill the needed form fields in a modal. Secondary actions related to the table (such as exporting its values to other formats) should be next to the primary button, with a neutral appearance (default).

When a table is long enough and you want to give the user the option to filter its displayed rows, place a right-pulled search input aligned to the table actions' buttons.


Creating the ideal interaction through the the table depends on the carefully chosen type (CSS classes) considering the contents included. 

— striped — when you have tables with more than 15 rows to display, use the striped styled ones to promote an easier reading experience (from the users' perspective) comparing a lot of data at the same time. 

— hover — when you can see further details about an item, the hover state gives a clue about that property; double clicking on the row should open its details dedicated page.

— hover with actions — when each item has actions that interfere with its own properties and presence on the table.

— faded — when the content of the table cells exceeds its widths and you don't want it to appear wrapped in multiple lines of text (default), so there's a fading effect on the cell at its right corner that hides further content. Use this table type on lists of documents and users, for example.


The table cells' content follows some styleguide rules, such as:

— small details about an item (the username associated with the user's full name, a filesize…) can be attached to it through the "small" tag.

— the buttons placed inside table cells should be at its smallest size ("xs").

— icon button only tasks should have the class "btn-icon" on the link/button and the icon empty tag creating the icon inside it. Use them when your items' possible actions are simple and easy to identify through an icon only link/button (CRUD).

— use dropdowns to set a value for that item.

— when deleting an item is the only or the primary action to have, place an "icon-cancel-squared" on the right side of the row (for example, when you're managing users or documents on a table and can remove them). 

— when there's more than one secondary actions the user can apply to the item, those appear on a dropdown right-pulled on the row (without icons due to specific and contextual action that cannot always be illustrated); the options for that item should always appear, even if the user cannot select some of them at the moment (disabled state).

— when the user can add an item to the table, its last row should be inside the "table footer". If only a since field is required, this placeholder is replaced with a text input.

— warning and danger colors should only be used for contextual feedback about some tasks (errors) or to some statuses through labels.

— try not to exceed 4 columns on the table. Detailed data and contextual to the item, not required for values comparisions should not be displayed. 

  • No labels