It would be nice to have a UI that could support any amount of data. Even if today you have only a hundred of records to load into a grid, it wouldn’t guarantee that this hundred won’t turn into 10 000 in a month or into 100 000 in a year. The more successful your application is, the greater the chance that the amount of data will increase. It means that you will have to adjust your app to support a large data set.
While designing Webix DataTable, we’ve met this challenge. With DataTable there is no need to update anything in the app’s code when the data size in your app grows from hundreds to thousands and, who knows, maybe millions of records. If you don’t believe, just check the demo below.
How it Works
Webix DataTable uses a lazy drawing strategy, i.e. it draws visible elements only. As a result, even when we work with a million of rows, DOM includes just about a hundred of elements simultaneously. By following such strategy, the developer doesn’t have to care about the total amount of rows as 100 or 100 000 rows are drawn at the same speed. There are overhead expenses for storing large data sets, but they are much smaller than the drawing time and we can neglect them.
The idea of lazy drawing isn’t new, but all the existing solutions have to deal with rendering limitations of web browsers. The scrollable containers of all browsers have a maximum size; for example, IE limits it to about 10 millions of pixels, which is equal to 500 000 rows. IE will ignore any data set that exceeds that size. DataTable renders data part and a scroll UI separately, which allows to overcome this limit.
There is no need to call any API or adjust your code in some special way. DataTable will apply the above tricks automatically.
Support of Touch Devices
The requirements to the drawing speed for tablets and smartphones are even higher, as their hardware is less powerful. While working with usual HTML, problems with speed occur even when there are only 1,000 rows in a table. When using Webix Datable, we aren’t limited by the size of data set. The lazy drawing strategy allows us not to worry about it. However, we have to pay for it by losing visual smoothness of scrolling (mobile browsers don’t allow to process scroll events with necessary precision).
If you want to restore the smoothness of scrolling, you may switch DataTable to classic drawing mode. Unfortunately, the Webix grid loses the ability to load huge data set in this mode.
Speed of Drawing
The real figures can be different on your device, as they depend on PC performance. But the relative values will be the same. As you can see, modern smartphones and tablets work on the same scale as desktop browsers.
Dynamic Loading
The example given at the beginning of this article generates data on-the-fly, which is a bit of cheating. In a real application it is necessary to load data from the server. I should say that loading a million of data rows is a great load even with a fast network (1 million rows, each contains 5 fields, 10 bytes each – all in all 50 megabytes of data!).
DataTable allows using dynamic loading. The browser on the client side loads only the rows that are required at the moment. During the grid scrolling the additional requests are sent to the server side and after that the extra data are loaded and rendered. Actually, DataTable uses even more advanced strategy. DataTable takes into account the direction of scrolling and can preload additional data to guarantee scrolling without pauses. This technique as well as data rendering allows you not to care about technical details.
See the example of dynamic loading.
Alternative Ways of Loading Big Data
DataTable ability to show million of rows doesn’t mean that you should present such huge datasets in real life apps. Perhaps, it makes sense to think about user experience and provide users only with the data that is necessary for their current tasks. One more option is to use paging, which is more suitable for navigation in large dataset.
In any case, DataTable is a component that is fast and responsive for any amount of data.
