Can't filter objects

[serenamorena]

Thanks very much for creating this library. In my code, one of the columns receives an array of objects. I use customBodyRender to render the data as desired, problem is neither filtering nor searching works on this column because it parses the data as [Object object]. I tried converting the object property I want to display into an array of strings and I can't still filter nor search that column. I tried this example and the app crashes with the error "Objects can't be React children...".

Expected Behavior

Whether I pass an object or an array of strings, I should be able to filter and search that column.

Current Behavior

Dropdown filter only shows [Object object] or blank.

Steps to Reproduce (for bugs)

My data structure looks like this:

schools: [
{name: Ridgemont High, id: 1},
{name: Newport High, id: 2}
]

The code for the column is:

{
      name: "schools",
      label: "SCHOOL",
      options: {
        customBodyRender: (value, tableMeta) => {
        return (value.map(school => {
                  return <p key={school.id}>{school.name}</p>
        }))
        }
      }
    }

Your Environment

Tech	Version
Material-UI	4.3.0
MUI-datatables	2.6.4
React	16.8.0
browser	Firefox
etc

[gabrielliwerant]

I might be missing something, but it doesn't look like you have any values to map over in your custom render function, if the data you're passing in is schools. I might need to see the whole running example in a codesandbox.

Also, are you saying that the example doesn't work for you when you run it locally? If so, that sounds like you're version is incorrect, as I do not experience this issue.

[gabrielliwerant]

I ended up looking into this more deeply in https://github.com/gregnb/mui-datatables/issues/915 and didn't realize the two were related until just now. As you can see in that issue, object data for cells isn't supported right now in any capacity except if you use the dot notation in the column name option to specify which property you want. Otherwise, you can't use objects.

Changing the table to allow this I think will be too big a task for the short term, though if anyone has a proposal for how to handle this, I'd be willing to look over it. I think it would raise a lot of weird UX issues though.

[dvdgsng]

Ok so supporting object data in cells directly is not possible for now, but what about custom search and filter options for columns? A simple array of strings should be sufficient.

[gabrielliwerant]

@dvdgsng Any time you have access to a custom render, you can use any data you like, as long you pass an identifier as the official table data and link it to whatever object you want outside of the table. It's not as convenient, but I've used this approach myself and I think it's a pretty good workaround.

[dvdgsng]

Using a custom render like below will show the values of foo.bar's properly, but they will not be searchable.

<MUIDataTable
    columns={[
        {
            name: "foo",
            label: "the foos",
            options: {
                customBodyRender: value => value.map(foo => foo.bar)
            }
        }
    ]}
    ...

Am I missing something here?

[gabrielliwerant]

@dvdgsng You also have access to custom search and filter options. I don't have a good handle on exactly what you're trying to do, so I'm not sure how exactly to help. Is your issue related to the one opened here?

[bloodykheeng]

Are we able to filter objects as of recent like how this does it import MaterialTable from "@material-table/core";

ever since i started using this component import MUIDataTable from "mui-datatables"; my life has become misearable yet i thought its an advancement of @material-table/core

first and foremost that row data of this mui-datatables in customBodyRender: (value, tableMeta) => { console.log("🚀 ~ ListPage ~ tableMeta:", tableMeta); // const tableRowData = { ...(tableMeta.rowData ?? []) };

there returns wiredly it returns as an array instead of object since my initial table data is array of objects and also i cant pass in data with children which are array of objects { name: "vendor", label: "Vendor", options: { filter: true, sort: true, customBodyRender: (value) => { const vendor = value.name; return <div>{vendor ? vendor : "No Vendor"}</div>; } } },

that seems as a work around but its also wrong cos serach cant work at the end of the day so more advancements need to be done i request that the development team copies how this works MaterialTable from "@material-table/core";