### Install SVAR React Filter

Source: https://context7.com/svar-widgets/react-filter/llms.txt

Install the library using npm. This command adds the necessary packages to your project.

```bash
npm install @svar-ui/react-filter
```

--------------------------------

### FilterEditor Component Examples

Source: https://context7.com/svar-widgets/react-filter/llms.txt

Demonstrates various configurations of the FilterEditor component for text, number, and date filters, including inline usage without buttons.

```jsx
import { useState } from 'react';
import { FilterEditor } from '@svar-ui/react-filter';
import '@svar-ui/react-filter/all.css';

function FilterEditorDemo() {
  const [filterValue, setFilterValue] = useState({});

  const options = ['Alex', 'Adam', 'Agata', 'Daisy', 'John', 'Jane'];

  const handleChange = ({ value }) => {
    setFilterValue(value);
    console.log('Filter changed:', JSON.stringify(value, null, 2));
  };

  const handleApply = ({ value }) => {
    console.log('Filter applied:', JSON.stringify(value, null, 2));
  };

  return (
    <>
      {/* Text filter with options */}
      <FilterEditor
        type="text"
        options={options}
        filter="beginsWith"
        value="A"
        includes={['Alex']}
        onChange={handleChange}
        onApply={handleApply}
      />

      {/* Number filter */}
      <FilterEditor
        type="number"
        options={[24, 26, 33, 35, 44, 45, 62]}
        filter="greater"
        value={30}
        onChange={handleChange}
      />

      {/* Date filter */}
      <FilterEditor
        type="date"
        filter="between"
        value={{ start: new Date('2024-01-01'), end: new Date('2025-01-01') }}
        onChange={handleChange}
      />

      {/* Without buttons (for inline use) */}
      <FilterEditor
        type="text"
        buttons={false}
        options={options}
        onChange={handleChange}
      />
    </>
  );
}
// Props: type (text|number|date), options, filter, value, includes, buttons, onChange, onApply, onCancel
```

--------------------------------

### Basic FilterBuilder Usage

Source: https://context7.com/svar-widgets/react-filter/llms.txt

Demonstrates the basic setup of the FilterBuilder component with fields, options, and initial filter values. It also shows how to use createArrayFilter to filter local data.

```jsx
import { useState, useCallback } from 'react';
import { FilterBuilder, createArrayFilter } from '@svar-ui/react-filter';
import '@svar-ui/react-filter/all.css';

function App() {
  const fields = [
    { id: 'first_name', label: 'First Name', type: 'text' },
    { id: 'last_name', label: 'Last Name', type: 'text' },
    { id: 'age', label: 'Age', type: 'number' },
    { id: 'country', label: 'Country', type: 'text' },
    { id: 'start_date', label: 'Start Date', type: 'date' },
  ];

  const options = {
    first_name: ['Alex', 'Adam', 'Daisy', 'John', 'Jane'],
    country: ['USA', 'China', 'Germany'],
    age: [24, 26, 33, 35, 44, 45, 62],
  };

  const initialValue = {
    glue: 'or',
    rules: [
      { field: 'first_name', filter: 'equal', value: 'Alex' },
      { field: 'first_name', includes: ['Daisy'] },
      {
        glue: 'and',
        rules: [
          { field: 'age', filter: 'greater', value: 40 },
          { field: 'age', filter: 'less', value: 60 },
        ],
      },
      {
        field: 'start_date',
        filter: 'between',
        type: 'date',
        value: { start: new Date('2024-11-01'), end: new Date('2025-05-01') },
      },
    ],
  };

  const data = [
    { first_name: 'Alex', last_name: 'Wonski', country: 'USA', age: 26 },
    { first_name: 'Daisy', last_name: 'Bounce', country: 'Germany', age: 33 },
    { first_name: 'John', last_name: 'Wane', country: 'USA', age: 24 },
    { first_name: 'Jane', last_name: 'Wane', country: 'USA', age: 44 },
  ];

  const [filteredData, setFilteredData] = useState(() => {
    const filter = createArrayFilter(initialValue);
    return filter(data);
  });

  const handleChange = useCallback(({ value }) => {
    const filter = createArrayFilter(value);
    setFilteredData(filter(data));
  }, [data]);

  return (
    <FilterBuilder
      value={initialValue}
      fields={fields}
      options={options}
      onChange={handleChange}
    />
  );
}

```

