Tables

Specifications

Typography

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

Background Color

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

Compact Mobile Layout (Row Cards)

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.