reactjs - MUI DataTables 搜索隐藏列

Question

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

Answer 1

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...
}

Answer 2

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

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

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 数据表中的嵌入式搜索功能。