u/mntblnk

Table filtering problem

Table filtering problem

I'm working on a new table filter feature. The existing table has simple column filters, where you type a keyword in a search bar located in the column header cell, and only the corresponding rows are shown. This works so that the table content is updated with every keystroke.

There was a customer request/suggestion, that we should add a sort of a compound feature to this filter, so that by entering "foo, bar" to the filter it would show rows that include either "foo" OR "bar". But this is in our opinion too implicit, but instead we would like to add a more robust filter component where we could also add several other filter types while we are at it.

We want to provide the customer with at least the following:

  • Ability to filter the table with rows that include "foo" OR "bar"
  • Within this set, show only rows that contain numeric data outside of the following range: "-1" and "1"

So essentially in some cases there could be two different types of filtering logic on top of each other: from the entire data set and filtering further the already filtered set. In my current draft, I have the following structure in the filter component:

Screenshot of the entire table inc. the filter component

  • Dropdown box for selecting the affected column
  • Dropdown box for selecting the used operator (Includes, less than, greater than, inside of range, outside of range)
  • Input fields for values, conditionally rendered based on previous selections.
  • Add button for applying each filter. This also adds a removable chip shown in the UI that represents that particular filter.

In my proposal, each filter would be instantly applied upon clicking 'Add', but then we immediately run into a problem. If user first adds filter 'Foo', and clicks 'Add', the table is filtered to show only corresponding fields. Now how could the user expect that if they add another filter with a different keyword, it would filter the entire dataset again instead of filtering the remaining rows further?

One solution would be that the current 'Add' button would only create a filter, and there would be another button, fx. "Search" that would actually apply the filters. However, the issue of "conflicting" logics I mentioned earlier remains.

I'm absolutely certain that this type of issue has been already solved in some other product, but I am not aware of any such benchmark. What is the best practice or industry standard for this type of implementation?

reddit.com
u/mntblnk — 2 days ago

Table filtering problem

I'm working on a new table filter feature. The existing table has simple column filters, where you type a keyword in a search bar located in the column header cell, and only the corresponding rows are shown. This works so that the table content is updated with every keystroke.

There was a customer request/suggestion, that we should add a sort of a compound feature to this filter, so that by entering "foo, bar" to the filter it would show rows that include either "foo" OR "bar". But this is in our opinion too implicit, but instead we would like to add a more robust filter component where we could also add several other filter types while we are at it.

We want to provide the customer with at least the following:

  • Ability to filter the table with rows that include "foo" OR "bar"
  • Within this set, show only rows that contain numeric data outside of the following range: "-1" and "1"

So essentially in some cases there could be two different types of filtering logic on top of each other: from the entire data set and filtering further the already filtered set. In my current draft, I have the following structure in the filter component:

  • Dropdown box for selecting the affected column
  • Dropdown box for selecting the used operator (Includes, less than, greater than, inside of range, outside of range)
  • Input fields for values, conditionally rendered based on previous selections.
  • Add button for applying each filter. This also adds a removable chip shown in the UI that represents that particular filter.

In my proposal, each filter would be instantly applied upon clicking 'Add', but then we immediately run into a problem. If user first adds filter 'Foo', and clicks 'Add', the table is filtered to show only corresponding fields. Now how could the user expect that if they add another filter with a different keyword, it would filter the entire dataset again instead of filtering the remaining rows further?

One solution would be that the current 'Add' button would only create a filter, and there would be another button, fx. "Search" that would actually apply the filters. However, the issue of "conflicting" logics I mentioned earlier remains.

I'm absolutely certain that this type of issue has been already solved in some other product, but I am not aware of any such benchmark. What is the best practice or industry standard for this type of implementation?

reddit.com
u/mntblnk — 2 days ago