rfc

react-filter-control

The react UI component for building complex filter criteria

Showing:

Popularity

Downloads/wk

36

GitHub Stars

29

Maintenance

Last Commit

2yrs ago

Contributors

2

Package

Dependencies

3

Size (min+gzip)

6.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

FilterControl

Properties

NameTypeDescription
fieldsArray.<Field>The fields settings
filterValueFilterValueThe filterValue settings
groupsArray.<Group>The groups settings
onFilterValueChangedeventThe filter value changed handler

FilterValue : Object

Properties

NameTypeDescription
groupNamestringGroup name
itemsArray.<(FilterValueGroup|FilterValueItem)>Items in group

FilterValueGroup : Object

Properties

NameTypeDescription
keykeyItem key
groupNamestringGroup name
itemsArray.<(FilterValueGroup|FilterValueItem)>Items in group

FilterValueItem : Object

Properties

NameTypeDescription
keykeyItem key
fieldstringField
operatorstringOperator
valueanyValue

Field : Object

Properties

NameTypeDescription
namestringField name
captionstringField caption
operatorsArray.<Operator>Field operators

Group : Object

Properties

NameTypeDescription
namestringGroup name
captionstringGroup caption

Operator : Object

Properties

NameTypeDescription
namestringOperator name
captionstringOperator caption

License

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100