React Js - Create column-level Filter

 React Js - How to create a Column-level filter in a table?

Column-Wise filter in a table increases the accessibility of the table and ensures easy data search when we have a huge chunk of data. Below is the picture of an Employee table that has a column-level filter in the Employee Name and City field.

In this blog, we will see the implementation of the column-level filter.

For the HTML, we can have a simple search box

1 2 3 4 5 6 7 8

<div id=“wrapper-class”> <Input     id=“employeeName”     onChange={(e) => handleChange(e)}     disableUnderline={true}     placeholder="Search"/>     <SearchIcon/> </div>

We would need to call a function on change of input text in the search field that would set the input from the employee search field above in some variable.

For react code, we can have a function that filters entries from object array. Here, the list/array of objects will be the first argument of the function [the array of all the entries in the table e.g employee record details array] and filterCondition takes the condition as input based on which the filtering will be done.

1 2 3 4 5 6 7 8 9 10 11

function filter(array, filterCondition) { const filterKeys = Object.keys(filterCondition); return array.filter(item => { return filterCondition.every(key => { if (typeof filterCondition[key] !== 'function') return true; return filterCondition[key](item[key]); }); }); }

The filterCondition should be in key-value pairs where key is the attribute name and value is the condition that checks the employeeName while comparing with the input text.

1 2 3

employeeName: (employeeName) => { return employeeName && employeeName.toLowerCase().indexOf(inputName.toLowerCase()) > -1; }

Passing the employeeList in the array param and condition in the filtercondition param will return the list of filtered employees based on the text typed in the input search box.

Read More