Data Table

Best Practices

---

Variations

Variation	Description
Default	Default data table displays static data without interactive elements.
Sortable	Sortable data tables allow users to sort data.

When to use data table functionality

Not sure what table to use? Use this list of scenarios to help refine your table.

Table Function	Scenario	Do	Don’t
Default	Use for simple data display where users don’t need to interact beyond viewing.	Use when displaying read-only data Keep columns minimal and focused on key information Ensure readability on smaller screens	Don’t use if sorting, selection, or actions are needed Don’t overload with dense data or too many columns
Sortable	Use when users need to compare data or reorder by a specific column value (for example, dates, names, prices).	Enable sorting on relevant numeric/text/date columns Indicate sort state clearly (ascending/descending) Default to a logical sort order on load	Don’t enable sorting on non-meaningful columns (for example, icons or action buttons) Don’t assume users will figure it out—use visual indicators
Actionable	Use when each row has associated actions (for example, edit, delete, download).	Provide clear, accessible buttons or menus per row Group secondary actions in a “more” menu if needed Use icon labels or tooltips for clarity	Don’t overload rows with too many visible actions Don’t hide critical actions behind too many clicks
Checkbox	Use when users need to select multiple rows to take bulk actions (for example, delete, export, assign).	Include a master checkbox to select all visible rows Clearly show selected state and feedback on actions Disable bulk actions until items are selected	Don’t use checkboxes if selection doesn’t trigger a follow-up action Don’t pre-select rows without context or confirmation
Expandable	Use when each row contains additional information that doesn’t need to be visible by default (for example, nested data, details view)	Keep primary row content concise Indicate expandable rows with clear UI affordances Maintain keyboard accessibility and ARIA roles	Don’t use expandable tables if all rows are always expanded Don’t bury essential actions or data inside the expanded section
Checkbox + Expandable	Use when users need to both take bulk actions and view more details per row (for example, select orders and see shipment info).	Prioritize clarity: selection vs. expansion must be distinct Use dedicated clickable areas (e.g., checkbox on left, expand icon on right) Maintain row state even when collapsed/expanded	Don’t combine interactions into one hotspot Don’t make expandable content necessary for completing an action—summary data should remain in the row

---

Recommendations

Interactive Elements

There are three types of interactive elements available for data tables that include checkboxes, expandable and additional actions. Any interactive component in a table needs a minimum line height of 44px for accessibility.

Selectable Rows

Selectable rows allows users to select one or more rows in a table. Selectable rows can be used in the batch actions pattern with selection controls and menu. Here’s an example of batch actions with options for select all, print, and export.

Expandable Rows

Expandable rows allow data table users to display supplementary information within an expandable row.

Additional Actions

Additional actions allows data table users to have apply actions for each row, for example copy row content or delete row. Additional actions uses menu.

Data Table Headings

Use short and descriptive headings to identify columns.

Ordering Content

Selecting a column sorts the table by that column’s content, with an arrow indicating the order. Select again to reverse the order.

Borders

Table borders are optional and can be used to emphasize horizontal or linear relationships. Borders help the user’s eyes to scan long horizontal or vertical data.

Border options:

Zebra Stripes

Data table zebra stripes are optional and usually used to emphasize horizontal rows or linear columns for comparison tables. Zebra stripes can be used in addition or instead of borders. Zebra stripe options:

Compact Padding

Tables have default and compact padding. Use compact when it’s important to have as much data as possible on the screen to understand the data. Compact mode is also used by small breakpoint (800px) or smaller.

Responsive

Data tables that don’t fit the screen have two options: Reflow cells or have a horizontal scroll bar. Data tables do not need to reflow to pass accessibility but it is a better experience to see all the data needed for the user. To help more content fit on smaller screens data table moves to compact at small breakpoint (800px) or smaller. Alternatively you could use data grid or cards that reflows at different breakpoints.

---

Using Data Tables Figma component

The data tables Figma component is made up of column sub-components, you can choose to use the pre-made component or build your own using sub-components.

Using Data Table Component

Data tables uses a mix of properties and variables.

Properties:

• Hide and show: columns including checkbox and menu
• Select: Number of rows

Variables:

• Theme: Choose from neutral, subtle brand and brand.
• Borders - Use to turn off and on borders, all, columns or rows.
• Table Zebra - Use to turn off and on stripped rows or columns.
• Density - Use to change the padding of the cells
• Height - Choose cell heights for the full table or individual cells. Don’t use Interactive elements in extra small cells, they do not give room or an accessible target size.
• Width - Choose cell width for the full table or individual columns.

Using Column Sub-Components

There are four column sub-components, default, sortable, selectable, and actionable.

Make your own table: Columns should be used with data table container to build your own data table.

Detach the data table container then add columns of your choice. Note: Table container will clip content to create the table corner radius on the outside columns.

Using Selectable Columns: Selectable column should be used combined with default or sortable columns to create the checkbox label.