Dynamic table

Dynamic tables combine a static Table with various other components to enable users to interact with one or more rows of data.

Also known as: data grids, interactive table, editable table, live table, clickable table, responsive table, UITableView (iOS), ListView (Android).

Anatomy

A. Action bar (optional): Area containing actions related to the entire table or selected rows within the table.
B. Table (required): Static table component consisting of rows and columns.
C. Sorting icon (optional): UI icon button enabling users to sort table contents in ascending or descending order.
D. Row actions button (optional): UI icon button prompting a menu of actions that apply to the associated row.
E. Pagination (optional): A set of links that allow users to navigate a large collection of data split into multiple pages.

Usage

Best practices

• Limit visual elements that don’t add meaning or interactivity to the data displayed in the table.
• Ensure the default view uses a logical sorting method, such as most to least relevant to the user.
• Consider using pagination if the user needs to scroll to see the entire table.
• Include clear error messaging if data can’t be loaded or if it’s taking longer than expected.

Layouts

The dynamic table pattern has multiple layouts to accommodate different visual designs and user needs.

Default

The default layout is ideal for providing basic interactivity like sorting, filtering, and pagination. It enables users to take actions on one row at a time, but doesn’t enable bulk actions.

• Include inline actions or a Row actions button within each row to enable users to perform actions.
• Consider adding an Action bar for actions that apply to the whole table, such as filtering.

Selectable rows

The selectable rows layout enables users to interact with multiple rows at once. This is helpful for large tables requiring complicated or bulk actions.

This functionality is generally indicated by a checkbox in the first column. Users can select a row by selecting its associated checkbox. Selecting the checkbox in the column header automatically selects every row.

• Include an Action bar to allow users to perform actions on the selected rows.
• Consider including Row actions button for actions that can only be applied to one row at a time.
• Use clear visual styling to indicate selected rows, such as a selected icon or a change in background color.
• Consider displaying the number of columns selected to inform users how many selections they’ve made.

Expandable rows

The expandable rows layout uses accordions that don’t display all the available data until manually expanded by the user. This is helpful when there’s a significant amount of data that can’t be shown at once, or to provide notes or additional data that isn’t represented by a table column.

• Use a chevron UI icon button to clearly indicate when there’s more data available.
• Use clear placement so users can identify if expanded content pertains to specific column headings.
• Maintain the expanded or collapsed state of rows if the user leaves and returns to the page.
• Ensure expanded information loads quickly to prevent user frustration. If there’s a delay, use a Progress indicator.
• Ensure the behavior of expanded rows is consistent across other data tables in the same application.
• Ensure screen readers announce whether a row is expanded or collapsed. For more information, reference Accordion.
• Avoid complex interactions within expanded content to ensure all users can fully access and interact with important data.

Behaviors

Dynamic tables have various behaviors designed to make data easy to understand and interact with. Reference the section below to learn about optional features that can be implemented based on the use case.

Sort and filter

Sort and filter are two methods that enable users to change what data is shown in the table. They can be implemented together or separately based on the use case.

Sort

Sorting allows users to rearrange a table by the values of a chosen column. By selecting the sorting icon in a column header, the table reorders its rows in ascending or descending order based on that column’s values. Selecting the same icon again reverses the order, while selecting one in a different column reorders the table based on the new column. This makes it easier for users to understand the data according to their needs or find a specific entry.

In the table below, the rows are sorted from most to least critical based on the “Status” column.

• Enable users to sort a column by selecting the icon button or the header text.
• Ensure the column order reverses if users select a header or arrow a second time.
• Use a bi-directional arrow icon to indicate a sortable column.
• Use an up-facing arrow to indicate the column is in ascending order.
• Use a down-facing arrow to indicate the column is in descending order.

Ascending and descending order

Use the following table to identify the ascending or descending order for common data types.

Filter

Filters enable users to limit the data shown in the table based on specific criteria. This makes it easier for users to analyze data in a tailored view without unrelated content. After selected filters are applied, rows that don’t match the criteria are hidden from the table.

Filters can be included using an inline method like Chips, or with a dropdown menu. Choose the method that best aligns with your use case and overall table design.

Note: Filters can be implemented in a variety of ways. While this section provides two methods, there are many more ways to enable this interaction. Always consult with design and accessibility partners to ensure filtering is accessible and intuitive.

Inline filter

In this example, the filter icon in the action bar prompts selection chips to appear above the data. Users can filter the data by selecting chips that align with their needs.

Filter with dropdown menu

In this example, the filter icon in the action bar prompts a dropdown menu containing filtering options. Users can filter the data by selecting checkboxes that align with their needs, then selecting “Apply”.

• Clearly indicate when filtering is an option with an icon button or persistent chips with clear labels.
• Use Chips to clearly indicate which filters have been applied, regardless of the filtering method implemented.
• Ensure filter labels match the terms used in table cells or column headings.
• Include an action button enabling users to manually apply selected filters.
• Include an empty state if filtering yields no results.
• Clearly display how many filters have been selected.

Column actions

Actions can also be applied to individual columns. Common actions include sort, pinning columns, and hiding columns.

• Consider using an icon button to prompt a dropdown menu if your use case requires more than two column actions.
• Use a commonly recognized icon such as a gear or three dots to signify there are more actions.

Managing which columns are shown

For large tables with many columns, consider enabling users to decide which are displayed in the table. This is usually achieved through a checkbox group, where users can deselect any columns they want to hide from view.

This option is commonly prompted with an option in the Columns actions menu. For tables without column actions, this feature can be added to the Action bar.

• Show all columns by default to ensure users are aware of all the data included in the table.
• Ensure users can hide a column from view by deselecting it from the menu.
• Ensure that users cannot hide columns that are essential to the function of the table, such as actions.
• Consider displaying the number of columns hidden to clearly indicate the current state of the table.

