{"id":13494752,"url":"https://github.com/nick-keller/react-datasheet-grid","last_synced_at":"2026-04-26T05:00:43.689Z","repository":{"id":37721273,"uuid":"313391773","full_name":"nick-keller/react-datasheet-grid","owner":"nick-keller","description":"An Airtable-like / Excel-like component to create beautiful spreadsheets.","archived":false,"fork":false,"pushed_at":"2026-03-03T14:54:46.000Z","size":7595,"stargazers_count":1987,"open_issues_count":67,"forks_count":207,"subscribers_count":22,"default_branch":"master","last_synced_at":"2026-03-03T16:55:15.509Z","etag":null,"topics":["excel","grid","react","spreadsheet","table"],"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/nick-keller.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2020-11-16T18:27:56.000Z","updated_at":"2026-03-03T14:55:39.000Z","dependencies_parsed_at":"2024-01-16T09:53:10.779Z","dependency_job_id":"abd131ec-5ce3-46e2-be01-eb88738e8af3","html_url":"https://github.com/nick-keller/react-datasheet-grid","commit_stats":{"total_commits":212,"total_committers":18,"mean_commits":"11.777777777777779","dds":"0.19339622641509435","last_synced_commit":"87627f1331313bb97ea5e57c9e68ea64f7ee5c3c"},"previous_names":["equify/react-datasheet-grid"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nick-keller/react-datasheet-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nick-keller%2Freact-datasheet-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nick-keller%2Freact-datasheet-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nick-keller%2Freact-datasheet-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nick-keller%2Freact-datasheet-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nick-keller","download_url":"https://codeload.github.com/nick-keller/react-datasheet-grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nick-keller%2Freact-datasheet-grid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32286271,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T18:29:39.964Z","status":"online","status_checked_at":"2026-04-26T02:00:05.962Z","response_time":129,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":["excel","grid","react","spreadsheet","table"],"created_at":"2024-07-31T19:01:27.780Z","updated_at":"2026-04-26T05:00:43.645Z","avatar_url":"https://github.com/nick-keller.png","language":"TypeScript","readme":"# react-datasheet-grid\n\n![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/nick-keller/react-datasheet-grid/tests.yml?branch=master)\n[![Coveralls](https://img.shields.io/coveralls/github/nick-keller/react-datasheet-grid)](https://coveralls.io/github/nick-keller/react-datasheet-grid)\n[![npm](https://img.shields.io/npm/dm/react-datasheet-grid)](https://www.npmjs.com/package/react-datasheet-grid)\n[![GitHub last commit](https://img.shields.io/github/last-commit/nick-keller/react-datasheet-grid)](https://github.com/nick-keller/react-datasheet-grid)\n![npm bundle size](https://img.shields.io/bundlephobia/min/react-datasheet-grid)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nView [demo and documentation](https://react-datasheet-grid.netlify.app/)\n\nAn Airtable-like / Excel-like component to create beautiful spreadsheets.\n\n![Preview](./images/preview.png)\n\nFeature rich:\n- Dead simple to set up and to use\n- Supports copy / pasting to and from Excel, Google-sheet...\n- Keyboard navigation and shortcuts fully-supported\n- Supports right-clicking and custom context menu\n- Supports dragging corner to expand selection\n- Easy to extend and implement custom widgets\n- Blazing fast, optimized for speed, minimal renders count\n- Smooth animations\n- Virtualized rows and columns, supports hundreds of thousands of rows\n- Extensively customizable, controllable behaviors\n- Built with Typescript\n\n## Install\n\n```bash\nnpm i react-datasheet-grid\n```\n\n## Usage\n\n```tsx\nimport {\n  DataSheetGrid,\n  checkboxColumn,\n  textColumn,\n  keyColumn,\n} from 'react-datasheet-grid'\n\n// Import the style only once in your app!\nimport 'react-datasheet-grid/dist/style.css'\n\nconst Example = () =\u003e {\n  const [ data, setData ] = useState([\n    { active: true, firstName: 'Elon', lastName: 'Musk' },\n    { active: false, firstName: 'Jeff', lastName: 'Bezos' },\n  ])\n\n  const columns = [\n    {\n      ...keyColumn('active', checkboxColumn),\n      title: 'Active',\n    },\n    {\n      ...keyColumn('firstName', textColumn),\n      title: 'First name',\n    },\n    {\n      ...keyColumn('lastName', textColumn),\n      title: 'Last name',\n    },\n  ]\n\n  return (\n    \u003cDataSheetGrid\n      value={data}\n      onChange={setData}\n      columns={columns}\n    /\u003e\n  )\n}\n```\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnick-keller%2Freact-datasheet-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnick-keller%2Freact-datasheet-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnick-keller%2Freact-datasheet-grid/lists"}