Tree Grid with Fast Data Loading and Virtualization

IntegralUI Tree Grid component comes with built-in virtualization that allows you to work with hundreds of columns and thousands of rows in the browser. This demo shows how fast you can load huge data sets into the grid and drag and drop one or multiple rows within the grid.

A sample code that shows how to load large into the Tree Grid component using virtualization is available in JavaScript, Angular, React and Vue, in following sections below.

In above demo, you can choose how many columns and rows to display in the Grid. For demonstration purposes only, a limit is set to 100 columns and 100,000 rows with maximum depth of 100 tree levels. In real scenario, the only limit is how much data the browser can handle. By clicking on the 'Add' button, the grid is populated with custom data.

To start a drag and drop operation, left-click on a move row icon in first column on the left, then move the mouse cursor and drag operation will start. A drag-drop marker will appear with information about target row and an icon (up, down or in) showing whether the dragged row can drop above, below or as a child to target row. In this example, there are no restrictions set, and you can drag and drop a row and place it above, below or as a child of another row. However, if you want you can set conditions and provide custom drag drop operations on your own. While dragging a row over middle space of some target row, when dropped the row will be added as a child of the target row.

To select multiple rows, hold SHIFT or CTRL key and click on specific row.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

How to Load Large Data using Virtualization in Tree Grid

Although you can load thousands of rows into the tree grid, only small number of table rows are actually created within the DOM. Only columns and rows that are present in the current view are created in the DOM, all other objects outside of the visible area are excluded from the DOM. This is called virtualization, where Grid displays only small sample of its data at one time.

Related: Grid with Server Side Pagination

The Tree Grid component is optimized in a way that DOM doesn't not recreates its table elements whenever the current view is scrolled, but instead only the data changes, based on current horizontal and vertical scrolling position. Even more, because this is a Tree Grid, the whole tree hirerachy is not fully shown, only rows that are expanded shows their child rows, other children of collapsed rows are also excluded from the view.

In this example, you can choose how many columns and rows you want to add to the grid, and the data is automatically created using simple text as cell values. Of course, you can change this and add editors or other custom content in cells like progress bars, check boxes, buttons, icons etc. At the end, the result will be the same, which is fast data loading just in less than a second you can add thousands of rows to the grid.

• JavaScript
• Angular
• React

To add custom content in each column and row cell, you can use templates that allow you to set up a different content to appear per column or even for each cell separately from other cells in the same column. However, to make an example as simplest as possible, templates are not used, just plain text as cell values.

Conclusion

IntegralUI Tree Grid component has with support for virtualization, which allows you to add thousands of rows into the grid during run-time. Performance of the Grid is optimal even with huge data sets, thanks to true virtualization that creates only small part of the HTML table elements in the DOM, only for the data that is present in the grid current view.

Virtualization also works when using templates to add custom content to each column and row cell, but this example is basic showing only simple text for cell values. In addition, the example also shows how to drag and drop multiple rows within the grid using the drag marker shown in first grid column.

Tree Grid is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.