Vanilla patterns

For large dynamic lists for which we store data in the memory, filtering is no different from sorting and otherwise rendering the list. This example shows filtering in a specific scenario where the list is small enough to make it feasible to render it in whole. Here we filter the list not by re-rendering every node but toggling their hidden attribute.

This technique can be applied for lists that have fewer than a few hundred items and are not paginated. Do not forget to test the performance, though, because the performance also depends on other factors such as the number of nodes in each row, styling, etc.

We have included an example of sorting as well. This implementation of sorting relies on the DOM alone, and also serves as a demonstration of how sorting and filtering combine in this scenario.