---
title: Table
navTitle: Table
summaryParagraph: A table displays rows of data, including all data in a set, making it efficient to look up values.
tags: ["Select menu", "Select dropdown", "Multi-select", "Select input"]
needToKnow:
- All tables have headers, rows, and columns.
- Don’t use a table when you can use a data visualization.
demoStoryId: table-react--default-kaizen-site-demo
---
## Visuals
### UI Kit
### Examples
## 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**:
* Header row
* Header cell (can be checkbox etc.)
* Use labels that are as short as possible
* **Rows / cards**:
* 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.
* **Expanded** **rows / cards**:
* Can be expanded or collapsed by an icon button containing a chevron icon
* Expanded cards can contain either:
* A nested table: with aligned column headings and additional rows or
* A card row: that does not align with the column headers and contains different but related information that happens to sit inside of a table
* **Summary rows**:
* Summary rows either provide summary data such as totals or additional metadata, such as when the item was created.
* **Alignment**:
* Numerical data is often right aligned:
* Centered is useful for unitless, whole numbers, ratios, and dimensions e.g. 17, 5:1, or 1920x108-
* 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:
* **Expanded row style**:
* Our **current style is "Popout"**
* Our previous style is "Well" and we’re deprecating this
* **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
* Filter: use a [checkbox](/components/checkbox) in the table or [select](/components/select) (default or secondary style) above the table
* 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.
* Bulk actions:
* Show bulk actions that apply to a data table using buttons above 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.
## When to use
* Use tables when a summary or data visualization will be insufficient
* Use tables when exact values are useful to know
* Use tables when an item has 3+ interesting dimensions (i.e. columns) of data
## When not to use
* When you can summarize the data visually, use a data visualization instead.
## External Links
Here are some examples of other existing design systems:
- [Design better data tables by Andrew Coyle](https://uxdesign.cc/design-better-data-tables-4ecc99d23356)
- [Polaris: data table](https://polaris.shopify.com/components/lists-and-tables/data-table)
- [Polaris: data visualization tables](https://polaris.shopify.com/design/data-visualizations#section-tables)
- [Polaris: resource list](https://polaris.shopify.com/components/lists-and-tables/resource-list#navigation)
- [Material: data table](https://material.io/design/components/data-tables.html)
- [Atlassian: tables](https://www.atlassian.design/guidelines/product/components/tables)
- [Ant Design: table](https://ant.design/components/table/)
- [Red Bubble: table](http://redbubble.design/components/table/examples#basic)
- [Feelix: table](https://feelix.myob.com/#/Components/Tables/Table)
- [Zendesk: table](https://garden.zendesk.com/react-components/tables/)
- [MailChimp: table](https://ux.mailchimp.com/patterns/tables)
- [Carbon: data table](https://www.carbondesignsystem.com/components/data-table/code)
- [Quickbooks: table](https://designsystem.quickbooks.com/component/tables/)
- [Designing better tables for enterprise applications by Adhithya](https://uxdesign.cc/designing-better-tables-for-enterprise-applications-f9ef545e9fbd)
- [Magento: data table](https://devdocs.magento.com/guides/v-3/pattern-library/displaying-data/datatable/datatable.html)