Filtering
A set of components to help filter large data sets.Prop | Required | Description | Type |
|---|---|---|---|
loading | ✅ | Displays a loading spinner when true. | boolean |
children | — | Optionally pass in quick filter controls, for example SelectDropdown and Toggle. NOTE: Max 3 quick filters as per Filtering pattern guidelines. Always use small size when applicable. | ReactElement<any, string | JSXElementConstructor<any>> | [ReactElement<any, string | JSXElementConstructor<any>>, ReactElement<any, string | JSXElementConstructor<any>>, ReactElement<...>?] |
clearable | — | Displays a "Clear" button when true. As per pattern, the button should be visible when any filters are applied. | boolean |
onClear | — | Handler for the "Clear" button's onClick event. This should clear all applied filters incl. keyword filter. | () => void |
keywordFilter | — | Optionally pass an object with search input props to display a keyword filter. Use value, onChange, onClear to control the input. Pass a placeholder, in the format of Search by name, role..., which will also populate the aria-label unless provided. Size is locked to small. | Omit<SearchInputProps, "size"> & { width?: Width<string | number>; } |
Prop | Required | Description | Type |
|---|---|---|---|
onClick | — | Function to be triggered following a click event of the button. | MouseEventHandler<HTMLButtonElement> |
numberFiltersApplied | — | The number of filters applied, renders a NumberBadge. Caps at 99. Defaults to 0. | number |
disabled | — | Prevents user interaction with the button and gives it a disabled style. | boolean |
block | — | Makes the button fill its container. | false | trueSupports responsive prop syntax |