filterFunction of a custom component is returning string "object Object"

[Ricardonacif]

Guys, I have a column where I render a custom component. When I try to use the filterFunction to specify how I wanna filter, the "contents" is coming as a string "object Object". ```

<Table
   data={
        'Relation': <CustomComponent relation={object.collector.relation} />, 
   }
   filterable={
                        [
                             {
                                column: 'Relation',
                                filterFunction: function(contents, filter) {
                                    // this contents here is a string "object Object"
                                    return (contents.indexOf(filter) > -1);
                                }

                            }
                        ]
                    }

/>

Am I doing something wrong?

[andrewlorenz]

Hey, I'd suggest you build a 'proper' table using <Table>, <Tr>, <Td>. I suspect you need to use the pattern whereby you have your data for filtering specified separately from your actual column render (which will be your <customComponent>)

[Ricardonacif]

Sorry man, that's right. Will do it the proper way! Thanks!

[yoiang]

@andrewlorenz + @Ricardonacif can either of you elaborate on this solution? Are you saying skip using reactable? Or some table alongside?

[andrewlorenz]

hi there, no I didn't mean not to use reactable! just to do a bit more coding to enable the filtering than expecting it to be done for you by reactable. I found that there are a couple of ways to feed reactable with (a) the data you want the user to see and (b) the data you want to be available for use in filtering. Especially useful when you want to apply formatting to the data but filter it in its raw state.
If you give me a bit more info about what you are trying to achieve, I'll see if I can help you with some sample code.

[yoiang]

Hey @andrewlorenz !
Sorry for the late reply! I ended up forking the repo and making the change such that it returns the actual object.

Thank you for the offer! The data isn't so complicated that it would be difficult to filter and format but a nice generic method that works with how it's already being structured to display in the component is more straightforward for at least some of our usages 😉

[andrewlorenz]

For anyone reading this, the probable reason for getting [Object Object] is that you have set a <Td> contents to be multiple elements, and therefore you need to just wrap them with a <span></span> block so that the <Td> itself contains only 1 child element.

[yoiang]

If I'm understanding you correctly this also occurs for me with one child element because of #378. The fork I mentioned can be found here: https://github.com/Adorkable-forkable/reactable

[andrewlorenz]

hi yes its entirely possible, and I just realised my comment doesn't relate specifically to this issue. So that fork you mention, are you intending to keep that one maintained (unlike this one which is sadly going to seed I fear)

[yoiang]

Unfortunately I don't think I'll be able to maintain the fork in a real way either, for anyone interested it'd be best if they pulled the change ;)