Assistance in handling filters for different table content

Feedback & Problem Solving
#1

Hi,

I am really new to design and UX. I am currently doing a web design for a client which involves viewing tables.

Please find the basic table mock up below

1001×757 10.1 KB

The issue that I am facing is the content that is to be displayed for each filter. To explain my problem further based on the above example

  • The tables have 7 columns
  • When the user is in “All” filter, the most important content to be shown is the 7 items mentioned (Data 1 to Data 6)
  • Now when he switches to the next filter “Filter 1” some of the column contents are retained while some are replaced (Data 3 with Data 7 and Data 4 with Data 8) while a new column has been added (Data 9) as this new content is important with respect to the selected filter.
  • The same goes for the next filter “Filter 2”.

Now the concerns that I am having
Whenever we have filters, the column header contents should remain consistent across the filters. This is somewhat complicated to achieve in this case as the filters are pertaining to a status but certain contents displayed within each filter is unique to that filter and important. I would like to know if there is an easy way of handling this while achieving adding and replacing columns based on filter selected.

I hope I have put my query forward clearly.

Thanks

#2

hi @georgiomenezes17

I believe that we have 3 different views of the table and the switcher component can create confusion to the user.
I mean, I expect that clicking the switcher I trigger a different sorting of the data within the table. As a user, for me, is confusing that the table headers are changing. This is a cognitive load for me to understand why the data is changed.

I would define 3 dedicated views for 3 different data views, maybe a tab component with a clear label could be a good UI compromise.

I tried to sketch my idea here:

878×1182 25.5 KB

I hope it will help :wink:

1 Like