{"id":16298981,"url":"https://github.com/ghiscoding/slickgrid-react","last_synced_at":"2025-05-05T16:45:51.220Z","repository":{"id":38019264,"uuid":"408027455","full_name":"ghiscoding/slickgrid-react","owner":"ghiscoding","description":"Slickgrid-React is a wrapper of the lightning fast \u0026 customizable SlickGrid datagrid, it also includes multiple Styling Themes","archived":false,"fork":false,"pushed_at":"2025-04-26T21:19:32.000Z","size":33681,"stargazers_count":39,"open_issues_count":1,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-26T21:24:39.486Z","etag":null,"topics":["datagrid","datatable","graphql","odata","reactjs","slickgrid","treeview","typescript"],"latest_commit_sha":null,"homepage":"https://ghiscoding.github.io/slickgrid-react/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ghiscoding.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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},"funding":{"github":"ghiscoding","patreon":null,"open_collective":null,"ko_fi":"ghiscoding","tidelift":null,"custom":null}},"created_at":"2021-09-19T04:05:04.000Z","updated_at":"2025-04-26T20:18:23.000Z","dependencies_parsed_at":"2022-09-14T00:50:13.552Z","dependency_job_id":"5b906fe4-7a7e-46ed-8e91-bda632ad0592","html_url":"https://github.com/ghiscoding/slickgrid-react","commit_stats":null,"previous_names":[],"tags_count":82,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghiscoding%2Fslickgrid-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghiscoding%2Fslickgrid-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghiscoding%2Fslickgrid-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghiscoding%2Fslickgrid-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ghiscoding","download_url":"https://codeload.github.com/ghiscoding/slickgrid-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252535673,"owners_count":21763988,"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":["datagrid","datatable","graphql","odata","reactjs","slickgrid","treeview","typescript"],"created_at":"2024-10-10T20:46:10.820Z","updated_at":"2025-05-05T16:45:51.212Z","avatar_url":"https://github.com/ghiscoding.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ghiscoding","https://ko-fi.com/ghiscoding","https://ko-fi.com/ghiscoding'"],"categories":[],"sub_categories":[],"readme":"# Slickgrid-React\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)\n[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg?logo=cypress)](https://www.cypress.io/)\n[![NPM downloads](https://img.shields.io/npm/dy/slickgrid-react)](https://npmjs.org/package/slickgrid-react)\n[![npm](https://img.shields.io/npm/v/slickgrid-react.svg?logo=npm\u0026logoColor=fff\u0026label=npm)](https://www.npmjs.com/package/slickgrid-react)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/slickgrid-react?color=success\u0026label=gzip)](https://bundlephobia.com/result?p=slickgrid-react)\n[![Actions Status](https://github.com/ghiscoding/slickgrid-react/workflows/CI%20Build/badge.svg)](https://github.com/ghiscoding/slickgrid-react/actions)\n\n## Structure Change (happening soon)\n\u003e [!NOTE]\n\u003e Please note that Angular-Slickgrid (and all other supported frameworks) will soon be moved under the [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal) project.\n\u003e This will happen in the next major version, which is expected to happen in May 2025. The installation will remain the same `npm install slickgrid-react`, it's just the project that will be moved into a more central location (much easier to maintain).\n\n### Brief introduction\nOne of the best JavasSript data grid [SlickGrid](https://github.com/mleibman/SlickGrid), which was originally developed by @mleibman, is now available to the React world. SlickGrid beats most other data grids in terms of features, customizability \u0026 performance (running smoothly with even a million rows). Slickgrid-React is a wrapper on top of [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal/) (which is a dependency), in the early beginning we used the `6pac/SlickGrid` fork but that was dropped in \u003e=[v4.0](https://github.com/ghiscoding/slickgrid-react/releases/tag/v4.0.2) since Slickgrid-Universal is now a standalone project. SlickGrid was also recently rewritten with browser native code (no more ~jQuery~ 🎉).\n\n## Documentation\n📘 [Documentation](https://ghiscoding.gitbook.io/slickgrid-react/getting-started/quick-start) website powered by GitBook  for version 4+ (_... or use the [Wikis](https://github.com/ghiscoding/Slickgrid-React/wiki) for older versions_).\n\n## Installation\nAvailable in Stackblitz (Codeflow) below, this can also be used to provide an issue repro.\n\n[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https:///pr.new/ghiscoding/slickgrid-react)\n\nRefer to the **[Docs - Quick Start](https://ghiscoding.gitbook.io/slickgrid-react/getting-started/quick-start)** and/or clone the [Slickgrid-React-Demos](https://github.com/ghiscoding/slickgrid-react-demos) repository. Please consult all documentation before opening new issues, also consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest\u0026q=slickgrid) unless you think there's a bug with the library.\n\n### NPM Package\n[slickgrid-react on NPM](https://www.npmjs.com/package/slickgrid-react)\n\n#### Install it\n\n```sh\nnpm install slickgrid-react\n```\n\n#### Basic Usage\n\n```tsx\nimport { type Column, type GridOption, SlickgridReact } from 'slickgrid-react';\n\nexport default function Example() {\n  const [columns, setColumns] = useState\u003cColumn[]\u003e();\n  const [options, setOptions] = useState\u003cGridOption\u003e();\n  const [dataset, setDataset] = useState\u003cany[]\u003e(getData());\n\n  useEffect(() =\u003e defineGrid());\n\n  function defineGrid() {\n    setColumns([\n      { id: 'firstName', name: 'First Name', field: 'firstName', sortable: true },\n      { id: 'lastName', name: 'Last Name', field: 'lastName', sortable: true },\n      { id: 'age', name: 'Age', field: 'age', type: 'number', sortable: true },\n    ]);\n\n    setOptions({ /*...*/ }); // optional grid options\n  }\n\n  function getData() {\n    return [\n      { id: 1, firstName: 'John', lastName: 'Doe', age: 20 },\n      { id: 2, firstName: 'Jane', lastName: 'Smith', age: 21 },\n    ];\n  }\n\n  return !options ? null : (\n    \u003cSlickgridReact gridId=\"grid1\"\n        columnDefinitions={columns}\n        gridOptions={options}\n        dataset={dataset}\n     /\u003e\n  );\n}\n```\n\n### Troubleshooting\n\nThis project **does not** work well with `React.StrictMode`, so please make sure to disable it to avoid getting mad at the library :P \n\n### Versions Compatibility\n\n\u003e **Note** please be aware that only the latest major version of Slickgrid-React will be supported and receive bug fixes (it's already a lot of work to maintain for a single developer like me).\n\n| Slickgrid-React | React version | Migration Guide | Notes |\n|-------------------|-----------------|-----------------|------|\n| 5.x               | React 18+       | [Migration 5.x](https://ghiscoding.gitbook.io/slickgrid-react/migrations/migration-to-5.x)     | modern UI / Dark Mode, requires Slickgrid-Universal [5.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v5.0.0) |\n| 4.x               |        | [Migration 4.x](https://ghiscoding.gitbook.io/slickgrid-react/migrations/migration-to-4.x)     | merge SlickGrid into Slickgrid-Universal, requires Slickgrid-Universal [4.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v4.0.2) |\n| 3.x               |        | [Migration 3.x](https://github.com/ghiscoding/slickgrid-react/wiki/Migration-to-3.x)     | removal of jQuery (now uses browser native code), requires Slickgrid-Universal [3.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v3.0.0) |\n| 2.x               | React 18+       | [Migration 2.x](https://github.com/ghiscoding/slickgrid-react/wiki/Migration-to-2.x)     | removal of jQueryUI, requires Slickgrid-Universal [2.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v2.0.0) version |\n\n### Styling Themes\n\nMultiple styling themes are available\n- Default (UI agnostic)\n- Bootstrap (see all Slickgrid-React [live demos](https://ghiscoding.github.io/slickgrid-react/))\n- Material (see [Slickgrid-Universal](https://ghiscoding.github.io/slickgrid-universal/#/example07))\n- Salesforce (see [Slickgrid-Universal](https://ghiscoding.github.io/slickgrid-universal/#/example16))\n\nAlso note that all of these themes also have **Dark Theme** equivalent and even though Bootstrap is often used for live demos, it does work as well with any other UI framework like Bulma, Material, ...\n\n### Live Demo page\n`Slickgrid-React` works with all `Bootstrap` versions, you can see a demo of each one below. It also works well with any other frameworks like Material or Bulma and there are also couple of extra styling themes based on Material \u0026 Salesforce which are also available. You can also use different SVG icons, you may want to look at the [Docs - SVG Icons](https://ghiscoding.gitbook.io/slickgrid-react/styling/svg-icons)\n- [Bootstrap 5 demo](https://ghiscoding.github.io/slickgrid-react-demos/) / [examples repo](https://github.com/ghiscoding/slickgrid-react-demos/tree/main/bootstrap5-i18n-demo)\n\n#### Working Demos\nFor a complete set of working demos (40+ examples), we strongly suggest you to clone the [Slickgrid-React Demos](https://github.com/ghiscoding/slickgrid-react-demos) repository (instructions are provided inside it). The repo provides multiple examples and are updated every time a new release is out, so it is updated frequently and is used as the GitHub live demo page.\n\n## License\n[MIT License](LICENSE)\n\n## Latest News \u0026 Releases\nCheck out the [Releases](https://github.com/ghiscoding/slickgrid-react/releases) section for all latest News \u0026 Releases.\n\n### Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)\nSlickgrid-Universal has **100%** Unit Test Coverage and all Slickgrid-React Examples are tested with [Cypress](https://www.cypress.io/) as E2E tests.\n\n### Like it? ⭐ it\nYou like **Slickgrid-React**? Be sure to upvote ⭐, and perhaps support me with caffeine [☕](https://ko-fi.com/ghiscoding) or GitHub sponsoring and feel free to contribute. 👷👷‍♀️\n\n\u003ca href='https://ko-fi.com/ghiscoding' target='_blank'\u003e\u003cimg height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi3.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /\u003e\u003c/a\u003e\n\n## Sponsors\n\nThanks to all my sponsors!\n\n\u003cdiv\u003e\n  \u003cspan\u003e\n    \u003ca href=\"https://github.com/wundergraph\" class=\"Link\" title=\"Wundergraph\" target=\"_blank\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/64281914\" width=\"50\" height=\"50\" valign=\"middle\" /\u003e\u003c/a\u003e\n  \u003c/span\u003e\n  \u0026nbsp;\n  \u003cspan\u003e\n    \u003ca href=\"https://github.com/johnsoncodehk\" class=\"Link\" title=\"johnsoncodehk (Volar)\" target=\"_blank\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/16279759\" width=\"50\" height=\"50\" valign=\"middle\" /\u003e\u003c/a\u003e\n  \u003c/span\u003e\n   \u0026nbsp;\n  \u003cspan\u003e\n    \u003ca href=\"https://github.com/kevinburkett\" class=\"Link\" title=\"kevinburkett\" target=\"_blank\"\u003e\u003cimg class=\"circle avatar-user\" src=\"https://avatars.githubusercontent.com/u/48218815?s=52\u0026amp;v=4\" width=\"45\" height=\"45\" valign=\"middle\" /\u003e\u003c/a\u003e\n  \u003c/span\u003e\n  \u0026nbsp;\n  \u003cspan\u003e\n    \u003ca href=\"https://github.com/anton-gustafsson\" class=\"Link\" title=\"anton-gustafsson\" target=\"_blank\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/22906905?s=52\u0026v=4\" width=\"50\" height=\"50\" valign=\"middle\" /\u003e\u003c/a\u003e\n  \u003c/span\u003e\n  \u0026nbsp;\n  \u003cspan\u003e\n    \u003ca href=\"https://github.com/gibson552\" class=\"Link\" title=\"gibson552\" target=\"_blank\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/84058359?s=52\u0026v=4\" width=\"50\" height=\"50\" valign=\"middle\" /\u003e\u003c/a\u003e\n  \u003c/span\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghiscoding%2Fslickgrid-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fghiscoding%2Fslickgrid-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghiscoding%2Fslickgrid-react/lists"}