ListingFilters

A collapsible panel rendered above the listing table. It maps an array of FilterField configs to filter inputs via RenderFilterFields, manages local filter state, and on submit pushes a new URL query string so the active filters are shareable and bookmarkable.

Key capabilities:

Filter presets: visible fields are persisted per-user in the KVS store.
Default filter values: also persisted in KVS, layered on top of the hardcoded defaultFilters prop.
Range filters: numeric, date, and select fields support min/max range mode.
Search strategies: text fields can expose Exact / Contains / Starts With / Ends With selectors.
Tree filter: when hasTreeView is true, a tree hierarchy picker appears to scope the listing to a subtree. See Tree View for the hierarchy options and the query parameters they produce.

Import


import ListingFilters from "@phpcreation/frontend-crud-react-nextjs-bundle/components/Listing/Filters";

Props

Prop	Type	Required	Description
`fqcn_bui`	`IFQCN_BUI`	Yes	Used for element IDs and KVS keys.
`resource`	`string`	Yes	API resource name, also used to key the KVS filter state.
`filterFields`	`FilterField[]`	Yes	Array of filter field definitions.
`tenant`	`string`	Yes	Tenant identifier.
`defaultFilters`	`Record<string, any>`	No	Hard-coded filters always applied as base values.
`locale`	`string`	No	Active locale, defaults to `"en"`.
`hasTreeView`	`boolean`	No	Enables the tree hierarchy selector within the filter panel.
`user`	`User \| null`	No	Used to scope KVS reads to the current user.

FilterField — filter-specific properties

Beyond the base FilterField shape, these properties are handled by ListingFilters:

Property	Type	Description
`default`	`boolean`	If `true`, the field is visible without expanding “Show all filters”.
`range`	`boolean`	Render a min/max range variant of the field.
`rangeKeys`	`{ min: string; max: string }`	Custom query-string keys for the range bounds.
`searchMethods`	`string[]`	E.g. `["exact", "partial", "start", "end"]` — shows a strategy selector.

Filter priority order (highest wins): URL query string → KVS saved values → defaultFilters prop → FilterField.defaultValue.

Usage

Basic


import ListingFilters from "@phpcreation/frontend-crud-react-nextjs-bundle/components/Listing/Filters";
 
<ListingFilters
  fqcn_bui={{ Bundle: "BillBundle", Unit: "Invoice", Interface: "filters" }}
  resource="invoices"
  filterFields={[
    { key: "status",    type: ColumnTypeEnum.SELECT_ASYNC, targetResourceAsync: "statuses", default: true },
    { key: "createdAt", type: ColumnTypeEnum.DATE,         range: true, default: true },
    { key: "total",     type: ColumnTypeEnum.CURRENCY,     range: true },
  ]}
  defaultFilters={{ "order[createdAt]": "DESC" }}
  tenant="acme"
  locale="en"
/>