如何在Mui DataGrid中过滤对象数组

Question

我最近在Material UI 5上将表更改为Mui数据网格，并且我有一个特殊的对象数组用例。我想在此列中启用电话号码筛选器，但该号码是作为对象列表提供的。

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文档中可以看出，我看不出有任何方法可以更改特定函数的过滤函数。

对于您的用例，最好的解决方法可能是将其转换为字符串，即在将数据传递到数据网格之前将数据转换为字符串。尽管将手机类型设置为粗体会失去当前的造型。

其次，尽管你最好的办法可能是将电话列分为两列，这可能是解决问题的最干净的方法

添加助手功能。

您可以添加一个助手功能，将所有电话列表映射到类似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