Intro

The table toolbar always appears above the table. Use it for key actions that affect the entire table and for actions that apply to selected items.

Table toolbar

When to Use

false

Use the table when you need to:

Show a table title.
Control table settings or views and adjust how much information is shown.
Apply the same action to selected items.
Switch between different tables.

dont

false

Don’t use the table toolbar if:

The table is used for selection only.
You want to show all actions within each row.

Include only the actions and content your users really need.
Keep the predefined order for action groups.
Don’t move main actions into the overflow.

Anatomy

Anatomy of the table toolbar

Title: The table title.
Search: A search field or an action that opens the search field.
Actions: Actions that apply to the table or to selected rows. Related actions appear in one group.
Separators: Separators divide action groups. Each visible group begins with a separator, even if the group contains a single action. Only the first group after the search field must not show a separator.

Responsiveness

To enable responsiveness, use the overflow toolbar control. For more information, see Toolbar Overview – Responsiveness.

Features

Title and additions

Title

A title gives a short, meaningful summary of the content, often in one word. Use the title component to display it.

Use a toolbar title if you need the table toolbar, and the title of the table is not displayed nearby. To prevent redundancy when another title already provides context, use a generic label for the table title, such as Items.

Item[internal_only] and selection counter[/internal_only]

You can add an item counter after the title. The counter shows the number of items displayed in the table in parentheses, for example, (37). Remove the counter when no items are shown.

Title with item counter in the table toolbar

[internal_only]When users select items, you can show the selection together with the item counter inside the same parentheses, such as (Selected: 4 of 37).

Title with selection and item counter in the table toolbar

When a title is followed by a segmented button for switching between predefined table views:

A selection counter is displayed after the title, for example, (Selected: 4).
An item counter displays the number of items for each view after the text (or icon) on the segmented button, for example, All (37), High (3), Medium (4).

Title with selection counter and segmented button with item count [/internal_only]

Variant management

In tables, a variant stores all the settings that define the table view, such as the column layout, column visibility, sorting, filter settings, and grouping. The variant management component enables users to load, save, and change variants. In most cases, variant management replaces the title.

Variant management in the table toolbar

Title with variant management

guideline

If you need both a title and variant management, place the variant management component directly after the title. Insert a separator between the title and variant management.

Using both often leads to truncation issues, so this pattern isn’t recommended.

Content switch

To switch between different predefined views, use a select or a segmented button. The content switch replaces the title and the variant management component. In the rare case that the content switch is shown together with a title, the content switch follows the title.

A predefined view contains settings for sorting, filtering, grouping, column layout, and column visibility. Nevertheless, in most cases, the content switch is just used for different filter settings like All, Mine, and Others. In this case, make sure that the content switch doesn’t interfere with other filter settings. For example, remove the corresponding filter from the filter bar. If possible, include an item counter per view.

Another common pattern for content switches are views like By X, and By Y, which are usually defined using group settings.

Use the segmented button and the select control as follows:

For a limited set of views (2-3), use the segmented button for desktop and tablet devices. Replace it with a select if there is not enough screen space.
If the number of views can change or is larger than 3, use the select control.

For more information, see multiple views for list reports.

Segmented button with an item counter

Segmented text button to switch content

Select control to switch content

Search

The search field can be especially useful for tables with a large number of items. Avoid using the search if you have a filter bar or text filters per column. The search field can't be moved into the overflow menu.

For more information, see Search.

guideline

Use a search field only if there is no other way to search within the table (for example, if there is no additional filter bar).

hint

Although the search field isn’t a group, you can offer it as a group technically to add specific search components.

Action groups and custom actions

To maintain continuity and consistency across table types, organize related actions into generic action groups so similar operations appear together. Surface only the actions users need. Follow the predefined group order.

When you create a table toolbar, identify the actions your table needs to offer and place them in the defined groups. Use the recommended slots to add application-specific actions within a group without disrupting overall stability and consistency. In metadata-driven components, the toolbar is predefined, and the slots act as insertion points where developers can add custom actions.

You won’t need every action shown in the examples. Use the subset that applies and order and group them accordingly.

Overview of table toolbar groups

1. Finalizing actions
2. Business actions
3. Modification actions
4. Personalization
5. Share
6. Export
7. View actions
8. End slot

guideline

Only disable an action if it can’t be applied to any of the selected items, or if the number of selected items doesn’t match the action. For example, disable Compare if only one item is selected.
If the items are still available after an action is applied, keep them selected.

Only use finalizing actions, such as Save or Cancel, when the table is editable. Place them in the first position in the table toolbar. Semantic actions behave like finalizing actions, though you can also treat them as business actions. Add custom actions between the primary action and the negative action. The primary action doesn’t have to be Save, as shown in this example.

Finalizing actions group

guideline

If there’s no other primary action on the page, you can use an emphasized button for the finalizing action. Otherwise, highlight the most important button in the table toolbar with the ghost button style.