As you may know from the previous article JS Grid with 1 000 000 rows, DataTable is not limited by the number of rows. What about columns?
The above example shows a grid with 1 000 columns. Yep, it is not a million, but still quite impressive, isn’t it?
How it Works
DataTable applies lazy rendering for large number of columns as well as for rows. So, if you have lots of columns, this JavaScript grid will render only those that are really visible. When a column disappears from the screen, it will be removed from the DOM, the same as when a column needs to be shown on the screen – it will be added to the DOM. While all the above sounds quite simple, lazy column rendering is a unique feature of Webix DataTable. As far as I know, it is the only javascript grid component which provides such a functionality.
Performance
The performance is quite good in all of the modern browsers
In comparison with other grid solutions, the advantage of Webix DataTable is quite clear. While performance of other grid components is degrading significantly, DataTable shows nearly the same rendering speed with any number of columns.
Touch devices
Lazy rendering works on both desktop and touch browsers. To improve performance, DataTable uses custom scrolls. They are not so smooth as the native ones. So you need to choose: either you have thousands of columns, but with not-so-nice scrolling or you have smooth native scrolling, but the number of columns in DataTable will be limited by the device performance.
It’s necessary to say that even in the native scrolling mode datatable is able to render a lot of columns over a short period of time.
Dynamic loading
Technically, it’s possible to implement dynamic column loading, similar to dynamic row loading. In such a case, data will be loaded into a specific column from a server side only when this column will become visible. From a perspective of practical use, it is too crazy, so there is no sample for this feature (though it can be done).
What it means
The same as with 1 million of rows, it is quite a rare situation, when you need to have 1000 columns in a grid. However, there are such cases in business apps, when the number of columns is beyond our control. For example, in a business report that involves data for ten-year period, with 2 parameters for each month, the resulting grid will have 240 columns ( 10 * 12 * 2 = 240 ). The use of such wide grids is not the best solution from perspective of user experience, but it is nice to know, that even in such a situation your application will remain fast and responsive.
