Skip to Content
Patternfly Logo

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 Variables

Examples

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.)

Items

Adjusting item spacers

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.)

Groups

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.

Component managed toggle groups

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.

Consumer managed toggle groups

The DataToolbarFilter component expects a consumer managed list of applied filters and a delete chip handler to be passed as props. 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.

Data toolbar with filters

There may be situations where all of the required elements simply cannot fit in a single line.

Stacked example

Overflow Menu

1 - 20 of 37
1 - 20 of 37

Props

DataToolbar properties
NameTypeRequiredDefaultDescription
clearAllFilters() => voidNoOptional callback for clearing all filters in the toolbar
clearFiltersButtonTextstringNoText to display in the clear all filters button
collapseListedFiltersBreakpoint'md' | 'lg' | 'xl' | '2xl'NoThe breakpoint at which the listed fitlers in chip groups are collapsed down to a summary
isExpandedbooleanNoFlag indicating if a data toolbar toggle group's expandable content is expanded
toggleIsExpanded() => voidNoA callback for setting the isExpanded flag
classNamestringNoClasses applied to root element of the data toolbar
childrenReact.ReactNodeNoContent to be rendered as rows in the data toolbar
idstringYesId of the data toolbar
DataToolbarContent properties
NameTypeRequiredDefaultDescription
classNamestringNoClasses applied to root element of the data toolbar content row
breakpointModsDataToolbarBreakpointMod[]No[]An array of objects representing the various modifiers to apply to the content row at various breakpoints
childrenReact.ReactNodeNoContent to be rendered as children of the content row
isExpandedbooleanNofalseFlag indicating if a data toolbar toggle group's expandable content is expanded
clearAllFilters() => voidNoOptional callback for clearing all filters in the toolbar
showClearFiltersButtonbooleanNofalseFlag indicating that the clear all filters button should be visible
clearFiltersButtonTextstringNoText to display in the clear all filters button
toolbarIdstringNoId of the parent DataToolbar component
DataToolbarItem properties
NameTypeRequiredDefaultDescription
classNamestringNoClasses applied to root element of the data toolbar item
variantDataToolbarItemVariant | 'separator' | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter' | 'label' | 'chip-group'NoA type modifier which modifies spacing specifically depending on the type of item
breakpointModsDataToolbarBreakpointMod[]No[]An array of objects representing the various modifiers to apply to the data toolbar item at various breakpoints
idstringNoid for this data toolbar item
childrenReact.ReactNodeNoContent to be rendered inside the data toolbar item
DataToolbarGroup properties
NameTypeRequiredDefaultDescription
classNamestringNoClasses applied to root element of the data toolbar group
variantDataToolbarGroupVariant | 'filter-group' | 'icon-button-group' | 'button-group'NoA type modifier which modifies spacing specifically depending on the type of group
breakpointModsDataToolbarBreakpointMod[]NoArray of objects representing the various modifiers to apply to the data toolbar group at various breakpoints
childrenReact.ReactNodeNoContent to be rendered inside the data toolbar group
innerRefRefObject<any>NoReference to pass to this group if it has .pf-m-chip-container modifier
DataToolbarToggleGroup properties
NameTypeRequiredDefaultDescription
toggleIconReact.ReactNodeYesAn icon to be rendered when the toggle group has collapsed down
breakpoint'md' | 'lg' | 'xl'YesThe breakpoint at which the toggle group is collapsed down
breakpointModsDataToolbarBreakpointMod[]No[]An array of objects representing the various modifiers to apply to the data toolbar toggle group at various breakpoints
DataToolbarFilter properties
NameTypeRequiredDefaultDescription
chips(string | DataToolbarChip)[]No[]An array of strings to be displayed as chips in the expandable content
deleteChip(category: string | DataToolbarChipGroup, chip: DataToolbarChip | string) => voidNoCallback passed by consumer used to delete a chip from the chips[]
childrenReact.ReactNodeYesContent to be rendered inside the data toolbar item associated with the chip group
categoryNamestring | DataToolbarChipGroupYesUnique category name to be used as a label for the chip group
showToolbarItembooleanNotrueFlag to show the toolbar item

CSS Variables

