All Projects → komarovalexander → react-filter-control

komarovalexander / react-filter-control

Licence: MIT license
The react UI component for building complex filter criteria

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

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

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].