Skip to main content

Toolbar

Search, filter, and set criteria to display content and perform actions on it––specifically in your table and data grid.

Toolbar comes in two variants: default and bulk edit.

Anatomy​

Default​

The combination of a Search field, Segmented control, Quick filters, and Extended filters enable users to search for and refine the items based on their preferences.

Sort button, Data display type, and Actions group enable users to perform actions on the presented data.

Bulk edit​

Perform actions on multiple pieces of data simultaneously to minimize the overhead of repetitive tasks.

Behavior​

With quick filters​

  • You can use up to three quick filters. If there are more than three filters or limited horizontal space, some filters will be hidden under the Filters button.

  • If no filters are set, it selects "All" by default that allow users to see all the data.

  • The quick filters show a select's label as a placeholder, such as "Types”, ”Markets” etc. When any quick filter is activated, all options in a dropdown become unselected. To set filtering criteria, you select the necessary items from the dropdown.

  • To apply selected filter criteria, users clicks outside a dropdown to close it.

With bulk actions​

Bulk actions appear when you select any data. When activated, they replace the default Actions group and controls on the right––the Sort button and the Display Type segmented control.

Usage​

Use with the Data Table or Data Grid to perform searching, filtering, sorting, and other related actions on presented data.

Placement​

  • If there are two display types––Table view and Grid view, position the Toolbar beneath the page header and beyond the card container.

  • Position the Toolbar within the table card in other cases.

Best practices​

  • Consider showing the Sort button in the Data Grid view.
  • Consider using the controls in the column header to sort data for the Data Table.