--pf-c-data-toolbar__content--PaddingLeftc_data_toolbar__content_PaddingLeft
1rem
--pf-c-data-toolbar__content--PaddingRightc_data_toolbar__content_PaddingRight
1rem
--pf-c-data-toolbar__expandable-content--BackgroundColorc_data_toolbar__expandable_content_BackgroundColor
#fff
--pf-c-data-toolbar__expandable-content--BoxShadowc_data_toolbar__expandable_content_BoxShadow
0 0.3125rem 0.625rem -0.25rem rgba(3,3,3,0.25)
--pf-c-data-toolbar__expandable-content--lg--PaddingBottomc_data_toolbar__expandable_content_lg_PaddingBottom
0
--pf-c-data-toolbar__expandable-content--lg--PaddingLeftc_data_toolbar__expandable_content_lg_PaddingLeft
0
--pf-c-data-toolbar__expandable-content--lg--PaddingRightc_data_toolbar__expandable_content_lg_PaddingRight
0
--pf-c-data-toolbar__expandable-content--m-expanded--GridRowGapc_data_toolbar__expandable_content_m_expanded_GridRowGap
1.5rem
--pf-c-data-toolbar__expandable-content--PaddingBottomc_data_toolbar__expandable_content_PaddingBottom
1rem
--pf-c-data-toolbar__expandable-content--PaddingLeftc_data_toolbar__expandable_content_PaddingLeft
1rem
--pf-c-data-toolbar__expandable-content--PaddingRightc_data_toolbar__expandable_content_PaddingRight
1rem
--pf-c-data-toolbar__expandable-content--PaddingTopc_data_toolbar__expandable_content_PaddingTop
1.5rem
--pf-c-data-toolbar__expandable-content--ZIndexc_data_toolbar__expandable_content_ZIndex
100
--pf-c-data-toolbar__group--m-button-group--space-itemsc_data_toolbar__group_m_button_group_space_items
0.5rem
--pf-c-data-toolbar__group--m-button-group--spacerc_data_toolbar__group_m_button_group_spacer
1rem
--pf-c-data-toolbar__group--m-chip-container__item--MarginTopc_data_toolbar__group_m_chip_container__item_MarginTop
1rem
--pf-c-data-toolbar__group--m-chip-container--MarginTopc_data_toolbar__group_m_chip_container_MarginTop
calc(1rem*-1)
--pf-c-data-toolbar__group--m-filter-group--space-itemsc_data_toolbar__group_m_filter_group_space_items
0
--pf-c-data-toolbar__group--m-filter-group--spacerc_data_toolbar__group_m_filter_group_spacer
1rem
--pf-c-data-toolbar__group--m-icon-button-group--space-itemsc_data_toolbar__group_m_icon_button_group_space_items
0
--pf-c-data-toolbar__group--m-icon-button-group--spacerc_data_toolbar__group_m_icon_button_group_spacer
1rem
--pf-c-data-toolbar__group--m-toggle-group--m-show--spacerc_data_toolbar__group_m_toggle_group_m_show_spacer
1rem
--pf-c-data-toolbar__group--m-toggle-group--spacerc_data_toolbar__group_m_toggle_group_spacer
0.5rem
--pf-c-data-toolbar__group--spacerc_data_toolbar__group_spacer
1rem
--pf-c-data-toolbar__item--m-bulk-select--spacerc_data_toolbar__item_m_bulk_select_spacer
1.5rem
--pf-c-data-toolbar__item--m-chip-group--spacerc_data_toolbar__item_m_chip_group_spacer
0.5rem
--pf-c-data-toolbar__item--m-label--FontWeightc_data_toolbar__item_m_label_FontWeight
700
--pf-c-data-toolbar__item--m-label--spacerc_data_toolbar__item_m_label_spacer
1rem
--pf-c-data-toolbar__item--m-overflow-menu--spacerc_data_toolbar__item_m_overflow_menu_spacer
1rem
--pf-c-data-toolbar__item--m-search-filter--spacerc_data_toolbar__item_m_search_filter_spacer
0.5rem
--pf-c-data-toolbar__item--m-separator--BackgroundColorc_data_toolbar__item_m_separator_BackgroundColor
#d2d2d2
--pf-c-data-toolbar__item--m-separator--Heightc_data_toolbar__item_m_separator_Height
1.125rem
--pf-c-data-toolbar__item--m-separator--spacerc_data_toolbar__item_m_separator_spacer
1rem
--pf-c-data-toolbar__item--m-separator--Widthc_data_toolbar__item_m_separator_Width
2px
--pf-c-data-toolbar__item--spacerc_data_toolbar__item_spacer
1rem
--pf-c-data-toolbar__toggle--m-expanded__c-button--m-plain--Colorc_data_toolbar__toggle_m_expanded__c_button_m_plain_Color
#151515
--pf-c-data-toolbar--BackgroundColorc_data_toolbar_BackgroundColor
#fff
--pf-c-data-toolbar--c-divider--m-vertical--spacerc_data_toolbar_c_divider_m_vertical_spacer
1rem
--pf-c-data-toolbar--PaddingBottomc_data_toolbar_PaddingBottom
1rem
--pf-c-data-toolbar--PaddingTopc_data_toolbar_PaddingTop
1rem
--pf-c-data-toolbar--RowGapc_data_toolbar_RowGap
1.5rem
--pf-c-data-toolbar--spacerc_data_toolbar_spacer
0
--pf-c-data-toolbar--spacer--basec_data_toolbar_spacer_base
1rem