PopoverFilter

pro

PopoverFilter combines a search input and checkbox list behind a popover trigger, for filtering a list or table by more than one value.

Get the code

Installation

Add this component with the NateUI CLI.

npx nateui@latest add PopoverFilter

Examples

Custom Trigger

Get the code

Hide Reset

Get the code

Placement

Get the code

API

PopoverFilter wraps Popover with a searchable checkbox list. onChange receives the matching subset of data, not the raw selected values — pair it with .map((item) => item.value) to recover a plain string array (see Usage). When renderTrigger is set it fully replaces the default trigger button, so title has no visible effect. A search term with no matches renders a plain "No results found" message in place of the checkbox list.

PropDescriptionTypeDefault
dataFilter options rendered as checkboxes.PopoverFilterOption[]—
valueControlled selected values. Re-syncs the internal selection whenever it changes.string[]—
onChangeCalled with the subset of data matching the new selection — not the raw selected values.(data: PopoverFilterOption[]) => void—
titleLabel for the default trigger button. Ignored when renderTrigger is set.string | ReactNode'Filter'
renderTriggerCustom trigger element, replacing the default button entirely.ReactNode—
placementSide the popover opens from, relative to the trigger.'bottom-start' | 'bottom-end''bottom-start'
inputPlaceholderPlaceholder text for the search input.string'Search...'
showResetShow a "Clear filters" button once at least one option is selected.booleantrue
widthWidth of the popover panel, in pixels.number220

Types

type PopoverFilterOption = {
  label: string;
  value: string;
}