Adding Custom Filter components with the Headless mode.

[thevipinmishra]

Initially, I was using Vanilla @tanstack/react-table package in my mantine project, since a Headless Mode was mentioned in the docs.

I tried to have a look.

I got this stuck point, where I had a getFacetedUniqueValues() to get the unique values from a column and add a filter using Mantine's <Select /> component.

How to achieve this with a custom component?

[alessandrojcm]

Hey, sorry I don't quite follow, what is exactly that you are trying to accomplish?

[thevipinmishra]

So, earlier, I was using the @tanstack/react-table package, and I had a custom "Column Filter" for the column key "source".

I had accomplished it using the getFacetedUniqueValues() function.

Now, I was having a look at the MRT docs and noticed a "Headless Mode" where you can control the look and feel using the props returned by useMantineReactTable hook.

How do I achieve this custom column filtering using my custom component, as you can see in the image, I've added it to the Select component.

I hope I'm clear enough now.