https://github.com/ghiscoding/slickgrid-react
Slickgrid-React is a wrapper of the lightning fast & customizable SlickGrid datagrid, it also includes multiple Styling Themes
https://github.com/ghiscoding/slickgrid-react
datagrid datatable graphql odata reactjs slickgrid treeview typescript
Last synced: 7 months ago
JSON representation
Slickgrid-React is a wrapper of the lightning fast & customizable SlickGrid datagrid, it also includes multiple Styling Themes
- Host: GitHub
- URL: https://github.com/ghiscoding/slickgrid-react
- Owner: ghiscoding
- License: other
- Created: 2021-09-19T04:05:04.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2025-04-26T21:19:32.000Z (8 months ago)
- Last Synced: 2025-04-26T21:24:39.486Z (8 months ago)
- Topics: datagrid, datatable, graphql, odata, reactjs, slickgrid, treeview, typescript
- Language: TypeScript
- Homepage: https://ghiscoding.github.io/slickgrid-react/
- Size: 32.1 MB
- Stars: 39
- Watchers: 2
- Forks: 14
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Slickgrid-React
[](https://opensource.org/licenses/MIT)
[](http://www.typescriptlang.org/)
[](https://www.cypress.io/)
[](https://npmjs.org/package/slickgrid-react)
[](https://www.npmjs.com/package/slickgrid-react)
[](https://bundlephobia.com/result?p=slickgrid-react)
[](https://github.com/ghiscoding/slickgrid-react/actions)
## Structure Change (happening soon)
> [!NOTE]
> 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.
> 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).
### Brief introduction
One 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 & 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 >=[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~ 🎉).
## Documentation
📘 [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_).
## Installation
Available in Stackblitz (Codeflow) below, this can also be used to provide an issue repro.
[](https:///pr.new/ghiscoding/slickgrid-react)
Refer 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&q=slickgrid) unless you think there's a bug with the library.
### NPM Package
[slickgrid-react on NPM](https://www.npmjs.com/package/slickgrid-react)
#### Install it
```sh
npm install slickgrid-react
```
#### Basic Usage
```tsx
import { type Column, type GridOption, SlickgridReact } from 'slickgrid-react';
export default function Example() {
const [columns, setColumns] = useState();
const [options, setOptions] = useState();
const [dataset, setDataset] = useState(getData());
useEffect(() => defineGrid());
function defineGrid() {
setColumns([
{ id: 'firstName', name: 'First Name', field: 'firstName', sortable: true },
{ id: 'lastName', name: 'Last Name', field: 'lastName', sortable: true },
{ id: 'age', name: 'Age', field: 'age', type: 'number', sortable: true },
]);
setOptions({ /*...*/ }); // optional grid options
}
function getData() {
return [
{ id: 1, firstName: 'John', lastName: 'Doe', age: 20 },
{ id: 2, firstName: 'Jane', lastName: 'Smith', age: 21 },
];
}
return !options ? null : (
);
}
```
### Troubleshooting
This project **does not** work well with `React.StrictMode`, so please make sure to disable it to avoid getting mad at the library :P
### Versions Compatibility
> **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).
| Slickgrid-React | React version | Migration Guide | Notes |
|-------------------|-----------------|-----------------|------|
| 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) |
| 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) |
| 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) |
| 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 |
### Styling Themes
Multiple styling themes are available
- Default (UI agnostic)
- Bootstrap (see all Slickgrid-React [live demos](https://ghiscoding.github.io/slickgrid-react/))
- Material (see [Slickgrid-Universal](https://ghiscoding.github.io/slickgrid-universal/#/example07))
- Salesforce (see [Slickgrid-Universal](https://ghiscoding.github.io/slickgrid-universal/#/example16))
Also 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, ...
### Live Demo page
`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 & 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)
- [Bootstrap 5 demo](https://ghiscoding.github.io/slickgrid-react-demos/) / [examples repo](https://github.com/ghiscoding/slickgrid-react-demos/tree/main/bootstrap5-i18n-demo)
#### Working Demos
For 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.
## License
[MIT License](LICENSE)
## Latest News & Releases
Check out the [Releases](https://github.com/ghiscoding/slickgrid-react/releases) section for all latest News & Releases.
### Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
Slickgrid-Universal has **100%** Unit Test Coverage and all Slickgrid-React Examples are tested with [Cypress](https://www.cypress.io/) as E2E tests.
### Like it? ⭐ it
You 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. 👷👷♀️
## Sponsors
Thanks to all my sponsors!
