Load Large Data in ListBox
By default, IntegralUI ListBox component has virtualization active. This means, that only small portion of list is actually loaded into the DOM, even there are thousands of items. Virtualization allows you to keep high performance when working with large data sets and all actions are optimized regardless of the number of items currently present in the ListBox.
A sample code that shows how to load large data into the ListBox is available in JavaScript, Angular, React and Vue, in following sections below.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this example, you can set up how many items you want to load into the ListBox. The loading time for the ListBox to become populated and ready is measured in milliseconds. In addition, you can drag and drop one or multiple items from one position to another within the list box.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
How to Fast Load Large Data into ListBox
There are different ways to load data into the ListBox. You can:
- have your data stored in a server database and once the server data is retrieved, you need to apply it to the items property of the ListBox, conversion may be required
- have a JSON file with data, if your data source have custom field names use data binding
- load data on demand, by using infinite scrolling or load more button
In all cases, to load data fast into the ListBox you need to have virtualization enabled.
When ListBox is auto-sized, virtualization is disabled. This is best suited for small lists, because each item is created in the DOM.
In this example, the list is randomly generated based on number of items set in control panel. Based on this number, you can add items to the ListBox using the addItem method.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
The addItem can accept one item object or an array of items.
You can also clear the list and remove all items by calling the clearItems method.
By default, the ListBox displays a list of items with icon and text set, but you can create unique appearance of the list, by using item templates with use of custom HTML elements.
Conclusion
When virtualization is active, you can load large data into the ListBox component while keeping high performance. This allows you to work with thousands of items without losing performance, during add/remove of items on demand, keyboard navigation, drag and drop and other operations.
ListBox is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.