{"id":13447870,"url":"https://github.com/clauderic/virtualized-list","last_synced_at":"2025-04-05T14:07:21.027Z","repository":{"id":16735567,"uuid":"80562353","full_name":"clauderic/virtualized-list","owner":"clauderic","description":"A tiny, Vanilla JS, virtualization library","archived":false,"fork":false,"pushed_at":"2022-10-05T15:24:48.000Z","size":1052,"stargazers_count":157,"open_issues_count":17,"forks_count":25,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T15:49:50.978Z","etag":null,"topics":["front-end","javascript","vanilla","virtual-scroll","virtualization","windowing"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clauderic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-31T21:07:03.000Z","updated_at":"2024-03-02T07:16:14.000Z","dependencies_parsed_at":"2022-07-12T15:14:33.227Z","dependency_job_id":null,"html_url":"https://github.com/clauderic/virtualized-list","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clauderic%2Fvirtualized-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clauderic%2Fvirtualized-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clauderic%2Fvirtualized-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clauderic%2Fvirtualized-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clauderic","download_url":"https://codeload.github.com/clauderic/virtualized-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247345853,"owners_count":20924102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["front-end","javascript","vanilla","virtual-scroll","virtualization","windowing"],"created_at":"2024-07-31T05:01:29.054Z","updated_at":"2025-04-05T14:07:21.012Z","avatar_url":"https://github.com/clauderic.png","language":"JavaScript","readme":"# virtualized-list\n\u003e A tiny vanilla virtualization library, with DOM diffing\n\n[![npm package][npm-badge]][npm]\n[![Build Status](https://travis-ci.org/clauderic/virtualized-list.svg?branch=master)](https://travis-ci.org/clauderic/virtualized-list)\n[![codecov](https://codecov.io/gh/clauderic/virtualized-list/branch/master/graph/badge.svg)](https://codecov.io/gh/clauderic/virtualized-list)\n\nGetting Started\n------------\n\nUsing [npm](https://www.npmjs.com/):\n```\nnpm install virtualized-list --save\n```\n\n\nES6, CommonJS, and UMD builds are available with each distribution. For example:\n```js\nimport VirtualizedList from 'virtualized-list';\n```\n\nYou can also use a global-friendly UMD build:\n```html\n\u003cscript src=\"virtualized-list/umd/virtualized-list.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nvar VirtualizedList = window.VirtualizedList.default;\n...\n\u003c/script\u003e\n```\n\nUsage\n------------\n### Basic example\n```js\nconst rows = ['a', 'b', 'c', 'd'];\n\nconst virtualizedList = new VirtualizedList(container, {\n  height: 500, // The height of the container\n  rowCount: rows.length,\n  renderRow: index =\u003e {\n  \tconst element = document.createElement('div');\n  \telement.innerHTML = rows[index];\n\n  \treturn element;\n  },\n  rowHeight: 150,\n});\n```\n\n### Advanced example\n```js\nconst rows = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nconst rowHeights = [150, 120, 100, 80, 50, 35, 200, 500, 50, 300];\n\nconst virtualizedList = new VirtualizedList(container, {\n  height: 400,\n  rowCount: rows.length,\n  renderRow: (index) =\u003e {\n  \tconst element = document.createElement('div');\n  \telement.innerHTML = row;\n\n  \treturn element;\n  },\n  rowHeight: index =\u003e rowHeights[index],\n  estimatedRowHeight: 155,\n  overscanCount: 5, // Number of rows to render above/below the visible rows.\n  initialScrollIndex: 8,\n  onMount: () =\u003e {\n    // Programatically scroll to item index #3 after 2 seconds\n    setTimeout(() =\u003e\n      virtualizedList.scrollToIndex(3)\n    , 2000);\n  }\n});\n```\n\n\nOptions\n------------\n\n| Property           | Type                      | Required? | Description                                                                                                                                                                       |\n|:-------------------|:--------------------------|:----------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| height             | Number                    | ✓         | Height of List. This property will determine the number of rendered vs virtualized items                                                                                          |\n| rowCount           | Number                    | ✓         | The number of rows you want to render                                                                                                                                             |\n| renderRow          | Function                  | ✓         | Responsible for rendering an item given it's index: `({index: number, style: Object}): HTMLElement`. The returned element must handle key and style.                     |\n| rowHeight          | Number, Array or Function | ✓         | Either a fixed height, an array containing the heights of all the items in your list, or a function that returns the height of an item given its index: `(index: number): number` |\n| initialScrollTop   | Number                    |           | The initial scrollTop value (optional)                                                                                                                                            |\n| initialIndex       | Number                    |           | Initial item index to scroll to (by forcefully scrolling if necessary)                                                                                                            |\n| overscanCount      | Number                    |           | Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices. Defaults to `3`                |\n| estimatedRowHeight | Number                    |           | Used to estimate the total size of the list before all of its items have actually been measured. The estimated total height is progressively adjusted as items are rendered.      |\n| onMount            | Function                  |           | Callback invoked once the virtual list has mounted.                                                                                                                               |\n| onScroll           | Function                  |           | Callback invoked onScroll. `function (scrollTop, event)`                                                                                                                          |\n| onRowsRendered     | Function                  |           | Callback invoked with information about the range of rows just rendered                                                                                                           |\n\nPublic Instance Methods\n------------\n\n#### `scrollToIndex (index: number, alignment: 'start' | 'center' | 'end')`\nThis method scrolls to the specified index. The `alignment` param controls the alignment scrolled-to-rows. Use \"start\" to always align rows to the top of the list and \"end\" to align them bottom. Use \"center\" to align them in the middle of container.\n\n#### `setRowCount (count: number)`\nThis method updates the total number of rows (`rowCount`) and will force the list to re-render.\n\n## Reporting Issues\nFound an issue? Please [report it](https://github.com/clauderic/virtualized-list/issues) along with any relevant details to reproduce it.\n\n## Contributions\nFeature requests / pull requests are welcome, though please take a moment to make sure your contributions fits within the scope of the project.\n\n## License\nvirtualized-list is available under the MIT License.\n\n[npm-badge]: https://img.shields.io/npm/v/virtualized-list.svg\n[npm]: https://www.npmjs.org/package/virtualized-list\n","funding_links":[],"categories":["JavaScript","Virtualization"],"sub_categories":["Docker Custom Builds"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclauderic%2Fvirtualized-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclauderic%2Fvirtualized-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclauderic%2Fvirtualized-list/lists"}