简体   繁体   English

如何使用react js过滤html表的所有列?

[英]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 这是我创建的URL

https://codesandbox.io/s/yv48o7onwj https://codesandbox.io/s/yv48o7onwj

Data array contains uppercase words and integers. 数据数组包含大写单词和整数。

How to implement filter/search on all columns using single input box? 如何使用单输入框在所有列上实现过滤/搜索?

You can do it using Array.filter 你可以使用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 => { 然后将{products.map(item => {第326行)替换为{filtered.map(item => {

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM