{"id":31823394,"url":"https://github.com/ghostebony/svelte-virtual","last_synced_at":"2026-03-17T19:26:08.982Z","repository":{"id":47793162,"uuid":"516311248","full_name":"ghostebony/svelte-virtual","owner":"ghostebony","description":"Virtual List and Grid components for Svelte","archived":false,"fork":false,"pushed_at":"2025-01-22T03:55:59.000Z","size":576,"stargazers_count":65,"open_issues_count":9,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-10-20T15:56:24.848Z","etag":null,"topics":["grid","list","scroll","svelte","virtual"],"latest_commit_sha":null,"homepage":"https://npmjs.com/svelte-virtual","language":"Svelte","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/ghostebony.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["ghostebony"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2022-07-21T09:42:54.000Z","updated_at":"2025-10-12T20:11:16.000Z","dependencies_parsed_at":"2023-10-16T09:11:21.571Z","dependency_job_id":"20cf2713-eb8f-4fa4-a159-6ce39ac769e4","html_url":"https://github.com/ghostebony/svelte-virtual","commit_stats":{"total_commits":160,"total_committers":4,"mean_commits":40.0,"dds":0.40625,"last_synced_commit":"86217ac7d276d379ef82f1ed96163d922822677a"},"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"purl":"pkg:github/ghostebony/svelte-virtual","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghostebony%2Fsvelte-virtual","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghostebony%2Fsvelte-virtual/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghostebony%2Fsvelte-virtual/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghostebony%2Fsvelte-virtual/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ghostebony","download_url":"https://codeload.github.com/ghostebony/svelte-virtual/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghostebony%2Fsvelte-virtual/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30629255,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-17T17:32:55.572Z","status":"ssl_error","status_checked_at":"2026-03-17T17:32:38.732Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["grid","list","scroll","svelte","virtual"],"created_at":"2025-10-11T14:50:42.969Z","updated_at":"2026-03-17T19:26:08.957Z","avatar_url":"https://github.com/ghostebony.png","language":"Svelte","funding_links":["https://github.com/sponsors/ghostebony"],"categories":[],"sub_categories":[],"readme":"# svelte-virtual\n\n## About\n\nSvelte components for efficiently rendering large lists. Instead of rendering all your data, svelte-virtual renders only what's visible\n\n## Installation\n\nWith npm:\n\n```\nnpm i -D svelte-virtual@next\n```\n\nWith yarn:\n\n```\nyarn add -D svelte-virtual@next\n```\n\nWith pnpm:\n\n```\npnpm add -D svelte-virtual@next\n```\n\n## Usage\n\n### Vertical List [default] ([demo](https://svelte.dev/repl/70b159e914024f869180c28b8e7eb92d))\n\n```svelte\n\u003cscript\u003e\n\timport { List } from \"svelte-virtual\";\n\n\tlet items = [...Array(100000).keys()];\n\u003c/script\u003e\n\n\u003cList itemCount={items.length} itemSize={20} height={500}\u003e\n\t{#snippet item({ index, style })}\n\t\t\u003cdiv {style}\u003e\n\t\t\t{items[index]}\n\t\t\u003c/div\u003e\n\t{/snippet}\n\u003c/List\u003e\n```\n\n### Horizontal List ([demo](https://svelte.dev/repl/160a5bf2e2a8484c8ffd03b219f5eb27))\n\n```svelte\n\u003cscript\u003e\n\timport { List } from \"svelte-virtual\";\n\n\tlet items = [...Array(100000).keys()];\n\u003c/script\u003e\n\n\u003cList itemCount={items.length} itemSize={60} height={40} layout=\"horizontal\"\u003e\n\t{#snippet item({ index, style })}\n\t\t\u003cdiv {style}\u003e\n\t\t\t{items[index]}\n\t\t\u003c/div\u003e\n\t{/snippet}\n\u003c/List\u003e\n```\n\n### Grid ([demo](https://svelte.dev/repl/8e2b877da06c4532ae50482236abbcac))\n\n```svelte\n\u003cscript\u003e\n\timport { Grid } from \"svelte-virtual\";\n\n\tlet items = [...Array(100000).keys()];\n\u003c/script\u003e\n\n\u003cGrid itemCount={items.length} itemHeight={50} itemWidth={60} height={500}\u003e\n\t{#snippet item({ index, style })}\n\t\t\u003cdiv {style}\u003e\n\t\t\t{items[index]}\n\t\t\u003c/div\u003e\n\t{/snippet}\n\u003c/Grid\u003e\n```\n\n### Grid [using rows and columns] ([demo](https://svelte.dev/repl/1b2b8cdcb6674f2c8a9e434009f6df3b))\n\n```svelte\n\u003cscript\u003e\n\timport { Grid } from \"svelte-virtual\";\n\n\tlet itemCount = 100000;\n\tlet columnCount = 5;\n\n\tlet items = Array.from({ length: itemCount }, (_, l) =\u003e\n\t\tArray.from({ length: columnCount }, (_, c) =\u003e `${l}-${c}`),\n\t);\n\u003c/script\u003e\n\n\u003cGrid itemCount={itemCount * columnCount} itemHeight={50} itemWidth={65} height={500} {columnCount}\u003e\n\t{#snippet item({ rowIndex, columnIndex, style })}\n\t\t\u003cdiv {style}\u003e\n\t\t\t{items[rowIndex][columnIndex]}\n\t\t\u003c/div\u003e\n\t{/snippet}\n\u003c/Grid\u003e\n```\n\n## Props\n\n### List\n\n| Property        | Type                                     | Default                    | Required? |\n| :-------------- | :--------------------------------------- | :------------------------- | :-------: |\n| itemCount       | `number`                                 |                            |     ✓     |\n| itemSize        | `number`                                 |                            |     ✓     |\n| height          | `number \\| string`                       | `\"100%\"`                   |           |\n| width           | `number \\| string`                       | `\"100%\"`                   |           |\n| stickyIndices   | `number[]`                               | `[]`                       |           |\n| overScan        | `number`                                 | `1`                        |           |\n| marginLeft      | `number`                                 | `0`                        |           |\n| marginTop       | `number`                                 | `0`                        |           |\n| layout          | `\"vertical\" \\| \"horizontal\"`             | `\"vertical\"`               |           |\n| scrollPosition  | `number`                                 | `0`                        |           |\n| scrollAlignment | `\"auto\" \\| \"start\" \\| \"center\" \\| \"end\"` | `\"auto\"`                   |           |\n| scrollBehavior  | `\"auto\" \\| \"smooth\"`                     | `\"auto\"`                   |           |\n| getKey          | `(index: number) =\u003e unknown`             | `(index: number) =\u003e index` |           |\n\n### Grid\n\n| Property       | Type                         | Default                    | Required? |\n| :------------- | :--------------------------- | :------------------------- | :-------: |\n| itemCount      | `number`                     |                            |     ✓     |\n| itemHeight     | `number`                     |                            |     ✓     |\n| itemWidth      | `number`                     |                            |     ✓     |\n| height         | `number`                     |                            |     ✓     |\n| width          | `string`                     | `\"100%\"`                   |           |\n| overScan       | `number`                     | `1`                        |           |\n| marginLeft     | `number`                     | `0`                        |           |\n| marginTop      | `number`                     | `0`                        |           |\n| scrollPosition | `number`                     | `0`                        |           |\n| scrollBehavior | `\"auto\" \\| \"smooth\"`         | `\"auto\"`                   |           |\n| getKey         | `(index: number) =\u003e unknown` | `(index: number) =\u003e index` |           |\n| columnCount    | `number`                     | `undefined`                |           |\n\n## Methods ([demo](https://svelte.dev/repl/8efc42f67dc5493aabe465c589af62e7))\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth align=\"left\"\u003eMethod\u003c/th\u003e\n\t\t\t\u003cth align=\"left\"\u003eArgument\u003c/th\u003e\n\t\t\t\u003cth align=\"left\"\u003eType\u003c/th\u003e\n\t\t\t\u003cth align=\"left\"\u003eDefault\u003c/th\u003e\n\t\t\t\u003cth align=\"center\"\u003eRequired?\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd rowspan=\"4\"\u003escrollToIndex\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eindex\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003ctd align=\"center\"\u003e✓\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003ealignment\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e\"auto\" | \"start\" | \"center\" | \"end\"\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003escrollAlignment\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd align=\"center\"\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003ebehavior\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e\"auto\" | \"smooth\"\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003escrollBehavior\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd align=\"center\"\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd rowspan=\"3\"\u003escrollToPosition\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eposition\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003enumber\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\t\u003ctd align=\"center\"\u003e✓\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003ebehavior\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003e\"auto\" | \"smooth\"\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ccode\u003escrollBehavior\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003ctd align=\"center\"\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n## Snippets\n\n-   `item` - Snippet for each item\n    -   Props:\n        -   Shared:\n            -   `index: number` - Item index\n            -   `style: string` - Item style must be applied to the first child element of the snippet (look above for example)\n        -   Only for `\u003cGrid/\u003e` ([demo](#grid-using-rows-and-columns-demo)):\n            -   `rowIndex: number` - Item row index\n            -   `columnIndex: number` - Item column index\n-   `placeholder` (optional) - Snippet for each item (when scrolling fast, replaces `item` snippet. if not present, `item` snippet is used)\n    -   Props:\n        -   Shared:\n            -   `index: number` - Item index\n            -   `style: string` - Item style must be applied to the first child element of the snippet (look above for example)\n        -   Only for `\u003cGrid/\u003e` ([demo](#grid-using-rows-and-columns-demo)):\n            -   `rowIndex: number` - Item row index\n            -   `columnIndex: number` - Item column index\n-   `header` (optional) - Snippet for the elements that should appear at the top of the component\n-   `footer` (optional) - Snippet for the elements that should appear at the bottom of the component\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghostebony%2Fsvelte-virtual","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fghostebony%2Fsvelte-virtual","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghostebony%2Fsvelte-virtual/lists"}