olifolkerd
Joined 9 years ago
Joined 9 years ago
By removing the need for 3rd party dependencies it helps reduce the overall size of the package, made it easier to manage the source of the system, made it easier for developers to import and dramatically increased the performance of the table, Tabulator used to be built on jQuery but that was a beast of a library and eventually became a bottle neck harming performance more than it aided development.
Removing the need for dependencies was also a great learning experience to implement a variety of systems that you would usually go straight to another library for.
When there is something bespoke in one of the extensible modules there are the occasional use of library's, such as the xlsx downloader or the sparkline formatter. but i only use these in optional components and keep the core dependency free :)
I use react native wrappers at work and embed webviews that allow components like these to be used.
That being said, having a react-native variant for this is on the long term road map
Lets say we are working with 10,000 rows
Yes loading that many elements into the DOM is slow and your approach would stop it blocking, however what it dosnt do is stop the sheer number of elements from overloading the DOM.
Most browsers simply cant handle that many elements in the DOM, if you try and scroll a div containing that may elements at best it will be sluggish and at worst it will simply crash the browser. on devices without much memory it is very likely that the whole DOM will freeze up and make the site unusable.
By adding and deleting the elements as they become visible/hidden it keeps the number of elements in the DOM to a minimum, while improving load time and adding only a bit of extra processing to the scroll event, which modern browsers can handle with ease. giving all round the best solution
Tabulator has a wide variety of options for handling large data sets. because it uses a virtual DOM you can effectively load as many rows as you like into the table, with the limit being defined by the amount of memory on the browsing machine and loading time to pull in the data.
With the virtual DOM enabled Tabulator will then only render the rows that are visible to the user, creating and destroying them in real time as the user scrolls through the table
To reduce loading time you can also:
Paginate data (both of local data and from an ajax source: http://tabulator.info/docs/4.1/page
Progressively load via ajax, both on scroll and timed: http://tabulator.info/docs/4.1/data#ajax-progressive
and also manually handle data retrieval yourself and use the replaceData function to swap out data sets as needed
each theme is contained in its own CSS file, you simply include the CSS file for the theme of your choice.
Configuring themes for your table is covered extensively in the documentation along with examples of each theme in use: http://tabulator.info/docs/4.1/theme