Table

v1.1

Tables are used to organize and display data efficiently to provide users with insights and potential actions.

CSS
Marko
React

Considerations

Organized

Tables are organized logically with clear hierarchy.

Intuitive

Tables are easy to use and behave as expected.

Interactive

Tables allow interaction and customization for greater control.

Anatomy

Title
Filter bar
Tool bar
Table content
Pagination

Properties

Column label

The column label names the data in the column. Keep labels short and specific so users can distinguish columns at a glance.

Use sentence case
No ending punctuation
Use a noun or noun phrase
Keep to 1–3 words

Selection

Bulk actions are functions that may be performed on multiple items within a table. Once the user selects at least one row from the table, the batch action bar appears and replaces the filter bar with actions they can take. To close “bulk edit mode”, the user can cancel or deselect the items.

Density

Our tables are available in 3 different row sizes: Compact, Default, and Relaxed. All cells have a 16px left/right padding while the top/bottom have a minimum padding of 12px.

Image

For rows containing images or other media types, three sizes are available: Small, Medium, and Large.

Order

Column reordering is available to give users more control over their workflows and data sets.

Cell types

Simple

Simple cells are structured to accommodate a lead, middle, and trailing slot for content.

Numeric

Numeric cells display quantitative data like prices, counts, and percentages.

Use numerals, not words (e.g., 3, not three)
Use consistent decimal precision within a column
Include the appropriate unit or currency symbol

Field

Field cells let users edit data inline and display in an enabled state to signal that the cell is editable.

Dropdown

Dropdown cells let users make quick selections inline. Each option should be short, distinct, and easy to scan.

Use sentence case, except for proper nouns or branded terms
No ending punctuation
Use parallel structure

Learn more about Dropdowns.

Actions

Action cells give users controls for a specific row. Labels should name the outcome and stay consistent across all rows.

Use sentence case
No ending punctuation
Use a [verb] [noun] or [verb] [article] [noun] pattern
Aim for 1-3 words

Button combos

CTA button
CTA button + overflow button
Icon button
Icon button + overflow button
Overflow button

Status

Status cells show the current state of a row. Labels should be short, specific, and recognizable without surrounding context

Use all caps for the visual treatment
Write in sentence case for screen readers
No articles, prepositions, or punctuation

Behavior

Loading

Loading should be unobtrusive and seamless—minimizing any jarring flashes or content shifts whenever possible. When tables are in a loading state, the content is replaced with a simplified skeleton loader that preserves context as the updated or new information loads.

Sorting

A sorted data table has three states: Unsorted, Sorted-up, and Sorted-down. The icon indicates the current sorted state and is only shown if sorting is available.

Unsorted (Sort)

Sorted-up (Sort-up)

Table showing sorted down table data set.

Sorted-down (Sort-down)

Scrolling

The table header is sticky on vertical scroll. If the table extends beyond the screen then the table will scroll horizontally. Tables have a max height of 90% of the viewport.

Column width

An adjusted column width indicator is presented in a focused editing mode that is visually similar to bulk editing, with explicit actions to save, reset, or cancel.

Minimum and Maximum

Columns have a minimum width of 124px and a maximum width of 400px, except for selection columns, which have a fixed width of 48px. Additionally, single icon action column types are set at a fixed width of 64px.

Column order

Column reordering is presented in a modal for a focused editing mode with explicit actions to save, reset, or cancel.

Bulk editing

The bulk edit bar applies an action to all selected rows.

Write button labels from the user’s perspective. Use outcome-oriented verbs like “add” or “remove” because they tell the user exactly what will change as a result of their action.

For more guidance on which verb to use, check the This vs. That guidelines.

Use sentence case
No ending punctuation
Start with a [verb] and only add an object if the action alone is ambiguous
Aim for 1-3 words

Pagination

Pagination is provided for all tables with more than 60 rows, allowing for easy navigation through the content by limiting the maximum number of rows per page. Don’t use endless scrolling for tables, as it can hinder user experience and make it difficult to manage or act on large data sets effectively.

Layer states

Hover is applied at the table row and cell levels for inner cell elements such as forms, dropdown, or buttons. Table focus is handled at the cell level. A disabled state can be applied at a row or cell level. See Interaction states for more details on layer state styling.

Screen sizes

Small

Medium

Large

Best practices

Color

Do use green to represent a positive trend for sales increasing or costs decreasing and red to represent a negative trend for sales decreasing or costs increasing. However, color cannot express this meaning alone. That is why we use the color in addition to an up or down arrow to represent this change. This provides contrast and conveys meaning for our color blind or low vision users.

Don’t color cells as this is an issue for our color blind or low vision users. Color cannot express meaning alone.