Data table

Data tables are used to organize and display all information from a data set. While a data visualization represents part of data set, a data table lets merchants view details from the entire set. This helps merchants compare and analyze the data.

Examples

Use to present small amounts of data for merchants to view statically.

Drag to resize example

Props

columnContentTypesRequired
"text" | "numeric"[]
List of data types, which determines content alignment for each column. Data types are "text," which aligns left, or "numeric," which aligns right.
defaultSortDirection
"ascending" | "descending" | "none"
The direction to sort the table rows on first click or keypress of a sortable column heading. Defaults to ascending.
footerContent
string | number | React.ReactNode
Content centered in the full width cell of the table footer row.
headingsRequired
string[]
List of column headings.
initialSortColumnIndex
number
The index of the heading that the table rows are initially sorted by. Defaults to the first column.
rowsRequired
string | number | React.ReactNode[][]
Lists of data points which map to table body rows.
sortable
boolean[]
List of booleans, which maps to whether sorting is enabled or not for each column. Defaults to false for all columns.
totals
string | number | React.ReactNode[]
List of numeric column totals, highlighted in the table’s header below column headings. Use empty strings as placeholders for columns with no total.
truncate
boolean
Truncate content in first column instead of wrapping.
onSort
(headingIndex: number, direction: "ascending" | "descending" | "none") => void
Callback fired on click or keypress of a sortable column heading.

Best practices

Data tables should:

  • Show values across multiple categories and measures.
  • Allow for filtering and ordering when comparison is not a priority.
  • Help merchants visualize and scan many values from an entire data set.
  • Help merchants find other values in the data hierarchy through use of links.
  • Minimize clutter by only including values that supports the data’s purpose.
  • Include a summary row to surface the column totals.
  • Not include calculations within the summary row.
  • Wrap instead of truncate content. This is because if row titles start with the same word, they’ll all appear the same when truncated.
  • Not to be used for an actionable list of items that link to show pages. For this functionality, use the [resource list] component.

Alignment

Column content types are built into the component props so the following alignment rules are followed:

  • Numerical = Right aligned
  • Textual data = Left aligned
  • Align headers with their related data
  • Don’t center align

Content guidelines

Headers should:

  • Be informative and descriptive
  • Concise and scannable
  • Include units of measurement symbols so they aren’t repeated throughout the columns
  • Use sentence case (first word capitalized, rest lowercase)

  • Temperature °C

  • Temperature

Column content should:

  • Be concise and scannable
  • Not include units of measurement symbols (put those symbols in the headers)
  • 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.