--------------------------------

### Access FilterBuilder API via Ref

Source: https://context7.com/svar-widgets/react-filter/llms.txt

Use `useRef` to get access to the FilterBuilder's API. Initialize the API with event intercepts for 'add-rule' and 'add-group' to disable auto-edit mode, and listen to 'change' events.

```jsx
import { useRef, useCallback } from 'react';
import { FilterBuilder } from '@svar-ui/react-filter';
import '@svar-ui/react-filter/all.css';

function FilterBuilderWithAPI() {
  const apiRef = useRef(null);

  const fields = [
    { id: 'first_name', label: 'First Name', type: 'text' },
    { id: 'age', label: 'Age', type: 'number' },
  ];

  const options = {
    first_name: ['Alex', 'Adam', 'Daisy'],
    age: [24, 26, 33, 45],
  };

  const value = {
    glue: 'or',
    rules: [{ field: 'first_name', filter: 'equal', value: 'Alex' }],
  };

  // Initialize API with event intercepts
  const initAPI = useCallback((api) => {
    // Intercept add-rule to disable auto-edit mode
    api.intercept('add-rule', (ev) => {
      ev.edit = false;
    });

    // Intercept add-group event
    api.intercept('add-group', (ev) => {
      ev.edit = false;
    });

    // Listen to change events
    api.on('change', () => {
      console.log('Filter changed');
    });
  }, []);

  const showValue = () => {
    if (apiRef.current) {
      const currentValue = apiRef.current.getValue();
      console.log('Current filter value:', JSON.stringify(currentValue, null, 2));
    }
  };

  const getState = () => {
    if (apiRef.current) {
      const state = apiRef.current.getState();
      console.log('Current state:', state);
    }
  };

  return (
    <>
      <button onClick={showValue}>Get Value</button>
      <button onClick={getState}>Get State</button>
      <FilterBuilder
        ref={apiRef}
        value={value}
        fields={fields}
        options={options}
        init={initAPI}
      />
    </>
  );
}
// API methods: getValue(), getState(), getReactiveState(), exec(), on(), intercept(), detach()
```

--------------------------------

### Convert Filter Configuration to Query String and HTML

Source: https://context7.com/svar-widgets/react-filter/llms.txt

Use getQueryString to convert filter configurations into a readable query string. getQueryHtml can then be used to render this query string with syntax highlighting, requiring field definitions for proper rendering.

```jsx
import { getQueryString, getQueryHtml } from '@svar-ui/react-filter';

const fields = [
  { id: 'first_name', label: 'First Name', type: 'text' },
  { id: 'age', label: 'Age', type: 'number' },
  { id: 'country', label: 'Country', type: 'text' },
];

const filterConfig = {
  glue: 'and',
  rules: [
    { field: 'first_name', filter: 'contains', value: 'Alex' },
    { field: 'age', filter: 'greater', value: 30 },
  ],
};

// Convert to query string
const queryResult = getQueryString(filterConfig);
console.log(queryResult.query);
// Output: "First Name: *Alex* and Age: >30"

// Convert to highlighted HTML for display
const htmlResult = getQueryHtml(queryResult.query, { fields });
console.log(htmlResult);
// Output: HTML with syntax highlighting for fields, operators, values
```

--------------------------------

### Import and Use FilterBuilder Component

Source: https://github.com/svar-widgets/react-filter/blob/main/README.md

Import the FilterBuilder component and its CSS, then use it with a defined fields array. Ensure the fields array contains objects with id, label, and type properties.

```jsx
import { FilterBuilder } from "@svar-ui/react-filter";
import "@svar-ui/react-filter/all.css";

const fields = [
    {
        id: "first_name",
        label: "First Name",
        type: "text",
    },
    {
        id: "last_name",
        label: "Last Name",
        type: "text",
    },
];
const myComponent => (<FilterBuilder fields={fields} />);

```

