Skip to main content


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



Class Font Size Font Weight Font Color Text Transform
Header Body-1/ 14px SemiBold/ 600 Gray 8 Gray 0
Title Case
Row Body-1/ 14px SemiBold/ 600 Trimble Gray White
Link Text Body-1/14px SemiBold/ 600 Blue Light Highlight Blue
Underline on hover


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.


Class Height Min Width
Header Default 48px 16px
Header Condensed 32px 16px
Row Default 48px 16px
Row Condensed 32px 16px

Background Color

Class Color
Header Gray Light Gray 8
List Table Row White Gray 10
Selected Row Blue Pale Highlight Blue
Row Hover Blue Pale Highlight Blue
Data Table Read-Only Row Gray 0 Gray 10
Data Table Editable Row White Gray 10

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.
  • Mobile 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.


Horizontal Filled Layout

Tables Horizontal

Compact Mobile Layout (Row Cards)

Tables Row



  • 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)


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