React

Data toolbar

Info alert:Experimental feature

This is an experimental feature in the early stages of testing. It's not intended for production use.
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

  • Status

    • New
    • Pending
  • Risk

    • Low

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() => voidOptional callback for clearing all filters in the toolbar
collapseListedFiltersBreakpoint'md' | 'lg' | 'xl' | '2xl'The breakpoint at which the listed fitlers in chip groups are collapsed down to a summary
isExpandedbooleanFlag indicating if a data toolbar toggle group's expandable content is expanded
toggleIsExpanded() => voidA callback for setting the isExpanded flag
classNamestringClasses applied to root element of the data toolbar
childrenReact.ReactNodeContent to be rendered as rows in the data toolbar
idstringId of the data toolbar
DataToolbarContent properties
NameTypeRequiredDefaultDescription
classNamestringClasses applied to root element of the data toolbar content row
breakpointModsDataToolbarBreakpointMod[][] as DataToolbarBreakpointMod[]An array of objects representing the various modifiers to apply to the content row at various breakpoints
childrenReact.ReactNodeContent to be rendered as children of the content row
isExpandedbooleanfalseFlag indicating if a data toolbar toggle group's expandable content is expanded
clearAllFilters() => voidOptional callback for clearing all filters in the toolbar
showClearFiltersButtonbooleanfalseFlag indicating that the clear all filters button should be visible
toolbarIdstringId of the parent DataToolbar component
DataToolbarItem properties
NameTypeRequiredDefaultDescription
classNamestringClasses applied to root element of the data toolbar item
variantDataToolbarItemVariant | 'separator' | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter' | 'label' | 'chip-group'A type modifier which modifies spacing specifically depending on the type of item
breakpointModsDataToolbarBreakpointMod[][] as DataToolbarBreakpointMod[]An array of objects representing the various modifiers to apply to the data toolbar item at various breakpoints
idstringid for this data toolbar item
childrenReact.ReactNodeContent to be rendered inside the data toolbar item
DataToolbarGroup properties
NameTypeRequiredDefaultDescription
classNamestringClasses applied to root element of the data toolbar group
variantDataToolbarGroupVariant | 'filter-group' | 'icon-button-group' | 'button-group'A type modifier which modifies spacing specifically depending on the type of group
breakpointModsDataToolbarBreakpointMod[][] as DataToolbarBreakpointMod[]Array of objects representing the various modifiers to apply to the data toolbar group at various breakpoints
childrenReact.ReactNodeContent to be rendered inside the data toolbar group
DataToolbarToggleGroup properties
NameTypeRequiredDefaultDescription
toggleIconReact.ReactNodeAn icon to be rendered when the toggle group has collapsed down
breakpoint'md' | 'lg' | 'xl'The breakpoint at which the toggle group is collapsed down
breakpointMods[] as DataToolbarBreakpointMod[]null
DataToolbarFilter properties
NameTypeRequiredDefaultDescription
chips(string | DataToolbarChip)[][] as string[]An array of strings to be displayed as chips in the expandable content
deleteChip(category: string, chip: DataToolbarChip | string) => voidCallback passed by consumer used to delete a chip from the chips[]
childrenReact.ReactNodeContent to be rendered inside the data toolbar item associated with the chip group
categoryNamestringUnique category name to be used as a label for the chip group
showToolbarItembooleantrueFlag to show the toolbar item

CSS Variables

