{"id":13455667,"url":"https://github.com/glideapps/glide-data-grid","last_synced_at":"2025-05-13T15:03:08.177Z","repository":{"id":36968658,"uuid":"307905007","full_name":"glideapps/glide-data-grid","owner":"glideapps","description":"🚀 Glide Data Grid is a no compromise, outrageously react fast data grid with rich rendering, first class accessibility, and full TypeScript support.","archived":false,"fork":false,"pushed_at":"2025-03-18T20:27:21.000Z","size":72544,"stargazers_count":4360,"open_issues_count":120,"forks_count":333,"subscribers_count":41,"default_branch":"main","last_synced_at":"2025-05-05T22:39:03.340Z","etag":null,"topics":["accessible","data","datagrid","grid","javascript","react","reactjs","table","typescript"],"latest_commit_sha":null,"homepage":"https://grid.glideapps.com","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/glideapps.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-10-28T04:19:29.000Z","updated_at":"2025-05-05T19:52:07.000Z","dependencies_parsed_at":"2023-09-28T22:23:39.503Z","dependency_job_id":"1d1605df-406c-43d4-af78-d296b8cdd1d3","html_url":"https://github.com/glideapps/glide-data-grid","commit_stats":{"total_commits":586,"total_committers":46,"mean_commits":12.73913043478261,"dds":0.5938566552901023,"last_synced_commit":"5983dcabd2fb55b675009813709752008da6d424"},"previous_names":["glideapps/glide-data-grid","quicktype/glide-data-grid"],"tags_count":244,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glideapps%2Fglide-data-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glideapps%2Fglide-data-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glideapps%2Fglide-data-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glideapps%2Fglide-data-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glideapps","download_url":"https://codeload.github.com/glideapps/glide-data-grid/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253968274,"owners_count":21992253,"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":["accessible","data","datagrid","grid","javascript","react","reactjs","table","typescript"],"created_at":"2024-07-31T08:01:09.007Z","updated_at":"2025-05-13T15:03:08.125Z","avatar_url":"https://github.com/glideapps.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/glideapps/glide-data-grid/master/media/icon.png\" width=\"224px\"/\u003e\u003cbr/\u003e\n  \u003cb\u003eGlide Data Grid\u003c/b\u003e\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003eA canvas-based data grid, supporting \u003cb\u003emillions\u003c/b\u003e of rows, \u003cb\u003erapid\u003c/b\u003e updating, and \u003cb\u003enative scrolling\u003c/b\u003e.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eBuilt as the basis for the \u003ca href=\"https://www.glideapps.com/data-editor\" target=\"_blank\"\u003eGlide Data Editor\u003c/a\u003e. \u003ca href=\"https://www.glideapps.com/jobs#open-positions\" target=\"_blank\"\u003eWe're hiring\u003c/a\u003e.\u003c/p\u003e\n\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/glideapps/glide-data-grid/master/media/data-grid-dark.png\"\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/glideapps/glide-data-grid/master/media/data-grid.png\"\u003e\n  \u003cimg alt=\"Glide Data Grid with sample data\" src=\"https://raw.githubusercontent.com/glideapps/glide-data-grid/master/media/data-grid.png\"\u003e\n\u003c/picture\u003e\n\n[![Version](https://img.shields.io/npm/v/@glideapps/glide-data-grid?color=blue\u0026label=latest\u0026style=for-the-badge)](https://github.com/glideapps/glide-data-grid/releases)\n[![React 16+](https://img.shields.io/badge/React-16+-00ADD8?style=for-the-badge\u0026logo=react)](https://reactjs.org)\n[![Code Coverage](https://img.shields.io/coverallsCoverage/github/glideapps/glide-data-grid?color=457aba\u0026label=Cover\u0026style=for-the-badge)](https://coveralls.io/github/glideapps/glide-data-grid)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@glideapps/glide-data-grid?color=success\u0026label=bundle\u0026style=for-the-badge)](https://bundlephobia.com/package/@glideapps/glide-data-grid)\n[![License](https://img.shields.io/github/license/glideapps/glide-data-grid?color=red\u0026style=for-the-badge)](https://github.com/glideapps/glide-data-grid/blob/main/LICENSE)\n[![Made By Glide](https://img.shields.io/badge/❤_Made_by-Glide-11CCE5?style=for-the-badge\u0026logo=none)](https://www.glideapps.com/jobs)\n\n# 👩‍💻 Demo and features\n\nLots of fun examples are in our [Storybook](https://glideapps.github.io/glide-data-grid).\n\nYou can also visit our [main site](https://grid.glideapps.com).\n\n## Features\n\n-   **It scales to millions of rows**. Cells are rendered lazily on demand for memory efficiency.\n-   **Scrolling is extremely fast**. Native scrolling keeps everything buttery smooth.\n-   **Supports multiple types of cells**. Numbers, text, markdown, bubble, image, drilldown, uri\n-   **Fully Free \u0026 Open Source**. [MIT licensed](LICENSE), so you can use Grid in commercial projects.\n-   **Editing is built in**.\n-   **Resizable and movable columns**.\n-   **Variable sized rows**.\n-   **Merged cells**.\n-   **Single and multi-select rows, cells, and columns**.\n-   **Cell rendering can be fully customized**.\n\n# ⚡ Quick Start\n\nFirst make sure you are using React 16 or greater. Then install the data grid:\n\n```shell\nnpm i @glideapps/glide-data-grid\n```\n\nYou may also need to install the peer dependencies if you don't have them already:\n\n```shell\nnpm i lodash marked react-responsive-carousel\n```\n\nCreate a new `DataEditor` wherever you need to display lots and lots of data\n\n```tsx\n\u003cDataEditor getCellContent={getData} columns={columns} rows={numRows} /\u003e\n```\n\nDon't forget to import mandatory CSS\n\n```ts\nimport \"@glideapps/glide-data-grid/dist/index.css\";\n```\n\nMaking your columns is easy\n\n```ts\n// Grid columns may also provide icon, overlayIcon, menu, style, and theme overrides\nconst columns: GridColumn[] = [\n    { title: \"First Name\", width: 100 },\n    { title: \"Last Name\", width: 100 },\n];\n```\n\nLast provide data to the grid\n\n```ts\n// If fetching data is slow you can use the DataEditor ref to send updates for cells\n// once data is loaded.\nfunction getData([col, row]: Item): GridCell {\n    const person = data[row];\n\n    if (col === 0) {\n        return {\n            kind: GridCellKind.Text,\n            data: person.firstName,\n            allowOverlay: false,\n            displayData: person.firstName,\n        };\n    } else if (col === 1) {\n        return {\n            kind: GridCellKind.Text,\n            data: person.lastName,\n            allowOverlay: false,\n            displayData: person.lastName,\n        };\n    } else {\n        throw new Error();\n    }\n}\n```\n\nYou can [edit this example live](https://codesandbox.io/s/glide-data-grid-template-ydvnnk) on CodeSandbox\n\n## Full API documentation\n\nThe full [API documentation is on the main site](https://docs.grid.glideapps.com/)\n\n# 📒 FAQ\n\n**Nothing shows up!**\n\nPlease read the [Prerequisites section in the docs](packages/core/API.md).\n\n**It crashes when I try to edit a cell!**\n\nPlease read the [Prerequisites section in the docs](packages/core/API.md).\n\n**Does it work with screen readers and other a11y tools?**\n\nYes. Unfortunately none of the primary developers are accessibility users so there are likely flaws in the implementation we are not aware of. Bug reports welcome!\n\n**Does it support my data source?**\n\nYes.\n\nData Grid is agnostic about the way you load/store/generate/mutate your data. What it requires is that you tell it which columns you have, how many rows, and to give it a function it can call to get the data for a cell in a specific row and column.\n\n**Does it do sorting, searching, and filtering?**\n\nSearch is included. You provide the trigger, we do the search. [Example](https://glideapps.github.io/glide-data-grid/?path=/story/glide-data-grid-docs--search) in our storybook.\n\nFiltering and sorting are something you would have to implement with your data source. There are hooks for adding column header menus if you want that.\n\nThe reason we don't add filtering/sorting in by default is that these are usually very application-specific, and can often also be implemented more efficiently in the data source, via a database query, for example.\n\n**Can it do frozen columns?**\n\nYes!\n\n**Can I render my own cells?**\n\nYes, but the renderer has to use HTML Canvas. [Simple example](https://glideapps.github.io/glide-data-grid/?path=/story/glide-data-grid-dataeditor-demos--draw-custom-cells) in our Storybook.\n\n**Why does Data Grid use HTML Canvas?**\n\nOriginally we had implemented our Grid using virtualized rendering. We virtualized both in the horizontal and vertical direction using [react-virtualized](https://github.com/bvaughn/react-virtualized). The problem is simply scrolling performance. Once you need to load/unload hundreds of DOM elements per frame nothing can save you.\n\nThere are some hacks you can do like setting timers and entering into a \"low fidelity\" rendering mode where you only render a single element per cell. This works okay until you want to show hundreds of cells and you are right back to choppy scrolling. It also doesn't really look or feel great.\n\n**I want to use this with Next.js / Vercel, but I'm getting weird errors**\n\nThe easiest way to use the grid with Next is to create a component which wraps up your grid and then import it as a dynamic.\n\nhome.tsx\n\n```tsx\nimport type { NextPage } from \"next\";\nimport dynamic from \"next/dynamic\";\nimport styles from \"../styles/Home.module.css\";\n\nconst Grid = dynamic(\n    () =\u003e {\n        return import(\"../components/Grid\");\n    },\n    { ssr: false }\n);\n\nexport const Home: NextPage = () =\u003e {\n    return (\n        \u003cdiv className={styles.container}\u003e\n            \u003cmain className={styles.main}\u003e\n                \u003ch1 className={styles.title}\u003eHi\u003c/h1\u003e\n                \u003cGrid /\u003e\n            \u003c/main\u003e\n        \u003c/div\u003e\n    );\n};\n```\n\ngrid.tsx\n\n```tsx\nimport React from \"react\";\nimport DataEditor from \"@glideapps/glide-data-grid\";\n\nexport default function Grid() {\n    return \u003cDataEditor {...args} /\u003e;\n}\n```\n","funding_links":[],"categories":["TypeScript","Data Tables \u0026 Grids"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglideapps%2Fglide-data-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglideapps%2Fglide-data-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglideapps%2Fglide-data-grid/lists"}