Recently I had created a couple of components to make filtering and sorting a list of objects easier. Essentially I wanted a table where the headers are clickable for sorting and also have a textbox below them for filtering.
Now, this isn’t super great, because I’m downloading all of the data to the client side before filtering and paginating. Obviously, this ends up being a lot of data, but for this particular application it is all going to be either on an intranet or localhost, so the download time isn’t as big of a concern.
Filtering Lots of Things
Still, even though all of the data exists locally on the client side, filtering through 24,000 objects ends up being a little slow and clunky. This is especially the case when you’re trying to type a filter that is more than one number or one character. Luckily, you can take advantage of rxjs debounceTime to not murder your client’s CPU. debounceTime will wait until a specified amount of time has passed since the last time the input has changed. In our case, it means the action won’t be performed until after the user has stopped typing.