Skip to main content

Tables

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

Specifications

Typography

Class Font Size Font Weight Font Color Text Transform
Header Body-1/ 14px SemiBold/ 600 Gray 8 Gray 0
#464b52
#e0e1e9
Title Case
Row Body-1/ 14px SemiBold/ 600 Trimble Gray White
#252a2e
#fff
None
Link Text Body-1/14px SemiBold/ 600 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.

Structure

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
#f1f1f6
#464b52
List Table Row White Gray 10
#ffffff
#171c1e
Selected Row Blue Pale Highlight Blue
#dcedf9
#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.
  • 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.

Types

Horizontal Filled Layout

Tables Horizontal

Compact Mobile Layout (Row Cards)

Tables Row

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.