Data toolbar
Info alert:Beta feature
This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
The Data Toolbar component provides a flexible system for creating responsive toolbars that manage the data displayed in a list, table, or any other data view. Toolbar configurations can be customized to support a variety of use cases. Related design guidelines: Filters
ExamplesExamples with toggle groups and filtersPropsCSS VariablesExamples
Toolbar items are individual components that can be placed inside of a toolbar. Buttons or select lists are examples of items. (Note: This example does not demonstrate the desired responsive behavior of the toolbar. That is handled in later examples.)
Often, it makes sense to group sets of like items to create desired associations and to enable items to respond together to changes in viewport width. (Note: This example does not demonstrate the desired responsive behavior of the toolbar. That is handled in later examples.)
Examples with toggle groups and filters
A toggle group can be used when you want to collapse a set of items into an overlay panel at a certain breakpoint. This allows complex toolbars with multiple items and groups of items to be responsive. A toggle group is useful for containing filter controls, for example. When the toolbar responds to adapt to a mobile viewport, the contents contained in a toggle group will collapse into an overlay panel that can be toggled by clicking the Filter icon.
The Toggle group can either have the toggle state managed by the consumer, or the component.
- The first Toggle group example below demonstrates a component managed toggle state.
The second Toggle group example below demonstrates a consumer managed toggle state. If the consumer would prefer to manage the expanded state of the toggle group for smaller screen widths: 1. Add a toggleIsExpanded callback to DataToolbar 2. Pass in a boolean into the isExpanded prop to DataToolbar
- Note: Although the toggle group is aware of the consumer provided breakpoint, the expandable content is not. So if the expandable content is expanded and the screen width surpasses that of the breakpoint, then the expandable content will not know that and will remain open, this case should be considered and handled by the consumer as well.
The DataToolbarFilter component expects a consumer managed list of applied filters and a delete chip handler to be passed as props. Pass a deleteChipGroup prop to provide both a handler and visual styling to remove all chips in a group. Then the rendering of chips will be handled responsively by the Toolbar When filters are applied, the toolbar will expand in height to make space for a row of filter chips. Upon clearing the applied filters, the toolbar will collapse to its default height.
There may be situations where all of the required elements simply cannot fit in a single line.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| clearAllFilters | () => void | No | Optional callback for clearing all filters in the toolbar | |
| clearFiltersButtonText | string | No | Text to display in the clear all filters button | |
| collapseListedFiltersBreakpoint | 'md' | 'lg' | 'xl' | '2xl' | No | The breakpoint at which the listed fitlers in chip groups are collapsed down to a summary | |
| isExpanded | boolean | No | Flag indicating if a data toolbar toggle group's expandable content is expanded | |
| toggleIsExpanded | () => void | No | A callback for setting the isExpanded flag | |
| className | string | No | Classes applied to root element of the data toolbar | |
| children | React.ReactNode | No | Content to be rendered as rows in the data toolbar | |
| id | string | Yes | Id of the data toolbar |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | Classes applied to root element of the data toolbar content row | |
| breakpointMods | DataToolbarBreakpointMod[] | No | [] | An array of objects representing the various modifiers to apply to the content row at various breakpoints |
| children | React.ReactNode | No | Content to be rendered as children of the content row | |
| isExpanded | boolean | No | false | Flag indicating if a data toolbar toggle group's expandable content is expanded |
| clearAllFilters | () => void | No | Optional callback for clearing all filters in the toolbar | |
| showClearFiltersButton | boolean | No | false | Flag indicating that the clear all filters button should be visible |
| clearFiltersButtonText | string | No | Text to display in the clear all filters button | |
| toolbarId | string | No | Id of the parent DataToolbar component |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | Classes applied to root element of the data toolbar item | |
| variant | DataToolbarItemVariant | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter' | 'label' | 'chip-group' | No | TODO: Support 'separator' element as a <Divider component="div" variant="horizontal" />. A type modifier which modifies spacing specifically depending on the type of item | |
| breakpointMods | DataToolbarBreakpointMod[] | No | [] | An array of objects representing the various modifiers to apply to the data toolbar item at various breakpoints |
| id | string | No | id for this data toolbar item | |
| children | React.ReactNode | No | Content to be rendered inside the data toolbar item |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | Classes applied to root element of the data toolbar group | |
| variant | DataToolbarGroupVariant | 'filter-group' | 'icon-button-group' | 'button-group' | No | A type modifier which modifies spacing specifically depending on the type of group | |
| breakpointMods | DataToolbarBreakpointMod[] | No | Array of objects representing the various modifiers to apply to the data toolbar group at various breakpoints | |
| children | React.ReactNode | No | Content to be rendered inside the data toolbar group | |
| innerRef | React.RefObject<any> | No | Reference to pass to this group if it has .pf-m-chip-container modifier |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| toggleIcon | React.ReactNode | Yes | An icon to be rendered when the toggle group has collapsed down | |
| breakpoint | 'md' | 'lg' | 'xl' | Yes | The breakpoint at which the toggle group is collapsed down | |
| breakpointMods | DataToolbarBreakpointMod[] | No | [] | An array of objects representing the various modifiers to apply to the data toolbar toggle group at various breakpoints |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| chips | (string | DataToolbarChip)[] | No | [] | An array of strings to be displayed as chips in the expandable content |
| deleteChipGroup | (category: string | DataToolbarChipGroup) => void | No | Callback passed by consumer used to close the entire chip group | |
| deleteChip | (category: string | DataToolbarChipGroup, chip: DataToolbarChip | string) => void | No | Callback passed by consumer used to delete a chip from the chips[] | |
| children | React.ReactNode | Yes | Content to be rendered inside the data toolbar item associated with the chip group | |
| categoryName | string | DataToolbarChipGroup | Yes | Unique category name to be used as a label for the chip group | |
| showToolbarItem | boolean | No | true | Flag to show the toolbar item |
CSS Variables
| .pf-c-data-toolbar | --pf-c-data-toolbar--BackgroundColor | #fff | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar--RowGap | 1.5rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar--PaddingTop | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar--PaddingBottom | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__content--PaddingRight | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__content--PaddingLeft | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--PaddingTop | 1.5rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--PaddingRight | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--PaddingBottom | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--PaddingLeft | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--lg--PaddingRight | 0 | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--lg--PaddingBottom | 0 | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--lg--PaddingLeft | 0 | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--ZIndex | 100 | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--BoxShadow | 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18) | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--BackgroundColor | #fff | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__expandable-content--m-expanded--GridRowGap | 1.5rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-chip-container--MarginTop | calc(1rem * -1) | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-chip-container__item--MarginTop | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar--spacer--base | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__item--spacer | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--spacer | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-toggle-group--spacer | 0.5rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-toggle-group--m-show--spacer | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-icon-button-group--spacer | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-icon-button-group--space-items | 0 | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-button-group--spacer | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-button-group--space-items | 0.5rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-filter-group--spacer | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__group--m-filter-group--space-items | 0 | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__item--m-overflow-menu--spacer | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__item--m-bulk-select--spacer | 1.5rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__item--m-search-filter--spacer | 0.5rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__item--m-chip-group--spacer | 0.5rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__item--m-label--spacer | 1rem | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__item--m-label--FontWeight | 600 | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar__toggle--m-expanded__c-button--m-plain--Color | #151515 | ||
| .pf-c-data-toolbar | --pf-c-data-toolbar--c-divider--m-vertical--spacer | 1rem | ||
| .pf-c-data-toolbar__content-section > .pf-c-divider | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__content-section > .pf-c-divider.pf-m-vertical:last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar__group | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__group.pf-m-button-group | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__group.pf-m-button-group > * | --pf-c-data-toolbar--spacer | 0.5rem | ||
| .pf-c-data-toolbar__group.pf-m-icon-button-group | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__group.pf-m-icon-button-group > * | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar__group.pf-m-filter-group | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__group.pf-m-filter-group > * | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar__group.pf-m-toggle-group | --pf-c-data-toolbar--spacer | 0.5rem | ||
| .pf-c-data-toolbar__group:last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar__item | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__item.pf-m-overflow-menu | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__item.pf-m-bulk-select | --pf-c-data-toolbar--spacer | 1.5rem | ||
| .pf-c-data-toolbar__item.pf-m-search-filter | --pf-c-data-toolbar--spacer | 0.5rem | ||
| .pf-c-data-toolbar__item.pf-m-chip-group | --pf-c-data-toolbar--spacer | 0.5rem | ||
| .pf-c-data-toolbar__item.pf-m-label | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__item:last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar__expandable-content .pf-c-data-toolbar__group | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar__content.pf-m-chip-container .pf-c-data-toolbar__item | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__content.pf-m-chip-container .pf-c-data-toolbar__group | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar__content.pf-m-chip-container .pf-c-data-toolbar__group:last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar .pf-c-chip-group:last-child | --pf-c-chip-group--MarginRight | 0 | ||
| .pf-c-data-toolbar .pf-c-chip-group li:last-child | --pf-c-chip-group__li--m-toolbar--MarginRight | 0 | ||
| .pf-m-toggle-group.pf-m-show | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar .pf-m-space-items-none > * | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar .pf-m-space-items-none > :last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar .pf-m-space-items-sm > * | --pf-c-data-toolbar--spacer | 0.5rem | ||
| .pf-c-data-toolbar .pf-m-space-items-sm > :last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar .pf-m-space-items-md > * | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar .pf-m-space-items-md > :last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar .pf-m-space-items-lg > * | --pf-c-data-toolbar--spacer | 1.5rem | ||
| .pf-c-data-toolbar .pf-m-space-items-lg > :last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar .pf-m-spacer-none | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar .pf-m-spacer-none:last-child | --pf-c-data-toolbar--spacer | 0 | ||
| .pf-c-data-toolbar .pf-m-spacer-sm | --pf-c-data-toolbar--spacer | 0.5rem | ||
| .pf-c-data-toolbar .pf-m-spacer-sm:last-child | --pf-c-data-toolbar--spacer | 0.5rem | ||
| .pf-c-data-toolbar .pf-m-spacer-md | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar .pf-m-spacer-md:last-child | --pf-c-data-toolbar--spacer | 1rem | ||
| .pf-c-data-toolbar .pf-m-spacer-lg | --pf-c-data-toolbar--spacer | 1.5rem | ||
| .pf-c-data-toolbar .pf-m-spacer-lg:last-child | --pf-c-data-toolbar--spacer | 1.5rem | ||
| .pf-c-data-toolbar__content-section > :last-child | --pf-c-data-toolbar--spacer | 0 | ||