--pf-c-data-toolbar__content--m-chip-container__item--MarginTopc_data_toolbar__content_m_chip_container__item_MarginTop
var(--pf-global--spacer--md)
--pf-c-data-toolbar__content--m-chip-container--MarginTopc_data_toolbar__content_m_chip_container_MarginTop
calc(var(--pf-global--spacer--md) * -1)
--pf-c-data-toolbar__content--PaddingLeftc_data_toolbar__content_PaddingLeft
var(--pf-global--spacer--lg)
--pf-c-data-toolbar__content--PaddingRightc_data_toolbar__content_PaddingRight
var(--pf-global--spacer--lg)
--pf-c-data-toolbar__expandable-content--BackgroundColorc_data_toolbar__expandable_content_BackgroundColor
var(--pf-global--BackgroundColor--light-100)
--pf-c-data-toolbar__expandable-content--BoxShadowc_data_toolbar__expandable_content_BoxShadow
var(--pf-global--BoxShadow--md-bottom)
--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
var(--pf-global--gutter)
--pf-c-data-toolbar__expandable-content--PaddingBottomc_data_toolbar__expandable_content_PaddingBottom
var(--pf-global--spacer--md)
--pf-c-data-toolbar__expandable-content--PaddingLeftc_data_toolbar__expandable_content_PaddingLeft
var(--pf-global--spacer--lg)
--pf-c-data-toolbar__expandable-content--PaddingRightc_data_toolbar__expandable_content_PaddingRight
var(--pf-global--spacer--lg)
--pf-c-data-toolbar__expandable-content--PaddingTopc_data_toolbar__expandable_content_PaddingTop
var(--pf-global--spacer--lg)
--pf-c-data-toolbar__expandable-content--ZIndexc_data_toolbar__expandable_content_ZIndex
var(--pf-global--ZIndex--xs)
--pf-c-data-toolbar__group--m-button-group--space-itemsc_data_toolbar__group_m_button_group_space_items
var(--pf-global--spacer--sm)
--pf-c-data-toolbar__group--m-button-group--spacerc_data_toolbar__group_m_button_group_spacer
var(--pf-global--spacer--md)
--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
var(--pf-global--spacer--md)
--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
var(--pf-global--spacer--md)
--pf-c-data-toolbar__group--m-toggle-group--m-show--spacerc_data_toolbar__group_m_toggle_group_m_show_spacer
var(--pf-global--spacer--md)
--pf-c-data-toolbar__group--m-toggle-group--spacerc_data_toolbar__group_m_toggle_group_spacer
var(--pf-global--spacer--sm)
--pf-c-data-toolbar__group--spacerc_data_toolbar__group_spacer
var(--pf-global--spacer--md)
--pf-c-data-toolbar__item--m-bulk-select--spacerc_data_toolbar__item_m_bulk_select_spacer
var(--pf-global--spacer--lg)
--pf-c-data-toolbar__item--m-chip-group--spacerc_data_toolbar__item_m_chip_group_spacer
var(--pf-global--spacer--sm)
--pf-c-data-toolbar__item--m-label--FontWeightc_data_toolbar__item_m_label_FontWeight
var(--pf-global--FontWeight--bold)
--pf-c-data-toolbar__item--m-label--spacerc_data_toolbar__item_m_label_spacer
var(--pf-global--spacer--md)
--pf-c-data-toolbar__item--m-overflow-menu--spacerc_data_toolbar__item_m_overflow_menu_spacer
var(--pf-global--spacer--md)
--pf-c-data-toolbar__item--m-search-filter--spacerc_data_toolbar__item_m_search_filter_spacer
var(--pf-global--spacer--sm)
--pf-c-data-toolbar__item--m-separator--BackgroundColorc_data_toolbar__item_m_separator_BackgroundColor
var(--pf-global--BorderColor--dark-100)
--pf-c-data-toolbar__item--m-separator--Heightc_data_toolbar__item_m_separator_Height
var(--pf-global--FontSize--lg)
--pf-c-data-toolbar__item--m-separator--spacerc_data_toolbar__item_m_separator_spacer
var(--pf-global--spacer--md)
--pf-c-data-toolbar__item--m-separator--Widthc_data_toolbar__item_m_separator_Width
var(--pf-global--BorderWidth--md)
--pf-c-data-toolbar__item--spacerc_data_toolbar__item_spacer
var(--pf-global--spacer--md)
--pf-c-data-toolbar__toggle--m-expanded__c-button--m-plain--Colorc_data_toolbar__toggle_m_expanded__c_button_m_plain_Color
var(--pf-global--Color--dark-100)
--pf-c-data-toolbar--BackgroundColorc_data_toolbar_BackgroundColor
var(--pf-global--BackgroundColor--light-100)
--pf-c-data-toolbar--PaddingBottomc_data_toolbar_PaddingBottom
var(--pf-global--spacer--md)
--pf-c-data-toolbar--PaddingTopc_data_toolbar_PaddingTop
var(--pf-global--spacer--md)
--pf-c-data-toolbar--RowGapc_data_toolbar_RowGap
var(--pf-global--spacer--lg)
--pf-c-data-toolbar--spacerc_data_toolbar_spacer
var(--pf-global--spacer--lg)
--pf-c-data-toolbar--spacer--basec_data_toolbar_spacer_base
var(--pf-global--spacer--md)