--------------------------------

### Load FilterBuilder Options Dynamically

Source: https://context7.com/svar-widgets/react-filter/llms.txt

Load filter options on demand when a new filter is added by providing an async function to the `options` prop. This is useful for large datasets or backend-driven options.

```jsx
import { useState, useCallback } from 'react';
import { FilterBuilder, createArrayFilter } from '@svar-ui/react-filter';
import '@svar-ui/react-filter/all.css';

function FilterBuilderDynamicOptions() {
  const fields = [
    { id: 'first_name', label: 'First Name', type: 'text' },
    { id: 'last_name', label: 'Last Name', type: 'text' },
    { id: 'country', label: 'Country', type: 'text' },
    { id: 'age', label: 'Age', type: 'number' },
  ];

  const optionsData = {
    first_name: ['Alex', 'Adam', 'Agata', 'Daisy', 'John', 'Jane'],
    last_name: ['Wonski', 'Kareki', 'Smith', 'Bounce', 'Wane'],
    country: ['USA', 'China', 'Germany'],
    age: [24, 26, 33, 35, 44, 45, 62],
  };

  const value = {
    glue: 'or',
    rules: [
      { field: 'first_name', filter: 'equal', type: 'text', value: 'Alex' },
    ],
  };

  // Async function to load options on demand
  const provideOptions = useCallback(async (fieldId) => {
    // Simulate network delay
    await new Promise((resolve) => setTimeout(resolve, 300));
    return optionsData[fieldId] || [];
  }, []);

  return (
    <FilterBuilder
      fields={fields}
      value={value}
      options={provideOptions}
      onChange={({ value }) => console.log('Filter:', value)}
    />
  );
}
// Options can be: object with field IDs as keys, or async function (fieldId) => Promise<array>
```

--------------------------------

### FilterBar with Combined and Dynamic Fields

Source: https://context7.com/svar-widgets/react-filter/llms.txt

Use 'all' type to filter multiple fields with a single input, or 'dynamic' type to let users select which field to filter. Ensure '@svar-ui/react-filter/all.css' is imported.

```jsx
import { useState, useCallback } from 'react';
import { FilterBar, createArrayFilter } from '@svar-ui/react-filter';
import '@svar-ui/react-filter/all.css';

function FilterBarAdvanced() {
  const data = [
    { first_name: 'Alex', last_name: 'Wonski', country: 'USA', age: 26, start: new Date('2025-01-03') },
    { first_name: 'Daisy', last_name: 'Bounce', country: 'Germany', age: 33, start: new Date('2024-12-04') },
    { first_name: 'John', last_name: 'Wane', country: 'USA', age: 24, start: new Date('2025-02-01') },
  ];

  const [filteredData, setFilteredData] = useState(data);

  // Combined field - single input filters multiple fields
  const fieldsWithAll = [
    {
      type: 'text',
      id: 'country',
      label: 'Filter by country',
      placeholder: 'Select country',
      options: ['USA', 'China', 'Germany'],
    },
    {
      type: 'all',
      label: 'Filter by many fields',
      by: ['age', 'first_name', 'last_name'], // Fields to search across
    },
  ];

  // Dynamic field - user selects which field to filter
  const fieldsWithDynamic = [
    {
      type: 'number',
      id: 'age',
      filter: 'greater',
      options: [24, 26, 33, 44],
      placeholder: 'Older than..',
      label: 'Age',
    },
    {
      type: 'dynamic',
      label: 'Select a field to filter',
      by: [
        { id: 'first_name', type: 'text', filter: 'contains', placeholder: 'Enter first name' },
        'last_name',
        { type: 'text', id: 'country', options: ['USA', 'China', 'Germany'] },
        { type: 'date', filter: 'greater', id: 'start', value: new Date('2025-01-01') },
      ],
    },
  ];

  const applyFilter = useCallback((value) => {
    const filter = createArrayFilter(value);
    setFilteredData(filter(data));
  }, [data]);

  return (
    <>
      <FilterBar fields={fieldsWithAll} onChange={({ value }) => applyFilter(value)} />
      <FilterBar fields={fieldsWithDynamic} onChange={({ value }) => applyFilter(value)} />
    </>
  );
}
// type: 'all' - single input searches multiple fields
// type: 'dynamic' - dropdown to select which field to filter
```

