Filter Modal

FilterModal opens a dedicated modal for applying complex filters to the listing. Useful when there are too many filter fields to show inline.

Import


import { FilterModal } from "@phpcreation/frontend-crud-react-nextjs-bundle/components/FilterModal";

Usage


import { FilterModal } from "...";
 
<FilterModal
  open={filterOpen}
  onOpenChange={setFilterOpen}
  filterFields={entityFilterFields}
  initialValues={currentFilters}
  onApply={(filters) => {
    setFilters(filters);
    setFilterOpen(false);
  }}
  onReset={() => {
    clearFilters();
    setFilterOpen(false);
  }}
/>

Props

Prop	Type	Description
`open`	`boolean`	Modal open state
`onOpenChange`	`(open: boolean) => void`	Open state handler
`filterFields`	`FieldConfig[]`	Filter field definitions
`initialValues`	`Record<string, unknown>`	Pre-populated filter values
`onApply`	`(filters: Record<string, unknown>) => void`	Apply callback
`onReset`	`() => void`	Reset/clear callback

FilterModal uses RenderFilterFields internally — all filter field types (range, date, select) work the same as the inline filter panel.

Filter Modal

Import

Usage

Props

Related