Skip to main content

fields

Description​

Required. An array with fields settings for FilterEditor

Usage​

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 field (string or number)
  • label - (required) a field label
  • type - (required) the type of a field which can be "text", "number", "date" or any custom string
  • format - (optional) number or date formatter, which can be one of the following:
    • a formatting function for number, date or other values: (value: number|Date) => string
    • a formatting string for date
  • predicate - (optional) Date part extractor ("month" or "year") for date fields

Example​

import { getData } from "./common/data";
import { FilterEditor } from "@svar-ui/react-filter";

export default function Example() {
  const { 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 `<FilterEditor field="first_name" fields={fields} options={options} />`;
}

Related articles: FilterEditor Guide