--------------------------------

### FilterQuery Component for Structured Search

Source: https://context7.com/svar-widgets/react-filter/llms.txt

A YouTrack-style search input that accepts structured queries with syntax highlighting and autocomplete. Ensure '@svar-ui/react-filter/all.css' is imported.

```jsx
import { useState, useCallback } from 'react';
import { FilterQuery, createArrayFilter } from '@svar-ui/react-filter';
import '@svar-ui/react-filter/all.css';

function FilterQueryDemo() {
  const fields = [
    { id: 'first_name', label: 'First Name', type: 'text' },
    { id: 'last_name', label: 'Last Name', type: 'text' },
    { id: 'age', label: 'Age', type: 'number' },
    { id: 'country', label: 'Country', type: 'text' },
    { id: 'status', label: 'Status', type: 'text' },
  ];

  const options = {
    first_name: ['Alex', 'Adam', 'Daisy', 'John', 'Jane'],
    country: ['USA', 'China', 'Germany'],
    status: ['urgent', 'todo', 'review', 'done', 'blocked'],
  };

  const data = [
    { first_name: 'Alex', last_name: 'Wonski', country: 'USA', age: 26, status: 'review' },
    { first_name: 'Daisy', last_name: 'Bounce', country: 'Germany', age: 33, status: 'done' },
    { first_name: 'John', last_name: 'Wane', country: 'USA', age: 24, status: 'urgent' },
  ];

  const [filteredData, setFilteredData] = useState(data);

  const handleFilter = useCallback(({ value, error, text }) => {
    if (error) {
      console.warn('Parse error:', error.message);
      if (error.code !== 'NO_DATA') return;
    }

    const filter = createArrayFilter(value, {}, fields);
    setFilteredData(filter(data));
  }, [data, fields]);

  return (
    <FilterQuery
      value=""
      placeholder="e.g., FirstName: Alex or #urgent"
      fields={fields}
      options={options}
      onChange={handleFilter}
    />
  );
}
// Query syntax examples:
// - FirstName: Alex
// - Age: >30 and Country: USA
// - #urgent or #todo (hashtag matches any field)
// - *Alex* (wildcard search)
// - Free text searches all fields
```

--------------------------------

### Natural Language Filtering with AI

Source: https://context7.com/svar-widgets/react-filter/llms.txt

Use FilterQuery with parse="none" to integrate with an AI backend for natural language query processing. Requires a custom `text2filter` function to convert natural language to a filter configuration.

```jsx
import { useState } from 'react';
import { FilterQuery, createArrayFilter, getQueryHtml, getQueryString } from '@svar-ui/react-filter';
import '@svar-ui/react-filter/all.css';

function FilterQueryNaturalLanguage() {
  const fields = [
    { id: 'first_name', label: 'First Name', type: 'text' },
    { id: 'age', label: 'Age', type: 'number' },
    { id: 'country', label: 'Country', type: 'text' },
  ];

  const data = [
    { first_name: 'Alex', age: 26, country: 'USA' },
    { first_name: 'Daisy', age: 33, country: 'Germany' },
    { first_name: 'John', age: 44, country: 'USA' },
  ];

  const [filteredData, setFilteredData] = useState(data);
  const [filterConfig, setFilterConfig] = useState(null);

  // Convert natural text to filter via AI backend
  async function text2filter(text, fields) {
    const response = await fetch('https://your-ai-backend/text-to-json', {
      method: 'POST',
      body: JSON.stringify({ text, fields }),
    });
    if (!response.ok) return null;
    return await response.json();
  }

  async function handleFilter({ text, startProgress, endProgress }) {
    if (!text) {
      setFilterConfig(null);
      setFilteredData(data);
      return;
    }

    try {
      startProgress(); // Show loading indicator
      const filterValue = await text2filter(text, fields);
      if (filterValue) {
        setFilterConfig(filterValue);
        const filter = createArrayFilter(filterValue);
        setFilteredData(filter(data));
      }
    } finally {
      endProgress(); // Hide loading indicator
    }
  }

  // Display structured query from filter config
  const queryHTML = filterConfig
    ? getQueryHtml(getQueryString(filterConfig).query, { fields })
    : '';

  return (
    <>
      <FilterQuery
        placeholder="e.g., first name contains Alex and age greater than 30"
        onChange={handleFilter}
        parse="none"
      />
      <div dangerouslySetInnerHTML={{ __html: queryHTML }} />
    </>
  );
}
// parse modes: 'allowFreeText' (default), 'strict', 'none' (for custom/AI parsing)
// Natural language examples: "Alex, below forty", "age greater than 30 from USA"

```

