Blog

DataTable - 1000 columns and more

September 2, 2013

As you may know from the previous article, 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, 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.

Performance

The performance is quite good in all of the modern browsers

The less the better

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.

The less the better
You can grab our test package from http://github.com/webix-hub/grid-performance-tests and 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.

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.

The less the better

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.

Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn Bookmark on del.icio.us Vote on Reddit