1.0.2 • Published 2 years ago
virtualized-js v1.0.2
Virtialized JS
Class component for rendering big data scrollable lists using vanilla javascript or typescript
Virtualized JS renders only partials of provided items which fit in window. Thus, there is no overload with huge data lists during the render process.
Install
# npm
npm i --save virtualized-js
# yarn
yarn add virtualized-js
Usage
import VirtualizeJS from 'virtualize-js'
const list = new VirtualizeJS({
containerSelector: '.virtualized',
height: 400,
items: listItems(),
itemHeight: 60,
renderTemplate: (item: ListItem, index) => `
<div class="list-item">
<h4>${item.title}</h4>
<p>${item.description}</p>
</div>
`
})
list.init()
The code above will attach list with items to a node with .virtualized
selector.
You can change any of properties by just setting it via list
like:
list.itemHeight = 100
list.paint()
The code above will set height of item to 100px. To apply changes you need to call paint
method.
List of options
containerSelector
- any selector to which the list will be attachedheight
- height of the listitemHeight
- height of the item in listitems
- items array with any data you haverenderTemplate
- function that calls for each item that should render in screen. Includes(item, index)
params and must return correct stringified HTML.onItemClick
- Function which is called by clicking on item. Includesitem
as argument.
Testing
Here is a code sandbox