--------------------------------

### FilterEditor with Field Selector

Source: https://context7.com/svar-widgets/react-filter/llms.txt

Enables users to select a field for filtering using the `fieldsSelector` prop. Options are dynamically provided based on the selected field.

```jsx
import { FilterEditor } from '@svar-ui/react-filter';
import '@svar-ui/react-filter/all.css';

function FilterEditorWithFields() {
  const fields = [
    { id: 'first_name', label: 'First Name', type: 'text' },
    { id: 'last_name', label: 'Last Name', type: 'text' },
    { id: 'age', label: 'Age', type: 'number' },
    { id: 'country', label: 'Country', type: 'text' },
    { id: 'start', label: 'Start Date', type: 'date' },
  ];

  const options = {
    first_name: ['Alex', 'Adam', 'Daisy', 'John', 'Jane'],
    last_name: ['Wonski', 'Kareki', 'Smith', 'Bounce'],
    country: ['USA', 'China', 'Germany'],
    age: [24, 26, 33, 35, 44, 45, 62],
  };

  // Function to provide options based on selected field
  const provideOptions = (fieldId) => {
    return options[fieldId] || [];
  };

  const handleApply = ({ value }) => {
    console.log('Applied filter:', value);
  };

  return (
    <FilterEditor
      fields={fields}
      field="age"
      fieldsSelector={true}
      options={provideOptions}
      onApply={handleApply}
      onChange={({ value }) => console.log('Changed:', value)}
    />
  );
}
// With fieldsSelector=true, users can switch between fields defined in the fields array
```

--------------------------------

### Localize Filter Component Labels and Date Formats

Source: https://context7.com/svar-widgets/react-filter/llms.txt

Use the Locale wrapper from '@svar-ui/react-core' to customize labels and date formats. Combine locales from '@svar-ui/filter-locales' and '@svar-ui/core-locales' for comprehensive localization.

```jsx
import { FilterBuilder } from '@svar-ui/react-filter';
import { Locale } from '@svar-ui/react-core';
import { en, de, cn } from '@svar-ui/filter-locales';
import { en as coreEn, de as coreDe, cn as coreCn } from '@svar-ui/core-locales';
import '@svar-ui/react-filter/all.css';

function LocalizedFilter() {
  const fields = [
    { id: 'name', label: 'Name', type: 'text' },
    { id: 'date', label: 'Date', type: 'date' },
  ];

  const value = { rules: [] };

  // Combine core and filter locales
  const germanLocale = { ...coreDe, ...de };
  const chineseLocale = { ...coreCn, ...cn };
  const englishLocale = { ...coreEn, ...en };

  return (
    <>
      {/* German locale */}
      <Locale words={germanLocale}>
        <FilterBuilder fields={fields} value={value} />
      </Locale>

      {/* Chinese locale */}
      <Locale words={chineseLocale}>
        <FilterBuilder fields={fields} value={value} />
      </Locale>

      {/* English locale (default) */}
      <Locale words={englishLocale}>
        <FilterBuilder fields={fields} value={value} />
      </Locale>
    </>
  );
}
// Available locales: en (English), de (German), cn (Chinese)
// Import from @svar-ui/filter-locales and @svar-ui/core-locales
```

--------------------------------

### Basic CSS for SVAR React Filter

Source: https://github.com/svar-widgets/react-filter/blob/main/index.html

Applies basic styling to the HTML body and root element for the SVAR React Filter component. Ensures no default padding or margin and sets full height.

