FilterSidebar

FilterSidebar splits a dashboard page into a resizable filter rail and a content pane. On narrow screens the same choices move into a drawer behind a summary button.

import { FilterSidebar } from '@lobehub/ui/dashboard';

NPM Source Edit

Layout

Default

Loading preview

FilterRow is the label-and-count pair for a tree node. FilterOption is a choice in a flat list. useInFilterSplit reports when the split itself is the card, so a nested table can drop its own frame.

APIs

FilterSidebar properties

bodyRequired: (dismiss: () => void) => ReactNode
Scrolling choices. `dismiss` closes the compact drawer.
childrenRequired: ReactNode
flush: boolean
Fill the parent and scroll the two panes separately. Leave this off when a header or tabs sit above the split.
head: (dismiss: () => void) => ReactNode
Fixed controls, such as search. They stay put while `body` scrolls. `dismiss` closes the compact drawer.
header: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
Title block rendered in the content pane, above the compact trigger.
labelRequired: string
Names the sidebar, and titles the drawer on compact screens.
storageKey: string
Persists width and collapsed state.
summaryRequired: string
Current filter, shown on the compact trigger.
wide: boolean
Wider rail. Default width is 264px; wide is 300px.

FilterOption properties

count: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
icon: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
label: string
Overrides the accessible name when the visible one lacks context.
nameRequired: ReactNode
onClickRequired: () => void
selectedRequired: boolean
title: string

FilterRow

FilterRow properties

count: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
nameRequired: ReactNode