Looking for the most efficient way to filter a large chunk of JSON data client-side using a table? Each header has an input filter where users can enter a string to filter that specific property. There is also a global filter for free text search.
If you have any ideas on how to accomplish this, I'd love to hear your thoughts.
Example for visualization purposes:
+---------------+
| Global filter |
+---------------+
+----------+---------+----------+-----------+
| Column 1 | Column 2 | Column 3 | Column 4 |
+----------+---------+----------+-----------+
| ... | ... | ... | ... |
+----------+---------+----------+-----------+
Option 1:
When clicking on a filter input:
- Generate a set of data from all populated filters except the clicked filter and cache it.
- On key-up - filter the data based on the cached result.
This method might have some overhead as some searches could be repeated.
Option 2:
- On key-up - filter based on cached searches.
- On blur - Current result replaces the cached search.
This method works well if only adding filters, but may cause issues when modifying existing ones.
Option 3:
A combination of Options 1 and 2. When clicking on a filter input:
- If the filter does not contain the default value, generate a cache based on all filters except the current one.
- On key-up - filter based on cached searches.
- On blur - Current result overwrites the cached search.
After brainstorming, Option 3 seems like the best approach in terms of simplicity and performance.
Do you think I'm on the right track? Would love to get your feedback!
/Patrik