slickgrid-react

Slickgrid-React

Upcoming Release (stay tuned) 📣

An offical supported release 2.x is about to land very, very soon (in coming days), checkout the Releases and Discussions sections for an update on the subject. You can already see and try out the new Live Demo of the upcoming version.

Brief introduction

One of the best javascript datagrid SlickGrid which was originally developed by @mleibman is now available to React. I have used a few datagrids and SlickGrid beats most of them in terms of functionalities and performance (it can easily deal with even a million row). We will be using the 6pac/SlickGrid fork, this is the most active fork since the original @mleibman fork was closed some time ago by his author for personal reasons. Also worth to know, that I also contributed a lot to the 6pac/SlickGrid fork for the benefit of Slickgrid-React.

Installation

Refer to the Wiki - HOWTO Step by Step and/or clone the Slickgrid-React-Demos repository. Please consult all Wikis 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.

License

MIT License

NPM Package

slickgrid-react on NPM

Live Demo page

Slickgrid-React works with all Bootstrap versions and/or any other UI framework you wish to use (Bulma, Material Design, ...), you can see a demo of each one below. There are also 2 new styling Themes, Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the Wiki - SVG Icons

• Bootstrap 5 demo

Working Demos

For a complete working set of working demos, you strongly suggest that you clone the Slickgrid-React Demos repository (instructions are provided in the demo repo). This repo provides multiple samples and it is also worth to know that these demos are updated frequently.

Like it? :star: it

You like Slickgrid-React? Be sure to upvote :star:, and perhaps support me with cafeine :coffee: and feel free to contribute. 👷👷‍♀️

Latest News & Releases

Check out the Releases section for all latest News & Releases.

Fully Tested with Jest (Unit Tests) - Cypress (E2E Tests)

Slickgrid-React and Slickgrid-Universal both have 100% Unit Test Coverage, we are talking about +15,000 lines of code (+3,750 unit tests) that are fully tested with Jest. On the UI side, all Slickgrid-React Examples are tested with Cypress, there are over +500 Cypress E2E tests.

Installation

Refer to the Wiki - HOWTO Step by Step. Please don't open any issue unless you have followed these steps (from the Wiki), and if any of the steps are incorrect or confusing, then please let me know.

NOTE: if you have any question, please consider asking installation and/or general questions on Stack Overflow

Wiki / Documentation

The Wiki is where all the documentation and instructions will go, so please consult the slickgrid-react - Wiki before opening any issues. The Wiki - HOWTO is a great place to start with. You can also take a look at the Demo page, it includes sample for most of the features and it keeps growing (so you might want to consult it whenever a new version comes out).

Main features

You can see some screenshots below and the instructions down below and if that is not enough for you to decide, head over to the Wiki - Main Features.

Missing features

What if Slickgrid-React is missing feature(s) compare to the original core library 6pac/SlickGrid?

Fear not, and just simply reference the SlickGrid and DataView objects, just like in the core lib, those are exposed through Event Emitters. For more info continue reading on Wiki - SlickGrid & DataView objects and Wiki - Grid & DataView Events

Screenshots

Screenshots from the demo app with the Bootstrap theme.

Note that the styling changed a bit, the best is to simply head over to the Live Demo page.

Slickgrid example with Formatters (last column shown is a custom Formatter)

You can also see the Grid Menu opened (aka hambuger menu)

Filters and Multi-Column Sort

Inline Editing

Pinned (aka frozen) Columns/Rows

Draggable Grouping & Aggregators

Slickgrid Example with Server Side (Filter/Sort/Pagination)

Comes with OData & GraphQL support (you can implement custom ones too)

Composite Editor Modal Windows

Changelog

2.0.0 (2022-12-08)

Bug Fixes

• add missing grid container for HeaderMenu plugin to work correctly (ca9887e)
• comp: switch to reusable Slickgrid-Universal Pagination (549862f)
• Custom Events not working out of the box in React (1a16ae3)
• few more small examples fixes (4ffc694)
• fixing few small issues in Examples after adding Cypress E2E tests (217bf9d)
• Grid Presets should load all presets including pinning (3253148)
• most Examples should now work with Custom Events and i18n (d3100b2)
• pinning: cols reorder & freezing shouldn't affect order (#12) (b6c806b)
• sorting: update Slickgrid-Universal, fixes date sort shuffling (#21) (2d35508)
• ui: use correct grid container on Resizer to fix Pagination (b00dc98)

Features

• add locale support via react-i18next (c7c86d0)
• add new Example 33 (tooltip) and 34 (trading platform) (aa4ad8b)
• add Slots and fix issue to hide header row when provided (d9bcded)
• add Tree Data grid functionality (6422ae0)
• core: BREAKING CHANGE replace jQueryUI by SortableJS (e4052d6)
• OData: add $select and $expand query options (631434c)
• upgrade to latest Slickgrid-Universal version 1.x (3a12f0f)