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.