repository·master·Indexed 27 days ago
https://github.com/nexts/clusterize.jsA lightweight vanilla JavaScript plugin for efficiently rendering large datasets in the browser using DOM recycling. It allows for the display of large tables or lists by clustering DOM elements, reducing performance overhead. Features include configurable virtual scrolling, lifecycle callbacks, and methods to update, append, prepend, or clear rows.
Clusterize class by passing a configuration object. You must provide either the ID of the scroll and content elements or the elements themselves. You can provide an array of HTML strings as rows or let Clusterize fetch existing markup from the content element.The Clusterize constructor accepts an options object to customize virtual scrolling behavior.
| Option | Default | Description |
|---|---|---|
rows_in_block | 50 | Number of rows in a single block |
blocks_in_cluster | 4 | Number of blocks in a cluster |
tag | null | The HTML tag for rows (e.g., 'tr' for tables) |
show_no_data_row | true | Whether to show a placeholder when no data is present |
no_data_class | 'clusterize-no-data' | CSS class for the 'no data' row |
no_data_text | 'No data' | Text displayed in the 'no data' row |
keep_parity | true | Whether to keep parity for layout stability |
callbacks | {} | Object containing lifecycle hooks |
item_height | undefined | Manually set the height of a single row (if not auto-detected) |
Use these methods to retrieve information about the current state of the list:
getRowsAmount(): Returns the total number of rows in the current dataset.getScrollProgress(): Returns the current scroll progress as a percentage (0-100).You can hook into the Clusterize lifecycle using the callbacks option. Supported callbacks include:
scrollingProgress(progress): Called during scrolling. progress is a percentage (0-100) of the scroll position relative to the total data height.clusterWillChange(): Called just before the DOM is updated with a new cluster of rows.clusterChanged(): Called after the DOM has been updated with a new cluster of rows.destroy method. This removes scroll and resize event listeners. If you pass true as an argument, it will replace the current content with an empty row (based on your no_data_text settings).Use these methods to manage the data being displayed in the virtual list:
update(new_rows): Replaces the current dataset with new_rows (an array of HTML strings). If an empty array is passed, it clears the list.append(rows): Adds new rows to the end of the current dataset.prepend(rows): Adds new rows to the beginning of the current dataset.clear(): Removes all rows from the list.