FilterBar for Admin Table - A/B Variant Discussion
MFSepplive opened this issue · comments
Quick Intro: I created a Filterbar Component for our Admin Tables. It takes Final Form Filter Fields as a prop and creates the forms to be able to apply filterValues to the TableQuery.
I already published my PR with the Variant A.
Variant A : A quick Look at my Filterbar Component and how it works.
https://user-images.githubusercontent.com/12484761/112325852-526fe980-8cb4-11eb-9d58-d384d0ccac9d.mov
(sry for the bad quality but only 10Mb allowed)
Variant B: This Variant would work like the Filtersection from Zalando. Its also not a bad idea in my opinion. There is no Sidebar and no labelValuesFunctions for the FilterFields. And their filterFields also work like my popoverFormField in Variant A so it only would take a small restyling of it.
Zalando.at
So i had a Question if my Variant makes sense or maybe its an overkill how i built it. Thats why i wanted to ask which variant is better for our Comet Admin
My main problem with Variant A is the dependency in my sidebar between my filters without immediately trigger the result of the table behind. So right now its implemented in the sidebar that you can fill your form fields in the sidebar and then submit all fields in the sidebar to the Tablequery to get new TableResults. Because there are not dependencies between my fields, it can happen that you don't get any results in your table anymore, which can be a problem for the user. And the Second problem is the performance issue you can see in the video during resizing the screen.
Variant B would still need to be implemented depending on what Result I get out of this Discussion.
Maybe even a Variant C gets revealed during the discussion i don't know but all i know its a question i cant answer alone so thats why i started this issue :)
Thank you for your attention, your time and your answers on my Topic :)
I think variant B is a good alternative and easier to understand whats happening to the filters.
And there is no difference between using in sidebar and over table like filtering threw save button.
The only thing I don't like on the zalando example is that you don't see the choosen filters/values but that could be one thing we do better :)
https://www.adidas.at/lila%7Crot-manner-kleidung this variant shows the values as chips with option to delete every single entry or reset every filter I think this is also a nice alternativ for that
I also prefer variant B over variant A. However, we should consider limiting the number of filters, otherwise the filter bar might take up a considerable amount of screen space