Over a million developers have joined DZone.

DataTable - 1000 columns and more

DZone's Guide to

DataTable - 1000 columns and more

Free Resource

As you may know from the previous article, DataTable is not limited by the number of rows. What about columns?

The demo of DataTable 

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 columns as well as for rows. So, if you have a lot of columns, DataTable 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.


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.

You can grab our test package from http://github.com/webix-hub/grid-performance-testsand check it yourself.

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.

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.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}