FilterForm#

@palmyralabs/rt-forms-mantine · grid/plugins/filter/FilterForm.tsx

Overview#

Filter-panel plugin. Renders an inline PalmyraForm whose fields are generated from the grid’s column definitions, wires Reset + Filter buttons to the grid’s queryRef, and calls onClose(filter) on apply.

Props — FilterOptions#

interface FilterOptions extends DataGridPluginOptions {
  onClose?:       (filter: any) => void;
  column?:        1 | 2 | 3;                 // columns in the inline field grid
  defaultFilter?: Record<string, any>;       // initial values when the grid has no filter yet
}

interface DataGridPluginOptions {
  queryRef:  RefObject<IPageQueryable>;      // injected by the grid
  columns:   ColumnDefinition[];             // the grid's column defs
  // plus grid context passthrough
}

Behaviour#

  • On mount: reads queryRef.current.getCurrentFilter() and hydrates the form.
  • Reset clears the form and calls queryRef.current.resetFilter().
  • Filter calls queryRef.current.setFilter(formData) and then onClose(formData).

Example — use as the default filter plugin#

import { FilterForm } from '@palmyralabs/rt-forms-mantine';

<PalmyraGrid
  topic="manufacturer"
  columns={manufacturerColumns}
  endPoint="/mstManufacturer"
  plugins={{ Filter: FilterForm }}
/>

FieldGenerator (companion utility)#

grid/plugins/filter/FieldGenerator.tsx exports a utility function — not a component:

function getField(fieldDef: ColumnFieldOptions, title?: any): ReactElement;

FilterForm uses getField() to map a ColumnDefinition.type to the right Mantine widget. The mapping:

type Widget
string MantineTextField
textarea MantineTextArea
password MantinePasswordField
float / number / numbersOnly MantineNumberField
radio MantineRadioGroup
select MantineSelect
multiSelect MantineMultiSelect
checkbox MantineCheckBox
switch MantineSwitch
date MantineDateInput
dateRange MantineDatePickerInput type="range"
rating MantineRating
serverlookup MantineServerLookup
(unmapped) invalid-field placeholder

Override the dispatch by subclassing PalmyraForm’s useFieldGenrator() if you need a custom column type.