{"id":25272913,"url":"https://github.com/apleshkov/mega-grid","last_synced_at":"2025-07-22T19:34:59.643Z","repository":{"id":201240934,"uuid":"698188780","full_name":"apleshkov/mega-grid","owner":"apleshkov","description":"Vanilla virtualized lists \u0026 grids (vertical \u0026 horizontal)","archived":false,"fork":false,"pushed_at":"2024-02-08T16:14:01.000Z","size":13703,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T08:17:06.713Z","etag":null,"topics":["collection-view","virtual-list","virtual-scroll","virtualized-grid","virtualized-list","virtualized-scroll","windowing"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/apleshkov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2023-09-29T11:04:26.000Z","updated_at":"2023-10-23T09:59:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"1e95bf61-84eb-4b41-a81d-ae36596b7fce","html_url":"https://github.com/apleshkov/mega-grid","commit_stats":null,"previous_names":["apleshkov/mega-grid"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/apleshkov/mega-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apleshkov%2Fmega-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apleshkov%2Fmega-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apleshkov%2Fmega-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apleshkov%2Fmega-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apleshkov","download_url":"https://codeload.github.com/apleshkov/mega-grid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apleshkov%2Fmega-grid/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266561462,"owners_count":23948632,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"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":["collection-view","virtual-list","virtual-scroll","virtualized-grid","virtualized-list","virtualized-scroll","windowing"],"created_at":"2025-02-12T13:37:16.902Z","updated_at":"2025-07-22T19:34:59.618Z","avatar_url":"https://github.com/apleshkov.png","language":"TypeScript","readme":"# mega-grid\n\nVirtualized lists \u0026 grids with unlimited number of rows and columns to display any amount of data.\n\n\u003cimg src=\"https://github.com/apleshkov/mega-grid/blob/main/demo.gif\" width=\"656\" height=\"240\" alt=\"Demo\" /\u003e\n\n## Features\n\n* Vertical \u0026 horizontal scroll\n* Auto item sizing using col/row count\n* Auto col/row count using static item size\n* [Resizable](#resizing) views\n* Updatable item count (useful for e.g. [infinite scroll](#infinite-scroll))\n* Animated (or instant) scroll to any item by index using different positioning (see `Grid.scrollToItem`)\n* Animated (or instant) scroll to the end (see `Grid.scrollToEnd`)\n* Custom item [focusing](#focusing)\n* 0 dependencies (only dev ones)\n* Written in Typescript\n* No specific CSS\n* Friendly builder API\n\n## Installation\n\n```\nnpm i mega-grid\n```\n\n## Basic Usage\n\nVertical grid with **3 columns** to show 100,000 items.\n```js\nimport { vert } from \"mega-grid\";\n\nvert\n    .grid(\n        300, // width\n        400  // height\n    )\n    .cols({\n        count: 3,\n        itemHeight: 60,\n        colSpacing: 2,\n        rowSpacing: 2\n    })\n    .withCell(() =\u003e {\n        // Cell factory\n        const c = document.createElement(\"div\");\n        return {\n            renderTo(container) {\n                container.appendChild(c);\n            },\n            update(item) {\n                c.innerHTML = `Item #${item}`;\n            },\n        };\n    })\n    .contentInset(2) // content inset (padding) in px\n    .itemCount(100000)\n    .insertTo(document.getElementById(\"app\"));\n```\n\nHorizontal **list** (just 1 row) to show 100,000 items.\n```js\nimport { horz } from \"mega-grid\";\n\nhorz\n    .grid(\n        500, // width\n        100  // height\n    )\n    .rows({\n        count: 1,\n        itemWidth: 60,\n        colSpacing: 2\n    })\n    .withCell(() =\u003e {\n        // Cell factory\n        const c = document.createElement(\"div\");\n        return {\n            renderTo(container) {\n                container.appendChild(c);\n            },\n            update(item) {\n                c.innerHTML = `Item #${item}`;\n            },\n        };\n    })\n    .contentInset(2) // content inset (padding) in px\n    .itemCount(100000)\n    .insertTo(document.getElementById(\"app\"));\n```\n\nVertical grid with **static item size** to show 100,000 items.\n```js\nimport { vert } from \"mega-grid\";\n\nvert\n    .grid(100, 100)\n    .itemSize({\n        width: 40,\n        height: 60,\n        rowSpacing: 2\n    })\n    .withCell(() =\u003e {\n        // Cell factory\n        const c = document.createElement(\"div\");\n        return {\n            renderTo(container) {\n                container.appendChild(c);\n            },\n            update(item) {\n                c.innerHTML = `Item #${item}`;\n            },\n        };\n    })\n    .contentInset(2) // content inset (padding) in px\n    .itemCount(100000)\n    .insertTo(document.getElementById(\"app\"));\n```\n\n## Focusing\n\n**Refreshing**: update focus position and refresh the grid.\n```js\nimport { vert } from \"mega-grid\";\n\nlet cursor = 0;\n\nconst grid = vert\n    .grid(500, 400)\n    .cols({ count: 1 }) // just 1 col for the sake of simplicity\n    .withCell(() =\u003e {\n        // Cell factory\n        const c = document.createElement(\"div\");\n        return {\n            renderTo(container) {\n                container.appendChild(c);\n            },\n            update(item) {\n                let html = `Item #${item}`;\n                if (item === cursor) {\n                    html = `\u003cstrong\u003e${html}\u003c/strong\u003e`;\n                }\n                c.innerHTML = html;\n            },\n        };\n    })\n    .insertTo(document.body);\n\nfunction syncFocus(animated = true) {\n    grid.refresh();\n    grid.scrollToItem(cursor, animated, \"middle\");\n}\nsyncFocus(false);\n\ndocument.addEventListener(\"keydown\", (e) =\u003e {\n    switch (e.code) {\n        case \"ArrowUp\":\n            e.preventDefault();\n            cursor = Math.max(0, cursor - 1);\n            syncFocus();\n            break;\n        case \"ArrowDown\":\n            e.preventDefault();\n            cursor = Math.min(grid.sizeInfo.rowCount - 1, cursor + 1);\n            syncFocus();\n            break;\n    }\n});\n```\n\nUsing **content overlays**: moving an element along the grid.\n```js\nimport { vert } from \"mega-grid\";\n\nconst grid = vert\n    .grid(500, 400)\n    .cols({ count: 1 }) // just 1 col for the sake of simplicity\n    .withCell(...)\n    .insertTo(document.body);\n\nconst sizeInfo = grid.sizeInfo;\nconst itemSize = sizeInfo.itemSize;\n\nconst focus = document.createElement(\"div\");\nfocus.style.cssText = `\n    border: 3px solid blue;\n    position: absolute;\n    width: ${itemSize.width - 6}px;\n    height: ${itemSize.height - 6}px;\n    top: ${sizeInfo.contentInset.top}px;\n    z-index: 1;\n`;\ngrid.addContentOverlay(focus);\n\nlet cursor = 0;\nfunction syncFocus(animated = true) {\n    const left = grid.originOfItem(cursor).x;\n    focus.style.left = left + \"px\";\n    grid.scrollToItem(cursor, animated, \"middle\");\n}\nsyncFocus(false);\n\ndocument.addEventListener(\"keydown\", (e) =\u003e {\n    switch (e.code) {\n        case \"ArrowUp\":\n            e.preventDefault();\n            cursor = Math.max(0, cursor - 1);\n            syncFocus();\n            break;\n        case \"ArrowDown\":\n            e.preventDefault();\n            cursor = Math.min(sizeInfo.rowCount - 1, cursor + 1);\n            syncFocus();\n            break;\n    }\n});\n```\n\n## Infinite Scroll\n\nYou can achieve an infinite scroll behavior by updating grid's item count via the `setItemCount` method.\n\nThis [example](https://github.com/apleshkov/mega-grid/tree/main/examples/infinite) loads next page when reaches the bottom edge of the scrollable area:\n\u003cimg src=\"https://github.com/apleshkov/mega-grid/blob/main/examples/infinite/demo.gif\" width=\"520\" height=\"408\" alt=\"Infinite Scroll Demo\" /\u003e\n\n## Resizing\n\nIt's possible to update grid's view size via the `setViewSize` method.\n\nEvery sizing strategy reflects that change in a different way:\n* column count and spacing are updated for **constant item size** (both vertical \u0026 horizontal)\n* cell width is updated for **constant column count** (vertical only)\n* cell height is updated for **constant row count** (horizontal only)\n\nYou can find an example of resizing vertical grid and contant item sizes [here](https://github.com/apleshkov/mega-grid/tree/main/examples/resizing):\n\u003cimg src=\"https://github.com/apleshkov/mega-grid/blob/main/examples/resizing/demo.gif\" width=\"688\" height=\"552\" alt=\"Resizing Demo\" /\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapleshkov%2Fmega-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapleshkov%2Fmega-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapleshkov%2Fmega-grid/lists"}