'Tabulator: Efficient column filtering using formatted data

I am using (to be precise, pilot testing & feature/performance assessment still pending) the Tabulator tables library for displaying a (rather large - some ~30 columns and 10k rows) data set and was wondering about the most efficient way of implementing the column filtering using formatted data.

By formatted data I mean the data I am displaying to the user in the table after applying a cell format on the original data. This way, lets say I have a Date column formatted to "dd/mm/yyyy" and I would then want to let the user to find all rows matching September 2021 on that column by typing "9/2021" into the column filter box. Now, I could do this in 2 ways I know about:

  1. Implement a custom filter. With this method I would have to re-apply the transformation (formatting) to the data every time and then match it to the user input. CPU heavy.

  2. Implement a mutator. This way I would once (upon data load) transform the data, creating a new (as in not present in the original data array I load into the table) "column" in the backing data array, and upon filtering the table would simply filter against those new values. Would need to introduce a new "column" in the data for every column requiring this. RAM heavy.

From these I tend to pick option 2) as my target is mostly desktop browsers and the table is slow as it is (column filter / sort easily take 1-2 seconds even with a low number of rows such as 200-300). Perhaps I missed a better way?



Solution 1:[1]

In order to filter data you will have to use a Mutator on the row data. Formatters are purely visual only and have no effect on a sort. The reason for this is that formatters can out put any cell contents, which could be an image, a progress bar div etc and there is no meaningful way to sort that data.

string based date sorting will always be rather inefficient because you have to convert the data into date object, then compare and sort them.

If you mutate your data into a YYYY-DD-MM HH:ii:ss format and then use the alphanum sorter you may find this more efficient as it skips the date conversion part of the sort

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Oli Folkerd