```css
html, body, #root { padding:0; margin: 0; height: 100%; }
```

--------------------------------

### Client-side Array Filtering with createArrayFilter

Source: https://context7.com/svar-widgets/react-filter/llms.txt

The `createArrayFilter` utility generates a filter function from a configuration object, enabling client-side filtering of JavaScript arrays. It supports various filter conditions and logical grouping (AND/OR).

```jsx
import { createArrayFilter } from '@svar-ui/react-filter';

const data = [
  { first_name: 'Alex', last_name: 'Wonski', country: 'USA', age: 26 },
  { first_name: 'Daisy', last_name: 'Bounce', country: 'Germany', age: 33 },
  { first_name: 'John', last_name: 'Wane', country: 'USA', age: 24 },
  { first_name: 'Jane', last_name: 'Wane', country: 'USA', age: 44 },
  { first_name: 'Willi', last_name: 'Wong', country: 'China', age: 62 },
];

// Simple filter: equal
const simpleFilter = createArrayFilter({
  rules: [{ field: 'country', filter: 'equal', value: 'USA' }],
});
console.log(simpleFilter(data)); // Alex, John, Jane

// Multiple conditions with AND
const andFilter = createArrayFilter({
  glue: 'and',
  rules: [
    { field: 'country', filter: 'equal', value: 'USA' },
    { field: 'age', filter: 'greater', value: 30 },
  ],
});
console.log(andFilter(data)); // Jane (USA and age > 30)

// Multiple conditions with OR
const orFilter = createArrayFilter({
  glue: 'or',
  rules: [
    { field: 'first_name', filter: 'equal', value: 'Alex' },
    { field: 'first_name', includes: ['Daisy'] },
  ],
});
console.log(orFilter(data)); // Alex, Daisy

// Nested groups
const nestedFilter = createArrayFilter({
  glue: 'or',
  rules: [
    { field: 'first_name', filter: 'equal', value: 'Alex' },
    {
      glue: 'and',
      rules: [
        { field: 'age', filter: 'greater', value: 40 },
        { field: 'age', filter: 'less', value: 60 },
      ],
    },
  ],
});
console.log(nestedFilter(data)); // Alex, Jane (40 < age < 60)

// Date range filter
const dateFilter = createArrayFilter({
  rules: [
    {
      field: 'start_date',
      filter: 'between',
      type: 'date',
      value: { start: new Date('2024-11-01'), end: new Date('2025-05-01') },
    },
  ],
});

// Available filters: equal, notEqual, contains, notContains, beginsWith, notBeginsWith,
// endsWith, notEndsWith, greater, greaterOrEqual, less, lessOrEqual, between, notBetween

```

--------------------------------

### FilterBuilder Layout Types

Source: https://context7.com/svar-widgets/react-filter/llms.txt

Demonstrates the different layout types available for the FilterBuilder component: 'list' (default), 'line' (horizontal), and 'simple' (flat).

```jsx
import { FilterBuilder, createArrayFilter } from '@svar-ui/react-filter';
import '@svar-ui/react-filter/all.css';

function FilterLayouts() {
  const fields = [
    { id: 'first_name', label: 'First Name', type: 'text' },
    { id: 'age', label: 'Age', type: 'number' },
  ];

  const options = {
    first_name: ['Alex', 'Adam', 'Daisy'],
    age: [24, 26, 33, 45],
  };

  const value = {
    rules: [
      { field: 'first_name', filter: 'equal', value: 'Alex' },
      { field: 'age', filter: 'greater', value: 30 },
    ],
  };

  return (
    <>
      {/* List layout - vertical with nested groups support */}
      <FilterBuilder
        type="list"
        value={value}
        fields={fields}
        options={options}
        onChange={({ value }) => console.log('List:', value)}
      />

      {/* Line layout - horizontal compact display */}
      <FilterBuilder
        type="line"
        value={value}
        fields={fields}
        options={options}
        onChange={({ value }) => console.log('Line:', value)}
      />

      {/* Simple layout - flat rules without group nesting */}
      <FilterBuilder
        type="simple"
        value={value}
        fields={fields}
        options={options}
        onChange={({ value }) => console.log('Simple:', value)}
      />
    </>
  );
}

```

