如何过滤 Mui DataGrid 中的对象数组？

Question

我最近在 Material UI 5 上将我的表更改为 Mui-datagrid，并且我有一个对象数组的特殊用例。我想在此列中启用 phone 数字过滤器，但数字是作为对象列表提供的。

 phone: [
  { type: "home", number: "795-946-1806" },
  { type: "mobile", number: "850-781-8104" }
]

我期待 'customFilterAndSearch' 或自定义如何在该特定字段中搜索的选项。

   customFilterAndSearch: (term, rowData) =>
    !!rowData?.suppressedOptions.find(({ description }) =>
      description?.toLowerCase().includes(term.toLowerCase())
    ),

我用 filterOperators 做了一些尝试，但还没有成功。我在这里做了一个完整的例子https://codesandbox.io/s/mui-data-grid-vs05fr?file=/demo.js

Answer 1

据我从 DataGrid 文档中看到的，我没有看到任何更改特定功能的过滤器功能的方法。

对于您的用例，最好的解决方法可能是将其转换为字符串，即在将数据传递给数据网格之前将其转换为字符串。虽然你会失去你目前所做的样式 phone 类型 bold.

第二，虽然你最好的办法可能是将 phone 列分成两列，这可能是解决问题的最干净的方法

添加辅助函数。

您可以添加一个辅助函数来将所有 phone 列表映射到 mobilePhone 或 homePhone

之类的东西

const mapPhoneObject = (rows) => {
      rows.forEach((row) => {
        row.phone.forEach((phone) => {
          row[`${phone.type}Phone`] = phone.number;
        });
      });
      return rows
    };

我已经用我的函数添加了你的代码片段的分支，我认为这是解决你的问题的最可行的解决方案：https://codesandbox.io/s/mui-data-grid-forked-ppii8y

如何过滤 Mui DataGrid 中的对象数组？

How to filter an array of object in Mui DataGrid?

material-ui

mui-datatable