How to filter an array of object in Mui DataGrid?

Question

I recently changed my tables to Mui-datagrid on Material UI 5, and I have a special use case with an array of objects. I want to enable the phone number filter in this column, but the number is provided as an object list.

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

I was expecting a 'customFilterAndSearch' or an option to customise how to search in this specific field.

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

I have made some tries with the filterOperators, but no success yet. I have made a full example here https://codesandbox.io/s/mui-data-grid-vs05fr?file=/demo.js

Answer 1

As far as I can see from the DataGrid documentation I don't see any way to change the filter function for a specific function.

Likely the best workaround for your use case will be converting this to a string be converting the data to a string before you pass it to the datagrid. Though you will lose the styling that you currently do by making the phone type bold.

On second though your best best would probably be to split the phone column into two columns which would probably be the cleanest way of solving your problem

Add helper function.

You could potentially add a helper function to just map all the phone lists to something like mobilePhone or homePhone

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

I've added a fork of your snippet with my function, it is I think the most viable solution for your problem: https://codesandbox.io/s/mui-data-grid-forked-ppii8y