React Filter Control

The React component for building the composite filter criteria

Demo

Overview

Installation

npm

npm install react-filter-control

yarn

yarn add react-filter-control

Usage

A basic example

import React from "react";
import ReactDOM from "react-dom";
import FilterControl from "react-filter-control";
import { fields, filterValue } from "./data.js";

const handleFilterValueChange = filterValue => {
  // ...
};

const App = () => {
  return (
    <FilterControl
      filterValue={filterValue}
      fields={fields}
      onFilterValueChanged={handleFilterValueChange}
    />
  );
};

ReactDOM.render(<App />, document.querySelector("#root"));

Open Example in CodeSandbox

API

FilterControl

Properties

| Name | Type | Description | | --- | --- | --- | | fields | Array.<Field> | The fields settings | | filterValue | FilterValue | The filterValue settings | | groups | Array.<Group> | The groups settings | | onFilterValueChanged | event | The filter value changed handler |

FilterValue : Object

Properties

| Name | Type | Description | | --- | --- | --- | | groupName | string | Group name | | items | Array.<(FilterValueGroup|FilterValueItem)> | Items in group |

FilterValueGroup : Object

Properties

| Name | Type | Description | | --- | --- | --- | | key | key | Item key | | groupName | string | Group name | | items | Array.<(FilterValueGroup|FilterValueItem)> | Items in group |

FilterValueItem : Object

Properties

| Name | Type | Description | | --- | --- | --- | | key | key | Item key | | field | string | Field | | operator | string | Operator | | value | any | Value |

Field : Object

Properties

| Name | Type | Description | | --- | --- | --- | | name | string | Field name | | caption | string | Field caption | | operators | Array.<Operator> | Field operators |

Group : Object

Properties

| Name | Type | Description | | --- | --- | --- | | name | string | Group name | | caption | string | Group caption |

Operator : Object

Properties

| Name | Type | Description | | --- | --- | --- | | name | string | Operator name | | caption | string | Operator caption |

License

This project is licensed under the terms of the MIT license.