React

DataToolbar

Info alert:Experimental feature

This is an experimental feature in the early stages of testing. It's not intended for production use.
ExamplesPropsCSS Variables

Examples

Data toolbar

Copied to clipboard

Data toolbar spacers

Copied to clipboard

Data toolbar group types

Copied to clipboard

Data toolbar toggle groups

  • The Toggle group can either have the toggle state managed by the consumer, or the component. The first Toggle group example 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.

Data toolbar component managed toggle groups

Copied to clipboard

Data toolbar consumer managed toggle groups

Copied to clipboard

Data toolbar group stacked

Copied to clipboard

Props

DataToolbarContent Props

The DataToolbarContent component accepts the following props.

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

DataToolbar Props

The DataToolbar component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestringClasses applied to root element of the Data toolbar
childrenReact.ReactNodeContent to be rendered as rows in the Data toolbar
isExpandedbooleanfalseFlag indicating if a Data toolbar toggle group's expandable content is expanded
toggleIsExpanded() => voidA callback for setting the isExpanded flag
idstringId of the Data toolbar

DataToolbarGroup Props

The DataToolbarGroup component accepts the following props.

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
spacersDataToolbarSpacer[][] as DataToolbarSpacer[]Array of objects representing the various spacers to apply to the Data toolbar group at various breakpoints
itemSpacersDataToolbarSpacer[][] as DataToolbarSpacer[]Array of objects representing the spacers to apply to the items in this group at various breakpoints
childrenReact.ReactNodeContent to be rendered inside the Data toolbar group

DataToolbarItem Props

The DataToolbarItem component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestringClasses applied to root element of the Data toolbar item
variantDataToolbarItemVariant | 'separator' | 'bulk-select' | 'overflow-menu' | 'pagination' | 'search-filter' | 'label'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
spacersDataToolbarSpacer[][] as DataToolbarSpacer[]An array of objects representing the various spacers 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

DataToolbarToggleGroup Props

The DataToolbarToggleGroup component accepts the following props.

NameTypeRequiredDefaultDescription
toggleIconReact.ReactNodeAn Icon to be rendered when the toggle group has collapsed down
breakpoint'md' | 'lg' | 'xl' | '2xl'The breakpoint at which the toggle group is collapsed down
breakpointMods[] as DataToolbarBreakpointMod[]
spacers[] as DataToolbarSpacer[]

CSS Variables

--pf-c-data-toolbar--BackgroundColorc_data_toolbar_BackgroundColorvar(--pf-global--BackgroundColor--light-100)
--pf-c-data-toolbar--GridGapc_data_toolbar_GridGapvar(--pf-global--gutter)
--pf-c-data-toolbar__expandable-content--BoxShadowc_data_toolbar__expandable_content_BoxShadowvar(--pf-global--BoxShadow--md-bottom)
--pf-c-data-toolbar__expandable-content--PaddingBottomc_data_toolbar__expandable_content_PaddingBottomvar(--pf-global--spacer--md)
--pf-c-data-toolbar__expandable-content--PaddingLeftc_data_toolbar__expandable_content_PaddingLeftvar(--pf-global--spacer--md)
--pf-c-data-toolbar__expandable-content--PaddingRightc_data_toolbar__expandable_content_PaddingRightvar(--pf-global--spacer--md)
--pf-c-data-toolbar__expandable-content--PaddingTopc_data_toolbar__expandable_content_PaddingTopvar(--pf-global--spacer--md)
--pf-c-data-toolbar__expandable-content--ZIndexc_data_toolbar__expandable_content_ZIndexvar(--pf-global--ZIndex--xs)
--pf-c-data-toolbar__expandable-content--lg--PaddingBottomc_data_toolbar__expandable_content_lg_PaddingBottom0
--pf-c-data-toolbar__expandable-content--lg--PaddingLeftc_data_toolbar__expandable_content_lg_PaddingLeft0
--pf-c-data-toolbar__expandable-content--lg--PaddingRightc_data_toolbar__expandable_content_lg_PaddingRight0
--pf-c-data-toolbar__expandable-content--lg--PaddingTopc_data_toolbar__expandable_content_lg_PaddingTop0
--pf-c-data-toolbar__expandable-content--m-expanded--GridRowGapc_data_toolbar__expandable_content_m_expanded_GridRowGapvar(--pf-global--gutter)
--pf-c-data-toolbar__group--m-button-group--space-itemsc_data_toolbar__group_m_button_group_space_itemsvar(--pf-global--spacer--sm)
--pf-c-data-toolbar__group--m-button-group--spacerc_data_toolbar__group_m_button_group_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__group--m-filter-group--space-itemsc_data_toolbar__group_m_filter_group_space_items0
--pf-c-data-toolbar__group--m-filter-group--spacerc_data_toolbar__group_m_filter_group_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__group--m-icon-button-group--space-itemsc_data_toolbar__group_m_icon_button_group_space_items0
--pf-c-data-toolbar__group--m-icon-button-group--spacerc_data_toolbar__group_m_icon_button_group_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__group--m-toggle-group--m-reveal--spacerc_data_toolbar__group_m_toggle_group_m_reveal_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__group--m-toggle-group--spacerc_data_toolbar__group_m_toggle_group_spacervar(--pf-global--spacer--sm)
--pf-c-data-toolbar__group--spacerc_data_toolbar__group_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__item--m-bulk-select--spacerc_data_toolbar__item_m_bulk_select_spacervar(--pf-global--spacer--lg)
--pf-c-data-toolbar__item--m-chip-group--spacerc_data_toolbar__item_m_chip_group_spacervar(--pf-global--spacer--sm)
--pf-c-data-toolbar__item--m-label--FontWeightc_data_toolbar__item_m_label_FontWeightvar(--pf-global--FontWeight--bold)
--pf-c-data-toolbar__item--m-label--spacerc_data_toolbar__item_m_label_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__item--m-overflow-menu--spacerc_data_toolbar__item_m_overflow_menu_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__item--m-search-filter--spacerc_data_toolbar__item_m_search_filter_spacervar(--pf-global--spacer--sm)
--pf-c-data-toolbar__item--m-separator--BackgroundColorc_data_toolbar__item_m_separator_BackgroundColorvar(--pf-global--BorderColor--dark-100)
--pf-c-data-toolbar__item--m-separator--Heightc_data_toolbar__item_m_separator_Heightvar(--pf-global--FontSize--lg)
--pf-c-data-toolbar__item--m-separator--Widthc_data_toolbar__item_m_separator_Widthvar(--pf-global--BorderWidth--md)
--pf-c-data-toolbar__item--m-separator--spacerc_data_toolbar__item_m_separator_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__item--spacerc_data_toolbar__item_spacervar(--pf-global--spacer--md)
--pf-c-data-toolbar__toggle--c-badge--MarginLeftc_data_toolbar__toggle_c_badge_MarginLeftvar(--pf-global--spacer--sm)
--pf-c-data-toolbar--spacerc_data_toolbar_spacervar(--pf-global--spacer--lg)
--pf-c-data-toolbar--spacer--basec_data_toolbar_spacer_basevar(--pf-global--spacer--md)