slickgrid-react

Slickgrid-React

Brief introduction

SlickGrid-React is a custom component created specifically for React 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 website powered by GitBook for version 4+ (... or use the Wikis for older versions).

Installation

Available in Stackblitz (Codeflow) below, this can also be used to provide an issue repro.

Refer to the Docs - Quick Start and/or clone the Slickgrid-React-Demos repository. Please consult all documentation before opening new issues, also consider asking installation and/or general questions on Stack Overflow unless you think there's a bug with the library.

NPM Package

slickgrid-react on NPM

License

MIT License

Install it

npm install slickgrid-react

Basic Usage

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<Column[]>(); // it could also be `Column<User>[]`
  const [options, setOptions] = useState<GridOption>();
  const [dataset, setDataset] = useState<User[]>(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 : (
    <SlickgridReact gridId="grid1"
        columns={columns}
        options={options}
        dataset={dataset}
     />
  );
}

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 (it's already a lot of work to maintain for a single developer like me).

Slickgrid-React	React version	Migration Guide	Notes
9.x	React 19+	Migration 9.x	ESM-Only, requires Slickgrid-Universal 9.x
5.x	React 18+	Migration 5.x	Modern UI / Dark Mode, requires Slickgrid-Universal 5.x
4.x		Migration 4.x	merge SlickGrid into Slickgrid-Universal, requires Slickgrid-Universal 4.x
3.x		Migration 3.x	removal of jQuery (now uses browser native code), requires Slickgrid-Universal 3.x
2.x	React 18+	Migration 2.x	removal of jQueryUI, requires Slickgrid-Universal 2.x version

Styling Themes

Multiple styling themes are available

• Default (UI agnostic)
• Bootstrap (see all Slickgrid-React live demos)
• Material (see Slickgrid-Universal)
• Salesforce (see Slickgrid-Universal)

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

• Bootstrap 5 demo / examples repo

Working Demos

For a complete set of working demos (40+ examples), we strongly suggest you to clone the 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 section for all latest News & Releases.

Tested with Vitest (Unit Tests) - Cypress (E2E Tests)

Slickgrid-Universal has 100% Unit Test Coverage and all Slickgrid-React Examples are tested with Cypress as E2E tests.

Like it? ⭐ it

You like Slickgrid-React? Be sure to upvote ⭐, and perhaps support me with caffeine ☕ or GitHub sponsoring and feel free to contribute. 👷👷‍♀️

Changelog

9.9.0 (2025-09-20)

Features

• add htmlDecode (true) to ExcelExportOption to HTML Decode data (#2148) (0d6d10c) - by @ghiscoding
• add second css property to RangeDecorator plugin (#2133) (c7bfc16) - by @ghiscoding

Bug Fixes

• add missing grid option to skipFreezeColumnValidation (#2147) (890a76c) - by @ghiscoding
• column header reorder should keep scroll position even frozen grid (#2156) (d0464b0) - by @ghiscoding
• Compound Input Operator w/o SearchVal shouldn't start filtering (#2164) (dd921de) - by @ghiscoding
• deps: update all non-major dependencies (#2126) (3654051) - by @renovate-bot
• deps: update all non-major dependencies (#2151) (36e1b83) - by @renovate-bot
• LongText Editors should always show and also show gray w/disabled (#2141) (7057911) - by @ghiscoding
• make Row Detail plugin work with Grouping (#2165) (af51395) - by @ghiscoding
• never hide Editors.longText in Composite Editor modal (#2144) (43f0318) - by @ghiscoding
• never hide Editors.longText in Composite Editor modal (9a31cf3) - by @ghiscoding
• rollback to previous column freeze when new freeze index is invalid (#2130) (1af82fc) - by @ghiscoding
• Salesforce resize should only recalc when tab or window changed (#2157) (e584b44) - by @ghiscoding
• Salesforce resize should only recalc when window size changed (#2155) (008e52b) - by @ghiscoding
• show an alert to user when trying to freeze wider than viewport (#2129) (077168a) - by @ghiscoding
• validate allowed frozen column only when setting grid options (#2139) (9d74f01) - by @ghiscoding
• validate allowed frozen column or alert when setting option (#2145) (f550a99) - by @ghiscoding
• validate to always have 1 or more column on right freeze section (#2154) (cacfb70) - by @ghiscoding
• vue: Row Detail in Vue shouldn't re-render same html twice (#2166) (94a51c7) - by @ghiscoding