fields
Description
Required. An array of objects with fields dataUsage
fields: {
id: string | number,
label: string,
type: "text" | "number" | "date" | string,
predicate?: "month" | "year",
format?: string | ((value: any) => string);
}[];
Parameters
Each field object has the following parameters:
id
- (required) the id of a fieldlabel
- (required) a field labeltype
- (required) the type of a field which can be "text"", "number", "tuple" or "date"format
- (optional) for number or date formatter, which can be one of the following:- a formatting function for number, tuple or date:
(value: number|Date) => string
- a formatting string for date
- a formatting function for number, tuple or date:
predicate
- (optional) Date part extractor ("month" or "year") for date fields
Example
import { getData } from "./common/data";
import { FilterBuilder } from "@svar-ui/react-filter";
export default function Example() {
const { value, options } = getData();
const fields = [
{ id: "first_name", label: "First Name", type: "text" },
{ id: "age", label: "Age", type: "number" },
{ id: "start", label: "Start Date", type: "date" },
];
return `<FilterBuilder value={value} options={options} fields={fields} />`;
}
Related articles: FilterBuilder Guide