JotaiFilterBar

API reference and demos for JotaiFilterBar.

Source

Import

import { JotaiFilterBar } from "@flanksource/clicky-ui/components";

Demos

Url Query Params · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
applyLabel	string	—	Label for the Apply button.
autoSubmit	boolean	—	When false, debounced fields forward edits immediately and an Apply button is rendered in the trailing slot. Defaults to true.
children	ReactNode	—	Additional content rendered in the filter row.
className	string	—	Classes applied to the root bar.
dateRange	JotaiFilterBarRangeProps	—	—
filters	JotaiFilterBarFilter[]	—	—
isPending	boolean	—	Shows a pending state on the Apply button.
leading	ReactNode	—	Content rendered before search and filters.
onApply	(…) => void	—	Called by the Apply button when `autoSubmit` is false.
overflowMode	enum	—	`responsive` moves hidden filters into an overflow popover; `wrap` lets them wrap. Below the `md` breakpoint both modes collapse every filter into the Filters sheet, so a phone never stacks one filter per row.
overlay	ReactNode	—	Content that takes the bar's place while it is present — a bulk-action bar that owns the row while rows are selected, say. The bar's own controls stay mounted, hidden rather than unmounted, so a half-typed search survives the takeover and the row keeps whichever of the two is taller. Nothing below it moves.
search	JotaiFilterBarSearchProps	—	—
timeRange	JotaiFilterBarRangeProps	—	—
trailing	ReactNode	—	Content rendered at the end of the bar.