Home

Awesome

GitHub license Build Status Coverage Status

React Filter Control

The React component for building the composite filter criteria

Demo (JS) | Demo (TS)

Together With Data Table

Overview

Filter Control

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

<a name="FilterControl"></a>

FilterControl

Properties

NameTypeDescription
fields<code>Array.<Field></code>The fields settings
filterValue<code>FilterValue</code>The filterValue settings
groups<code>Array.<Group></code>The groups settings
onFilterValueChanged<code>event</code>The filter value changed handler

<a name="FilterValue"></a>

FilterValue : <code>Object</code>

Properties

NameTypeDescription
groupName<code>string</code>Group name
items<code>Array.<(FilterValueGroup|FilterValueItem)></code>Items in group

<a name="FilterValueGroup"></a>

FilterValueGroup : <code>Object</code>

Properties

NameTypeDescription
key<code>key</code>Item key
groupName<code>string</code>Group name
items<code>Array.<(FilterValueGroup|FilterValueItem)></code>Items in group

<a name="FilterValueItem"></a>

FilterValueItem : <code>Object</code>

Properties

NameTypeDescription
key<code>key</code>Item key
field<code>string</code>Field
operator<code>string</code>Operator
value<code>any</code>Value

<a name="Field"></a>

Field : <code>Object</code>

Properties

NameTypeDescription
name<code>string</code>Field name
caption<code>string</code>Field caption
operators<code>Array.<Operator></code>Field operators

<a name="Group"></a>

Group : <code>Object</code>

Properties

NameTypeDescription
name<code>string</code>Group name
caption<code>string</code>Group caption

<a name="Operator"></a>

Operator : <code>Object</code>

Properties

NameTypeDescription
name<code>string</code>Operator name
caption<code>string</code>Operator caption

License

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