Pagination

The pagination component is a set of links enabling users to navigate tables divided across multiple pages. This helps reduce cognitive load by reducing the amount of data shown at once. For general information on the pagination component, reference Pagination.

• Use pagination when the data can’t be easily viewed on one page or requires significant scrolling.
• Place the pagination component below the last row of the dynamic table.
• Use the default pagination component for complex tables when space permits.
• Use the slim pagination component for less complex table with fewer pages, or when space is limited.

Row actions

Row actions enable users to edit, delete, or perform other actions on an individual row. They’re typically used in complex tables when there are multiple actions the user can take.

Row actions can be included using inline icon buttons, or with a dropdown menu. Inline icon buttons work well if there are one or two actions, while a dropdown menu can be used to provide more than two.

• Use icon buttons rather than text buttons within rows to avoid information overload.
• Make sure the actions are relevant and allowed. For example, don’t allow users to download sensitive or private data.

Action bar

The action bar contains actions that apply to the whole table or multiple selected rows in the table. It’s typically placed above the table to ensure it’s visible and accessible to users.

• Follow Button guidelines to implement primary, secondary, and tertiary buttons to visually differentiate actions.
• Include a close or “X” icon to enable users to deselect all selected rows at once.
• Consider disabling actions that can’t be performed on the whole table until rows are selected to avoid frustration.

Notifications

Dynamic tables can also include a notification column to indicate new or unread notifications. This helps provide users with critical updates and alerts within the context of their data.

• Use a Badge component to indicate unread notifications.
• Consider placing new or unread notifications at the top of the table to ensure they’re seen or announced first.
• Consider including “Notification status” as a sort or filter criteria so users can access unread notifications quickly.
• Provide a clear method for clearing notifications, such as a row action or “Mark all as read” button in the action bar.

Scroll

Scroll bars enable users to navigate tables with many rows that aren’t all visible at once. This is particularly helpful when interfaces have limited space to ensure users can still access the data.

Scrolling can be implemented to allow vertical scrolling, horizontal scrolling, or both. Vertical scrolling is helpful when there’s limited vertical space, while horizontal scrolling is helpful when there’s limited horizontal space. Learn about both scrolling methods below.

• Ensure the scroll bar is visible to help indicate the user’s location in the table and how much more content is available.
• Ensure column headers and corresponding rows are directly aligned to avoid confusion.

Vertical scroll with sticky header

Vertical scroll can help users access data when there’s limited vertical space and all rows aren’t visible at once. This is the default scrolling behavior for most tables and is generally more intuitive for users. This helps when there are few columns but many rows, tables are likely to be viewed on mobile devices, or you want to maintain the visibility of all columns.

When implementing vertical scroll, it’s recommended to use a sticky header. Sticky headers remain fixed at the top of the table even when the user scrolls, ensuring they can easily identify what column a cell pertains to.

• Use a Divider or other visual indicator to ensure the sticky header appears visually different from other rows.
• Use elevation to visually indicate that the sticky header is floating “above” the rest of the table’s data.
• Ensure the scroll bar is displayed by default so users are aware there’s more data available.

Horizontal scroll

Horizontal scroll can help users access data when there’s limited horizontal space and all columns aren’t visible at once. This helps when there are many columns and users need to be able to see all the data.

It’s recommended to enable users to pin a column when implementing horizontal scrolling. This enables users to keep a single column in view for easier comparison.

• Use elevation to visually indicate that the sticky header is floating “above” the rest of the table’s data.
• Ensure the scroll bar is displayed by default so users are aware there’s more data available.

Vertical and horizontal scroll

In certain cases, especially with large data sets, vertical and horizontal scrolling can be combined to provide access to all the data cells. Use this method sparingly, as it creates a complicated interaction and can be difficult to navigate on mobile devices.

• Consider alternate ways to present data such as pagination, filters, or expandable rows whenever possible.
• Ensure the scroll bars are displayed by default so users are aware there’s more data available.

Progress indicators

Progress indicators help users identify when data hasn’t finished loading. This is especially helpful for complex data tables, which can have lengthy load times. For general guidelines on progress indicators, reference Progress.

• Use a linear progress indicator in most cases to save space and align with the table layout.
• Place the indicator at the top of the table, stretching the entire width.
• Skeleton loading can be used as additional visual indication that the data in the table is loading.
• Ensure the progress indicator uses different visual styling from the table header.

Content

• Use sentence case for all content except proper nouns, names, or abbreviations.
• Use straightforward language without jargon.
• Limit use of abbreviations unless the abbreviation is commonly understood and improves readability due to space constraints or line length.
• Ensure column and row headers have distinct labels. If duplicates are required, add additional context to ensure screenreaders can differentiate them.

Table titles and subtitles

• Use informative titles that describe the table as a whole.
• Use subtitles to describe complex tables.
• Don’t include punctuation for table titles.
• Limit titles to three to five descriptive words. If your title can’t be condensed, consider using a subtitle with your title.
• Limit subtitles to one to two short sentences with punctuation.

Column headers

• Clearly label columns using short, concise, and scannable column headers.
• Ensure column headers accurately describe the contents so users can interpret the data without additional context.
• Include symbols for units or measurement along with it’s name. For example “Temperature (°F)”

Table content

• Use short, scannable content within table rows.
• Don’t include symbols, such as “$”. Only include those within the header to avoid issues filtering information.
• Only use punctuation when using decimals. Ensure all decimal places are consistent for filtering information.

Platform considerations

Recommended for responsive web only

When dynamic tables are complex and dense, they are best suited for responsive web sites and applications. Use caution implementing dynamic table on screen sizes smaller than 768px.

Related guidelines