Skip to main content

fields

Description​

Defines the filterable fields for autocomplete, syntax highlighting, and structured parsing

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
  • label - (required) a field label
  • type - (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
  • predicate - (optional) Date part extractor ("month" or "year") for date fields

Example​

import { FilterQuery } from "@svar-ui/react-filter";

function App() {
  const fields = [
    { id: "first_name", label: "First Name", type: "text" },
    { id: "status",     label: "Status",     type: "text" },
    { id: "age",        label: "Age",         type: "number" },
    { id: "created",    label: "Created",     type: "date" },
  ];

  return <FilterQuery fields={fields} />;
}

export default App;

Details​

The fields prop defines which fields users can reference in a query. Each field includes an id, label, and type that determines how the value is interpreted.

The fields enable several features of the FilterQuery component: autocomplete suggestions, syntax highlighting for field names, and correct parsing of the query into a structured filter object. The labels are shown to users in the input and dropdown, while the corresponding IDs are used internally in the parsed value.

If no fields are provided, the input behaves like a plain text search and advanced query features such as autocomplete and highlighting are not available.

Related articles: Configuring fields