# 
Slickgrid-React
[](https://opensource.org/licenses/MIT)
[](http://www.typescriptlang.org/)
[](https://npmjs.org/package/slickgrid-react)
[](https://www.npmjs.com/package/slickgrid-react)
[](https://github.com/ghiscoding/slickgrid-universal/actions/workflows/test-react.yml)
### Brief introduction
SlickGrid-React is a custom component created specifically for [React](https://react.dev/) framework, it is a wrapper on top of Slickgrid-Universal library which contains the core functionalities. Slickgrid-Universal is written with TypeScript in browser native code, it is framework agnostic and is a monorepo that includes all Editors, Filters, Extensions and Services related to SlickGrid usage with also a few optional packages (like GraphQL, OData, Export to Excel, ...).
## 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.
| Stackblitz | Description |
| ---------- | ----------- |
| [](https://stackblitz.com/github/ghiscoding/slickgrid-react-demos) | with I18N Translate |
| [](https://stackblitz.com/github/ghiscoding/slickgrid-react-demos/tree/main/single-locale-without-i18n) | Single Locale (_without i18n_) |
| [](https://stackblitz.com/github/ghiscoding/slickgrid-react-demos/tree/main/react-fluent-ui) | React Fluent UI Theme |
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)
## License
[MIT License](../../LICENSE)
#### Install it
```sh
npm install slickgrid-react
```
#### Basic Usage
```tsx
import { type Column, type GridOption, SlickgridReact } from 'slickgrid-react';
interface User {
firstName: string;
lastName: string;
age: number;
}
export default function Example() {
const [columns, setColumns] = useState(); // it could also be `Column[]`
const [options, setOptions] = useState();
const [dataset, setDataset] = useState([]);
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
setData([
{ id: 1, firstName: 'John', lastName: 'Doe', age: 20 },
{ id: 2, firstName: 'Jane', lastName: 'Smith', age: 21 },
]);
}
return !options ? null : (
);
}
```
### Troubleshooting
> [!WARNING]
> 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.
| Slickgrid-React | React | Migration Guide | Notes | Date |
|:---------------:| --------- | --------------- | ----- | ---- |
| 10.x | React 19 | [Migration 10.x](https://ghiscoding.gitbook.io/slickgrid-react/migrations/migration-to-10.x) | modernization and accessibility, requires Slickgrid-Universal [10.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v10.0.0) | 2026-03-02 |
| 9.x | **React 19** | [Migration 9.x](https://ghiscoding.gitbook.io/slickgrid-react/migrations/migration-to-9.x) | ESM-Only, requires Slickgrid-Universal [9.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v9.0.0) | 2025-05-10 |
| 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) | 2024-05-10 |
| 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) | 2023-12-15 |
| 3.x | | [Migration 3.x](https://ghiscoding.gitbook.io/slickgrid-react/migrations/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) | 2023-05-29 |
| 2.x | React 18 | [Migration 2.x](https://ghiscoding.gitbook.io/slickgrid-react/migrations/migration-to-2.x) | removal of jQueryUI, requires Slickgrid-Universal [2.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v2.0.0) | 2022-12-08 |
### Styling Themes
Multiple styling themes are available
- Default (UI agnostic)
- Bootstrap (see all Slickgrid-React [live demos](https://ghiscoding.github.io/slickgrid-react-demos/))
- 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.
## Latest News & Releases
Check out the [Releases](https://github.com/ghiscoding/slickgrid-universal/releases) section for all latest News & Releases.
### Tested with [Vitest](https://vitest.dev/) (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. 👷👷♀️
