FilterBar

Use the FilterBar to let users filter datasets using one or more filter controls, such as text inputs, selects, and other form elements.

OverviewPropertiesUsageAccessibility

New

FilterBarProps

Signature:

export declare type FilterBarProps = ( | ) & ;

FilterBar.Item

You can use the FilterBar.Item component to render an item inside the FilterBar, as shown above.

FilterBarItemProps

extends, ,

Name	Type	Default	Description
name			A unique identifier for this sub-filter (must only be unique for this filter). In case custom labels are used without text children, this is displayed on the MoreMenu trigger instead.
label			Description text of this sub-filter. If you use a custom label without text children, the name will be displayed on the MoreMenu instead.
children	<>		Only one element, is expected here.
showLabel?			Defines if the label is shown for the filter item. If set specifically, it also overwrites the general configuration set with the showLabels prop on the FilterBar for one item.

FilterBar.ResetButton

You can use the FilterBar.ResetButton component to render a button that resets all filters, as shown above.

ResetButtonProps

extends, , , ,

Name	Type	Default	Description
onClick	() =>		Handler that is called when the ResetButton is clicked.