Slickgrid-React

Brief introduction
One of the best JavasSript datagrid SlickGrid, which was originally developed by @mleibman, is now available to React. SlickGrid beats most other datagrids in terms of features, customizability and performance (it can easily deal with even a million row). Slickgrid-React is a wrapper on top of SlickGrid and it requires Slickgrid-Universal dependency since the original one was put on pause by its original author for personal reasons and originally we used the 6pac/SlickGrid
fork but that was dropped in v4.0, so we no longer need external SlickGrid dependencies anymore apart from Slickgrid-Universal since v4.0. Also, SlickGrid was recently refactored to be browser native, which means that jQuery is no longer required in Slickgrid-React v3.0 and higher.
Documentation
📘 Documentation website powered by GitBook.
Installation
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
Live Demo page
Slickgrid-React
works with all Bootstrap
versions, you can see a demo of each one below. There are also extra styling themes for not just Bootstrap but also Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the Docs - SVG Icons
Working Demos
For a complete set of working demos (over 30 examples), we strongly suggest you to clone the Slickgrid-React Demos repository (instructions are provided in the demo repo). The repo provides multiple demos and they are updated every time a new version is out, so it is updated frequently and is also used as the GitHub live demo page.
License
MIT License
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.
Tested with Jest (Unit Tests) - Cypress (E2E Tests)
Slickgrid-Universal has 100% Unit Test Coverage, we are talking about +4,000 unit tests that are fully tested with Jest. On the UI side, all Slickgrid-React Examples are tested with Cypress, there are over +600 Cypress E2E tests.
Installation
Refer to the Docs - Quick Start. Please don't open any issue unless you have followed these steps (from the Docs), 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
Documentation
The Documentation is powered by GitBook and is where you'll find all the documentation and instructions for the lib, so please consult the documentation before opening any new issue. The Docs - Quick Start is a great place to start with.
Main features
You can see some screenshots below and visit the Documentation website.
Missing features
What if Slickgrid-React
is missing feature(s) compare to the original core library 6pac/SlickGrid?
Fear not, you can always reference the SlickGrid
and DataView
instances, just like in the core lib, those are exposed through Events. For more info head over to the Docs - SlickGrid & DataView objects and Docs - Grid & DataView Events
Screenshots
Screenshots from the demo app with the Bootstrap
theme.
Note that the styling might have changed a little, the best is to simply head over to the Live Demo page.
Slickgrid example with Formatters (last column shown is a custom Formatter)

Filters and Multi-Column Sort

Inline Editing

Pinned (aka frozen) Columns/Rows

Draggable Grouping & Aggregators

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

Composite Editor Modal Windows
