Used to display tabular data in a way that is easy to scan and compare. Tables can include bar charts, icons, buttons, pills, and other components that provide specific actions related to the displayed information.

They are usually used together with the Pagination component, when the set of data exceeds the max-height of the parent component.

Anatomy

Tables are essentially composed by a heading and lines of data (rows), which can contain the following subcomponents:

A. Heading

  1. Header
  2. Sorting icon (optional)

B. Row 3. Checkbox (optional) 4. Cell(can contain an image, icon, pill, label or number) 5. Actions (optional)

https://invis.io/R8YKZGPUFKY#/430009033_Table_Anatomy

Table variations

Table subcomponents

Headings & Cells

https://invis.io/8YZ50C8695K#/435070041_Table_-_Cell_-_Header_Anatomy

Long Labels & Multiple Columns

https://invis.io/R9Z0IBP34PD#/433926038_Table_-_Long_Labels