reactable icon indicating copy to clipboard operation
reactable copied to clipboard

Published 20 hours ago • verified publisher icon glin

filter component in header

Open Liripo opened this issue 1 year ago • 2 comments

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.

Liripo avatar May 02 '23 05:05 Liripo

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

radovan-miletic avatar May 05 '23 09:05 radovan-miletic

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.

glin avatar May 20 '23 20:05 glin