search

glin / reactable

Interactive data tables for R
https://glin.github.io/reactable
Other
612 stars 79 forks source link

filter component in header #321

Open Liripo opened 1 year ago

Liripo commented 1 year ago

I want to put the filter UI next to the table header like above, but I don't know how to use reactable to achieve this effect. Is it possible? https://codesandbox.io/s/horizon-table-5buxx?file=/src/index.js:70-82, image

If possible, I would also like to put the sorting functionality on the left and the filtering functionality on the right.

radovan-miletic commented 1 year ago

Beside the UI design, the multiple checkbox mapping of/in data list filter would be cool feature to add to column filtering.

glin commented 1 year ago

This should be possible with custom filter inputs, as @radovan-miletic linked, but I don't have any similar examples right now. That filter UI looks pretty complicated so it would take some effort to come up with a good example. I'll link this with a related issue to add more examples to the custom filtering docs, https://github.com/glin/reactable/issues/318.

Maybe we could even port that example over since it's all React based as well. There would have to be some additional work too, since that filter UI example doesn't seem to be keyboard accessible.