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 thenonClose(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.