Render Filter Fields

RenderFilterFields renders the filter panel for listing pages. It reads each field’s filter configuration and renders the appropriate filter control.

Import


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

Filter Types

Filter Type	Rendered Component
`TEXT`	Input
`SELECT`	Combobox
`BOOLEAN`	BooleanToggle
`RANGE`	RangeFields
`DATE_RANGE`	RangeFields (type=date)
`DATE`	CalendarInput

Usage


import { ListingContext } from "...";
import { RenderFilterFields } from "...";
 
<ListingContext entityConfig={entityConfig}>
  <div className="filter-panel">
    <RenderFilterFields filterFields={entityFilterFields} />
  </div>
</ListingContext>

Filter Field Config

Filter fields are defined in entity metadata alongside form fields:


export const entityFilterFields = [
  { name: "name", label: "Name", filterType: "TEXT" },
  { name: "status", label: "Status", filterType: "SELECT", optionsUrl: "/api/statuses" },
  { name: "amount", label: "Amount", filterType: "RANGE" },
  { name: "createdAt", label: "Created", filterType: "DATE_RANGE" },
];

The priority field in generated entities uses RANGE filter type by default. Filter state is synced to the URL query string automatically.