Skip to Content
Patternfly Logo

Catalog view filter side panel

IntroductionExamplesProps

Introduction

Note: FilterSidePanel lives in its own package at @patternfly/react-catalog-view-extension!

Note: the width, border, and top padding styling are not part of the FilterSidePanel.

This package is currently an extension. Extension components do not undergo the same rigorous design or coding review process as core PatternFly components. If enough members of the community find them useful, we will work to move them into our core PatternFly system by starting the design process for the idea.

Examples

Basic

Type
Manufacturer
Payment Options
Fuel Mileage
Rating

Props

FilterSidePanel properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullChildren nodes
classNamestringNo''Additional css classes for the Filter Side Panel
FilterSidePanelCategory properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullChildren nodes
classNamestringNo''Additional css classes for the Filter Side Panel Category
titlestring | React.ReactNodeNonullTitle for the category
maxShowCountnumberNo5Number of items (max) to show before adding Show More link button
leewaynumberNo2Leeway to add to maxShowCount, minimum X for the 'Show X more'
showAllbooleanNofalseFlag to show all items (ie. set to true after Show X more link is clicked)
onShowAllToggle(event: React.SyntheticEvent<HTMLElement>) => voidNo() => nullCallback function when the Show/Hide link button is clicked
showTextstringNonullText for the link to show all items, default 'Show <x> more'
hideTextstringNonullText for the link to hide overflow items, default 'Show less'
FilterSidePanelCategoryItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullChildren nodes
classNamestringNo''Additional css classes for the Filter Panel Property Item
iconReact.ReactNodeNonullOptional icon (or other) to show before the children
countnumberNonullOptional count of the items matching the filter
onClick(event: React.SyntheticEvent<HTMLElement>) => voidNonullCallback for a click on the Filter Item Checkbox
checkedbooleanNofalseFlag to show if the Filter Item Checkbox is checked.