Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best practices for adding/editing UI table data while filtering

Does any one know If there are any best-practices for editing/adding data in UI table while its data is filtered?

Example 1:

Suppose we have a table with two options: add new record and edit selected one. Moreover, the table has an option to filter data over column A.

Now, if the table is filtered by filtering column A with value '1' and I want to add a new record with value in column A that matches filter requirements, what should happen:

  1. The table should refresh and display filtered records with selected newly added record.
  2. The table should reset filter and show all records witch new one selected.
  3. The table should do nothing and display filtered records as they were. Newly added record will be displayed when the filter resets.

For me intuitively the best solution is number 1. But then how to solve the problem in example number 2:

Example 2:

If the table is filtered by filtering column A with value '1' and I want to add a new record that in column A has value '2' what should happen:

  1. The table should display filtered records with selected newly added record despite it does not matche the filter.
  2. The table should reset the filter, and all records should be displayed with new one selected.
  3. The table should do nothing and display filtered records as they were.

The same story is when we have filtered records, and in selected record we want to edit value upon which the filtering took place. Does the edited record should than disapear or filtre should be reset?

Or maybe the best way is to disable add/edit operations while filter is on?

like image 648
Szarpul Avatar asked Sep 04 '15 14:09

Szarpul


People also ask

How to improve the table UI design?

The table UI design should be easy to read and intuitive. Decreasing the row height also increases the items and number above the fold. To make it shorter, follow the standard sizing: Customizing the row style enhances readability and scannability. This allows readers to view the data in a convenient way.

What is filtering and search in table Ui?

Filtering and searching are pretty complex UX patterns on their own but have a lot of leverage for interaction in a table UI. We’re still putting together separate pieces on filtering and searching so stay tuned if that’s a key part of your project. You should make sure to provide at least basic options like sorting columns.

How to edit the filter options?

After clicking on a filter option, you will see a pop-up named Edit filter option where you can deeply modify the filters to follow other best practices for filter design. As faceted navigation with dynamic filters are mostly used in eCommerce, multi-select filters are a must since it's impossible to find the right product with only one refinement.

Is it possible to add a filter to an external table?

If its to filter the entire table, having the filter external to the table is fine. If it is to filter a specific category it needs to be with the content it effects. Share Improve this answer


2 Answers

I don't know if there is any best practices about it but I have also encountered the problem before. Two different solutions as I came up with:

  1. Edited/Inserted record should not be filtered until the next time a filter is applied or filter is reset. The record should also be shown different (i.e. darker background color, or an icon, or tooltip) than others implying it was edited and is not being filtered.

  2. The record should be left in focus after being edited or inserted. As soon as it loses focus, filter should be applied to it. The ideal solution is if the record is filtered out, it shouldn't immediately go out of vision. For instance it may go invisible with an animation.

like image 167
Gokhan Kurt Avatar answered Sep 28 '22 22:09

Gokhan Kurt


I just checked the google docs and libre office, both of them just display the new record regardless of the filter. You need to re-apply the filter to hide them from view (in both cases the column "A" is filtered by "value 1"):

google docs spreadsheet

libre office spreadsheet

like image 38
Boris Serebrov Avatar answered Sep 28 '22 22:09

Boris Serebrov