Tables display sets of related data across rows and columns. Tables make it easier for users to compare and analyze information.
- Localization & internationalization
- Columns are vertical groupings of information that categorize and prioritize data
- Header rows describe the data provided in a column or row
- Rows are horizontal groups of data that fall under each column
- Header and data cells should be concise
- Text wrapping is the default and recommended behavior. Ensure the cells in the row are top aligned to help with scannability.
- Keep in mind, truncation in a table can make it harder for users to scan. Use an Ellipsis to truncate long text at the end of the first line and provide a title attribute that appears on hover.
Headers categorize and organize the information within the table.
- Ensure header cells accurately describe the data contained in the rows and columns
- Use one or two nouns that quickly help people understand what data is in the table
- Avoid using verbs to prevent confusion with CTAs
- Header cell labels shouldn’t create sentences with data cell content
- Use sentence case
- Header cells are marked up with
<th>to make them accessible
Internationalization could result in text expansion. If the text length in a header cell exceeds the specified width of a column, there are a few options:
- Truncate with an Ellipsis
- Wrap the content. In the case of headers, content should be bottom aligned.
- Ignore the specified width and stretch the column width to accommodate the text. This could trigger horizontal scrolling for the table.
Data cells contain the actual data and are located below header cells.
- Ensure the content is detailed yet concise
- Avoid repeating the words used in the header to help with scannability
- Use sentence case
- Data cells are marked up with
<td>to make them accessible
Tables come in three sizes: small, medium, and large.
- Medium is the default size and accommodates information density in most cases
- Large is used when Avatars are introduced into rows to create additional breathing room between row content
- Small can be used when more information density is needed
There are ways to design a table to make it easier to see and find information:
- A table must have at least 2 columns, otherwise use a List element
- Use horizontal lines to reduce visual noise in the table
- White space signals a different column
- You can specify max-width for columns but it’s not required
- Don’t place elements relating to the data outside of the table
How text is displayed can make a column easier to view, use, and manage. Left align all text for greatest scannability, with some exceptions for quantitative data.
|1. Text||Left align|
|2. Categorical data that uses numbers (for example, dates, phone numbers)||Left align|
|3. Quantitative data||Right align|
|4. Tags or Avatars||Left align|
|5. Icons||Center align|
If a table includes many rows of data, striped rows make it easier to keep their place when scanning horizontally.
When creating additional categorization of similar items, use grouped rows.
- They should be used only when the groups will contain 10 or more items
- Avoid overuse to prevent busy layouts that are harder to understand
- Don’t use striped and grouped rows at the same time
Pagination separates table rows into pages and allows users to navigate between those pages. Our table component is paired with the Pagination component to create a consistent experience.
- Cursor pagination is the default and recommended approach due to performance
- Cap a single page view at 100 rows
Use Cursor pagination for real-time data.
- This includes when new records are added frequently or in data sets where the latest results are first
- There is no concept of the total number of pages in the set
- Use “Previous” and “Next” as pagination labels
Use Offset pagination when you know the number of records or where you are in the data set.
- Ensure the margin between the table component and the pagination is 20px
In paginated tables, you can select all checkboxes but that selection only affects the current page being shown.
- Users should only be able to take action on what they can see
In cases where the database supports infinite scrolling, there is no need to say how many pages of data there are. If you have an infinitely scrolling table, you should also offer sorting to help users navigate the data.
In infinitely scrolling tables, you can only manually select items.
For tables with more rows than can be displayed in the viewport, the header row is fixed at the top of the viewport. Keeping the column headers within view while scrolling helps users maintain context.
Virtualization means what you see in the browser is what is in the DOM. When something scrolls out of view, it gets removed from the page DOM. When something scrolls into view, it is added to the DOM.
- Use react-window to efficiently render large data sets
Sorting is implemented by selecting arrows in table headers.
- Clicking the header text will sort by ascending order (A→Z, 1→9, Date and Time, Priority (High→Low))
- Clicking again will reverse the order
- Clicking a third time will remove sorting
If any ordering is applied to a table including default ordering, the sorting icon should be present. This indicates how the table is being ordered and also creates a clear affordance to control.
The Caption is the title of a table.
- A table must have a Caption or
aria-describedbyattribute that identifies the element which titles or describes the table
Use an Anchor for data cell text elements that link elsewhere.
- These anchors within a table typically navigate the user to a new page
- If you want to open a link in an external window or tab, use an External anchor
Follow our date and time formatting guidelines.
|Row/Cell state||Additional guidance|
|1. Empty cell||Cells with no values should be left blank. Do not use a hyphen, en, or em dash.|
|5. Focused and selected||The last row checked is the focused row, unless the user clicks on a different row or uses the keyboard to change focus.|
Skeleton screens are used to indicate that a screen is loading. They are perceived as being shorter in duration when compared against a blank screen or a spinner.
- Implement the Skeleton component in each cell up to three rows
- For a table with three or more rows, show the first three rows as skeletons with the header cells being shown at all times to provide instant context of incoming tabular data
- The width of the Skeleton should match the width of the intended cell content, while the Skeleton’s height will be 60% of the font size
Our tables have been designed to accommodate localization and internationalization standards so they do not break the experience.
All Garden Tables are built with accessible markup.
People using screen readers can have the row and column cells read aloud as they navigate through the table. Screen readers speak one cell at a time and reference the associated header cells, so the reader doesn’t lose context.
Help improve this page. Give us your feedback