Tables

Tables display information in a grid-like format of rows and columns.

Specifications

Typography

ClassFont SizeFont WeightFont ColorText Transform
HeaderBody-3/ 22dpregular/ 400 Gray 10 White
#171c1e
#fff
Title Case
RowBody-3/ 22dpregular/ 400 Gray 10 White
#171c1e
#fff
None
Link TextBody-3/ 22dpregular/ 400 Blue Light Highlight Blue
#217cbb
#019aeb
Underline on hover

Alignment

Follow these rules, when aligning alphanumeric and numeric input types in a column:

  • Numerical data - right-aligned
  • Textual data - left-aligned
  • Align headers with their respective data
  • Center-align images, components, icons, and buttons when in their own columns.

Background Color

ClassColor
Header Gray Light Gray 8
#f1f1f6
#464b52
List Table Row White Gray 10
#ffffff
#171c1e
Selected Row Blue Pale Highlight Blue
#dcedf9
#019aeb
outline stroke Highlight Blue Highlight Blue
#019aeb
#019aeb
Row Hover Blue Pale Highlight Blue
#dcedf9
#019aeb
Data Table Read-Only Row Gray 0 Gray 10
#e0e1e9
#171c1e
Data Table Editable Row White Gray 10
#ffffff
#171c1e

Note: Row striping is not recommended. It should be used as a last resort to increase contrast between data rows. If you need to use row striping make sure to retain appropriate contrast ratios (Accessibility)

  • Width: A table can have a set static width or dynamically fill the width of a page or screen. It is important to make sure that the cells have the appropriate settings to scale accordingly as well.
  • Height: The height of a table cell is inherited from the List Item size.
  • Dividers: The tables component comes with the option to show or hide dividers depending on preference and/or product needs.
  • Scrollable: Tables can be scrollable just like lists if they are at a fixed size. For more information, see List Scrolling.
  • stacking: - In some instances, it may be desirable to display a large amount of information in a limited horizontal space, such as a mobile phone. The compact display option for tables converts each row into a card, complete with its own header column. This is designed to scroll infinitely if needed.

Types

Horizontal Filled Layout

Tables Horizontal

Compact Layout (Row Cards)

Tables Row - Compact Layout

Editorial

Headers

  • Should be informative and descriptive.
  • Should be concise and scannable.
  • Should include units of measurement symbols so they aren’t repeated throughout the columns.
  • Should use sentence case (first word capitalized, rest lowercase)

Column content

  • Should be concise and scannable.
  • Shouldn’t include units of measurement symbols (put those symbols in the headers)
  • Should use sentence case (first word capitalized, rest lowercase)

Decimals

  • Keep decimals consistent. For example, don’t use 3 decimals in one row and 2 in others.