Carbon: DataTable filtering options question

[bitfede]

What package(s) are you using?

• [ ] carbon-components
• [x] carbon-components-react

Summary

I cannot find a way to filter my DataTable items by categories. I have a MultiSelect component that allows me to select multiple categories, but I don't know how to wire up the filtering so that the items that I select in the table still remain selected.

I tried calling onInputChange but I can only pass a string as a parameter, I wish I could pass an array of ids or a regex...

What should I do? Use Only the TableRow, TableCell, TableExpandedRow, TableSelectRow components and pass my custom props to them depending what I have on my state? What should I track on my state? The ID of the rows selected? Can you help me think about this a bit?

Relevant information

My goal is to build a datatable that ca be sorted, filtered, and allows the user to select elements that will be brought to another page for further processing.

[emyarod]

Use Only the TableRow, TableCell, TableExpandedRow, TableSelectRow components and pass my custom props to them depending what I have on my state?

this would probably be the way to implement the functionality you are looking for, rather than using the built in state manager in DataTable

does this example help? https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/custom-data-table-state-manager

[bitfede]

Definitely very very helpful!!! Thank you so much for your time! If I happen to have questions I'll reply to this topic, but I see how everything connects now.

[bitfede]

@emyarod thank you again for your example, I was able to finally bring the table into my project and it works perfectly, the improvements that I need to make now are:

1- Making sure that selection stays on when searching, right now it resets to 0 because I added an additional search bar on top
2- Add a MultiSelect so I can filter the data according to their categories, also selected rows need to stay memorized while data is filtered

This will all be achievable by adding maybe additional state variables that remember the selected rows and then have these rows set in the useRowSelection hook?

I remember that the DataTable state manager was really good at remembering selected rows when searching additional

If you have additional suggestions it would definitely super helpful. Thanks again :)

[emyarod]

you may find some of the utilities in tools and state useful https://github.com/carbon-design-system/carbon/tree/master/packages/react/src/components/DataTable

other than that I would suggest creating a Code Sandbox for debugging your application, although we're not able to provide as much help with app debugging compared to Carbon specific issues