CODEWITHSUNDEEP
javascriptreactjshtml-table
Sameer Thite
Sameer Thite

Reputation: 2459

how to filter all columns of html table using react js?

I am creating custom data table. I have added sorting, pagination but unable to do searching on all columns. Here is the URL of what i have created

https://codesandbox.io/s/yv48o7onwj

Data array contains uppercase words and integers.

How to implement filter/search on all columns using single input box?

Upvotes: 4

Views: 3735

Answers (1)

Jee Mok
Jee Mok

Reputation: 6556

You can do it using Array.filter

const filtered = products.filter(item => (
   item.id === searchString ||
   item.name === searchString ||
   item.price === searchString ||
   item.qa === searchString ||
   item.qr === searchString ||
   item.vendor === searchString
));

and then replace {products.map(item => { on line 326 to {filtered.map(item => {

Upvotes: 6

Related Questions