A table displays rows of data, including all data in a set, making it efficient to look up values.

Also known as:
Tabular datadata tableValuesResource list

AnchorNeed to know

  • All tables have headers, rows, and columns.
  • Don’t use a table when you can use a data visualization.


UI Kit


To keep in mind

A table organizes and displays tabular data. It shows all data in a set, whereas a data visualization might highlight only the interesting values. A table makes it efficient to look up values across multiple categories.

  • All tables have these elements:
    • Container: wraps the table header and rows.
    • Headers
      • (Required) Header row.
      • Header cell (can be checkbox etc.).
        • Use labels that are as short as possible.
    • Rows:
      • Collapsed: Default.
      • (Optional) Expanded: Shows more detail about that row’s item.
    • Columns:
      • The first column contains the most identifying information about the item, such as name.
      • By default, one column should be sorted.
  • Links:
    • Links can be contained within cells, but avoid linking whole table rows. If you need to link a whole row, consider using a List.
  • Alignment:
    • Numerical data is often right aligned:
      • Centered is useful for unitless, whole numbers, ratios, and dimensions e.g. 17, 5:1, or 1920x1080.
      • Right aligned numerical data with units or symbols makes it easier to scan and sum, especially for decimal places, or percentages, e.g. -17 or 50%.
      • Left aligned numerical data is useful for unitless numbers with symbols on the left, such as dollar sign ($) or hash/pound (#), e.g. $300 or #73.
    • Text data is left aligned.
    • Headers are aligned with their related data.
    • Final column is usually the second most important data and is right aligned, especially for total numbers with decimals e.g. comparison data or call to action.
  • Style:
    • We don’t use “zebra striping” on rows (alternating highlighting) because there is enough visual delineation (spacing and borders) to visually track a single item across the whole row.
    • Responsive:
      • On small screens, the table is sideways scrollable.
      • On touch devices (small or large), scroll is available on touch.
  • Wrap or truncate long text:
    • Wrap: wrap when there’s no other way to see the full value.
    • Truncate: truncate when the full value can be seen on interaction (e.g. hover/focus shows a tooltip or clicking expands the table) or elsewhere (e.g. on a page just for that data).
  • Arranging data:
    • Sort: use an icon to indicate the column header is sortable, showing if it’s ascending, descending, or not selected.
    • Search: use Search to find specific rows (showing search in the top–right above the table).
  • Selecting rows:
    • For selecting multiple rows, use checkboxes in the first column to select multiple rows for bulk actions, such as deletion.
    • For selecting one row, use a hover style for hovering and an active style for the selected row.
    • Selecting: use a Checkbox Field in the table header.
  • Bulk actions:
    • Show bulk actions that apply to a data table using buttons separate the table.
  • Pagination:
    • For more than 10 rows and other data on the page, consider pagination or inline truncation & expansion.
    • For more than 25 rows as the only table on the page, consider pagination or inline truncation & expansion.
    • See the pagination guide.
  • Focus indicator:

When to use and when not to use

When to use
  • Use tables when exact values are useful to know.
  • Use tables when data is equally important.
  • Use tables when an item has 3+ interesting dimensions (i.e. columns) of data.
When not to use

External links

Here are some examples of other existing design systems: