Skip to main content

fields

Description​

Required. An array with fields settings for FilterBar

Usage​

fields: [
  | string 
  {
    type: string,
    id: string,
    filter?: string,
    options?: { id: string | number, label?: string }[],
    value?: any,
    label?: string,
    placeholder?: string,
  } |
  {
    type: "all" | "dynamic",
    by: (
      | string
      {
        type: string,
        id: string,
        filter?: string,
        options?: { id: string | number, label?: string }[],
        value?: any,
        label?: string,
        placeholder?: string,} )[],
    label?: string,
    placeholder?: string,
  }
]

Parameters​

The fields array can include an array of fields ids or it can contain an array of objects. An object inside the array may be a simple or combined object with parameters described below.

A simple fields object that defines settings for a single field has the next parameters:

  • type - (required) the type of a field which can be "text", "number", "date"
  • id - (required) the id of a field
  • filter - (optional) the filter operator available for this field. By default, FilterBar uses "contains" for input filters and "equal" for selectors
  • label - (optional) text label that is displayed on the left
  • placeholder - (optional) input placeholder. By default it contains field id and filter
  • options - (optional) an array of options for a field (may include strings, numbers and dates). It enables a dropdown with options for the input field
  • value - (optional) field value

A combined filter that will be applied to multiple fields at a time:

  • type - (required) filtering control:
    • "all" - combines several fields into one input filtered at once with "contains" rule joined by OR logic
    • "dynamic" - combines several fields into one input filtered in turn. Selector is created to choose which field is used for filtering at the moment.
  • label - (optional) text label displayed on the left
  • placeholder - (optional) input placeholder. By default it contains field id and filter
  • by - (required) an array of fields by which data is filtered. Each element may contains
  • string - field id ( for "all" type, this is the only options)
  • fields - the fields object

Example​

The example below shows how to add a FilterBar with a dropdown and filter data based on the selected option. To apply filtering rules to the data array, the createArrayFilter helper is used to convert the filter configuration into a function that filters the dataset.

import { useState } from "react";
import { getData } from "../data";
import { FilterBar, createArrayFilter } from "@svar-ui/react-filter";

export default function ExampleFilterBar() {
  const { data } = getData();
  const [filteredData, setFilteredData] = useState(data);

  const fields = [
    {
      id: "country",
      type: "text",
      options: ["Germany", "USA"],
      placeholder: "Select a country"
    }
  ];

  const applyFilter = (value) => {
    const filter = createArrayFilter(value);
    setFilteredData(filter(data));
  };

  return (
    `<FilterBar
      fields={fields}
      onChange={({ value }) =>` applyFilter(value)}
    />
  );
}

Related articles: FilterBar Guide