Skip to main content

Table

The Table serves to distribute information in rows and columns, facilitating the visualization and understanding of the data.

The type of information can vary depending on the context, but it should be used for textual data, numbers and some control components.

To show more complex information lists and elaborate interactions, the List component should be used.

Heading​

Every table must have a header that names each column. In general, these titles work as a mechanism for sorting the table in ascending, descending or no sorting at all.

The table sort mechanism works by clicking on the headings of each column, toggling between original order > ascending order > descending order.

Rows​

Table items must have at least two columns. Otherwise, lists must be used. Table items are separated by a line and can use the "zebrado" style to make the data easier to read.

The footer can have additional information, such as the total number of items in the query, pagination, reload button, or some note about the information displayed.

Use the Pagination component to assemble the footer as needed.

Good habits​

  • To display numeric values, the alignment of values must be to the right of the column
  • Very long texts or data can be abbreviated, as long as the abbreviation is known by the public and does not compromise the understanding of the information
  • Header labels should be short but descriptive enough to understand the information. Keep one or two terms at most
  • The main column must be named according to the entity. For example: Lead, Conversion Channels, Automation Flows, among others.
  • Empty state of a cell: Use hyphen (-) to mark an empty cell with no information. When the value exists, but is zeroed, use the numeral 0 (zero). It is possible to use both states in the same table

Feedback​