MUI DataTables 搜索隐藏列答案

【问题标题】：MUI DataTables Search on hidden columnMUI DataTables 搜索隐藏列
【发布时间】：2021-01-06 21:59:14
【问题描述】：

你好，我在我的 react 应用程序上使用 mui 数据表 (https://github.com/gregnb/mui-datatables)，当我尝试搜索隐藏列时遇到问题，我下面的代码工作得很好，但是当我尝试搜索城市值时（列默认隐藏）它什么都不返回，同时文本显示在列（地址）上，这里有两种情况，我错误地组合了列，或者我可以使用我最近的代码，但通过一些搜索功能调整，请让我知道如何使这项工作，谢谢.

【问题讨论】：

标签： reactjs mui-datatable

【解决方案1】：

几天前，我发现自己解决了同样的问题。根据 3.7.1 版本，搜索代码依赖于 this conditional，这意味着隐藏或排除列不匹配。但是，嘿，我想出了一个简单的解决方案：

如果您在选项对象中提供自定义搜索功能，您将能够访问隐藏和排除列进行匹配。当然，您需要提供能够匹配文本和对象的搜索功能。在这种情况下，我依赖super-search library。

const options = {
  customSearch: (searchText, row) =>
    superSearch(searchText.toLowerCase(), { ...row }).numberOfMatches > 0
};

在我刚刚创建的这个沙箱中查看一个示例：

https://codesandbox.io/s/muidatatables-example-custom-search-function-0pm9o?file=/index.js

这将覆盖 MUI 数据表中的嵌入式搜索功能。

【讨论】：

【解决方案2】：

FWIW 6 个月后，我遇到了类似的事情......

在示例文件夹中有一个关于如何执行此操作的示例，该示例应与“display:false, viewColumns:false”协同工作。

https://github.com/gregnb/mui-datatables/blob/master/examples/customize-search/index.js

MUIDataTable 列：

...
{
   "name":"hiddenCity",
   "options":{
      "filter":false,
      "sort":false,
      "display":false,
      "viewColumns":false
   }
},
{
   "name":"hiddenState",
   "options":{
      "filter":false,
      "sort":false,
      "display":false,
      "viewColumns":false
   }
},
...etc...

MUIDataTable 选项：

let options = {
...lots of options...,
            // Search ALL columns, including hidden fields that use display:false, viewColumns:false...
            customSearch: (searchQuery, currentRow, columns) => {
                let isFound = false;
                currentRow.forEach(col => {
                  if (col && col.toString().indexOf(searchQuery) >= 0) {
                    isFound = true;
                  }
                });
                return isFound;
            },
...more options...
}

【讨论】：