--------------------------------

### Roboto Font Definition (Regular)

Source: https://github.com/svar-widgets/react-filter/blob/main/index.html

Defines the regular weight (400) of the Roboto font, including WOFF2 and WOFF formats for broad browser compatibility. Use this for standard text.

```css
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('https://cdn.svar.dev/fonts/roboto/regular.woff2') format('woff2'), url('https://cdn.svar.dev/fonts/roboto/regular.woff') format('woff');
}
```

--------------------------------

### FilterBar Component for Data Tables

Source: https://context7.com/svar-widgets/react-filter/llms.txt

Provides a simplified filter bar UI for multiple fields, suitable for placement above data tables. It uses `createArrayFilter` to apply filters to an array of data.

```jsx
import { useState, useCallback, useEffect } from 'react';
import { FilterBar, createArrayFilter } from '@svar-ui/react-filter';
import '@svar-ui/react-filter/all.css';

function FilterBarDemo() {
  const data = [
    { first_name: 'Alex', last_name: 'Wonski', country: 'USA', age: 26 },
    { first_name: 'Daisy', last_name: 'Bounce', country: 'Germany', age: 33 },
    { first_name: 'John', last_name: 'Wane', country: 'USA', age: 24 },
    { first_name: 'Jane', last_name: 'Wane', country: 'USA', age: 44 },
  ];

  const [filteredData, setFilteredData] = useState(data);

  const fields = [
    'last_name', // Simple field - uses defaults
    { type: 'number', id: 'age' },
    {
      type: 'text',
      id: 'country',
      options: ['USA', 'China', 'Germany'],
      value: 'USA',
    },
  ];

  const initialValue = {
    rules: [{ field: 'country', filter: 'equal', value: 'USA' }],
  };

  const applyFilter = useCallback((value) => {
    const filter = createArrayFilter(value);
    setFilteredData(filter(data));
  }, [data]);

  useEffect(() => {
    applyFilter(initialValue);
  }, []);

  return (
    <FilterBar
      fields={fields}
      onChange={({ value }) => applyFilter(value)}
    />
  );
}
// Fields can be: string (field id), or object with type, id, options, value, label, placeholder
```

--------------------------------

### Roboto Font Definition (Medium)

Source: https://github.com/svar-widgets/react-filter/blob/main/index.html

Defines the medium weight (500) of the Roboto font, including WOFF2 and WOFF formats. Suitable for headings or emphasized text.

```css
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('https://cdn.svar.dev/fonts/roboto/500.woff2') format('woff2'), url('https://cdn.svar.dev/fonts/roboto/500.woff') format('woff');
}
```

--------------------------------

### Apply Themes to Filter Components

Source: https://context7.com/svar-widgets/react-filter/llms.txt

Wrap FilterBuilder components with theme providers like Willow, WillowDark, or Material to apply different visual styles. The 'fonts' prop on Willow can disable Google Fonts loading.

```jsx
import { FilterBuilder, Willow, WillowDark, Material } from '@svar-ui/react-filter';
import '@svar-ui/react-filter/all.css';

function ThemedFilters() {
  const fields = [
    { id: 'name', label: 'Name', type: 'text' },
    { id: 'age', label: 'Age', type: 'number' },
  ];

  const value = { rules: [] };

  return (
    <>
      {/* Default Willow theme */}
      <Willow>
        <FilterBuilder fields={fields} value={value} />
      </Willow>

      {/* Dark theme */}
      <WillowDark>
        <FilterBuilder fields={fields} value={value} />
      </WillowDark>

      {/* Material Design theme */}
      <Material>
        <FilterBuilder fields={fields} value={value} />
      </Material>

      {/* Disable Google Fonts loading */}
      <Willow fonts={false}>
        <FilterBuilder fields={fields} value={value} />
      </Willow>
    </>
  );
}
// Themes: Willow (light), WillowDark (dark), Material (Material Design)
// fonts prop: true (default) loads Google Fonts, false disables
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.