Exploring sciter.js virtual lists.
This project is derivated from the virtual table example.
- git clone the repository
- install packages
npm install - install latest sciter sdk
npm run install-sdk - start the demo
npm run scapp
- A recent version of Node.js
node(tested with 16 LTS) and its package managernpm.- On Windows download and run the installer
- On Linux check the installation guide
- install package
npm install sciter-virtual-table(not yet)
- add the
srcdir to your project
<style src="src/vbody.css" />
<body>
<table>
<thead>
<th>index</th>
<th>first name</th>
<th>middle name</th>
<th>last name</th>
<th>age</th>
</thead>
<tbody styleset="#vbody" />
</table>Virtual lists are virtual because only part of the data is added to the html DOM. By doing so the table is much more responsive. In the screenshot below, the yellow and blue rows 6 to 22 are added to the DOM, the blue rows are visible in the interface and the gray rows at both ends are neither added to the DOM, nor visible.
Assigning the virtual-list behavior adds the vlist object to the body element which has the following properties:
firstVisibleItem: Element
first body element that is visible
lastVisibleItem: Element
last body element that is visible
firstBufferIndex: int
index of first element that is in memory
lastBufferIndex: int
index of last element that is in memory