Repository files navigation

📘Documentation website powered by GitBook for version 4.0+ (or use theWikis for older versions)

Live Demo website

Also available in Stackblitz for all available frameworks (seetable below)

One of the best JavaScript data grid named as "SlickGrid", which was originally developed by @mleibman, beats most other data grids in terms of features, customizability & performance (running smoothly with even a million rows).

This is a monorepo project (usingpnpm workspaces andLerna-Lite) which is regrouping a few packages under a single repository. It was originally requiring@6pac/SlickGrid as an external dependency, but that was dropped in v4.0, and it has been a standalone library since then. The main goal of this project is to create a common repo that includes all Editors, Filters, Extensions and Services that could be used by any frameworks (the project is framework agnostic).

If you've used the original SlickGrid in the past, you might be wondering, should I use the@6pac/SlickGrid or Slickgrid-Universal (or any of its wrappers), what are the differences? The main difference is that the originalSlickGrid/@6pac/SlickGrid is like an unassembled IKEA product where it's very bare bone and unassembled, on the other hand Slickgrid-Universal is an all assembled product with batteries included. What that means is that Slickgrid-Universal comes in with many built-in features like Formatters, Editors, Filters, Tree Data, ... which are not available in the original SlickGrid. So in the end SlickGrid (@6pac/SlickGrid) project is much smaller in size because it's very bare bone but you will have to implement many things by yourself (Sorting/Filtering/Editing/...), and if you're looking at creating very basic grids with the smallest footprint possible, then SlickGrid might work for you, otherwise Slickgrid-Universal has a more complete set of features with a bit larger download and installation size.

Side note, I am (@ghiscoding) a maintainer in both projects, which are Slickgrid-Universal as well as the@6pac/SlickGrid (in fact Slickgrid-Universal was originally requiring the@6pac/SlickGrid dependency but that requirement was eventually dropped in v4 and it is now a standalone). The main reason to support both projects is to keep core files in sync as much as possible (SlickGrid, SlickDataView and all plugins). Both projects combined together have a much larger user base and this mean much more stability for both projects, and we also often sync new core & plugin files in both projects as well... and that's it, I hope this makes it clear what the differences are and in case you need more clarity then feel free to open a new Discussion for more details.

Below is a list of reasons as to why this project was created and why it was built as a monorepo project:

1. originally created to remove duplicated code from the first 2 framework wrappers (Angular, Aurelia)
2. it also decoupled many of the Services that are simply not required by every project
   • OData, GraphQL, Export to CSV, Export to Excel, Composite Editor, RxJS, ...
3. and finally it is framework agnostic
   • you can reuse the same grids and logic in many different frameworks, it's easily transportable
   • you can use it in plain JavaScript (ES6) or TypeScript, i.e. we use plain JS (ES6) in our Salesforce environment with LWC (Lightning Web Component)

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

You could star ⭐ the project and/or support me with caffeine via GitHubsponsorship or the Ko-Fi button below. Thanks in advance.

The GitHublive demo above shows 2 different UI themes (Material Design / Salesforce), but you could also choose the Bootstrap theme which is demoed in other frameworks from links available in the table shown below. Also note that even if the demos are built with eitherBootstrap orBulma, you could in theory use any other UI libraries. The project tries to be as much agnostic as possible and it does so by providing a large set of CSS/SASS variables which are available to you to customize the UI however you want.

Project Repos	Live Demo	Stackblitz	Framework	Downloads	Details
Angular-Slickgrid / Angular-Slickgrid Demos	demo		Angular		docs / changelog
Aurelia-Slickgrid / Aurelia-Slickgrid Demos	demo		Aurelia		docs / changelog
Slickgrid-React / Slickgrid-React Demos	demo		React		docs / changelog
Slickgrid-Vue / Slickgrid-Vue Demos	demo		Vue -new 🚀		docs / changelog
Slickgrid-Universal-WebPack-Demo	demo		Vanilla / WebPack		docs
Slickgrid-Universal-Vite-Demo	demo		Vanilla / Vite		docs
Slickgrid-Universal/vanilla-force-bundle	n/a	n/a	Salesforce (LWC)	zip file	docs

The Slickgrid-Universallive demo is a Vanilla Implementation (which is not associated to any framework) built withViteJS (originallyWebPack) and is also being used to run all E2E tests withCypress for testing every UI functionalities. TheVanilla-force-bundle, which extends thevanilla-bundle package, is what we use in our SalesForce implementation (with Lightning Web Component) and it can also be used as a Standalone script (seezip file). These were all the original reasons to create this monorepo library but above all, it was to avoid code duplication. Dark Mode is also shown in some of the examples (not all), seeDark Mode documentation for more infos.

Slickgrid-Universal has close to100% Unit Test Coverage, ~5,000 Vitest unit tests including ~900 Cypress E2E tests to cover allExamples and most UI functionalities (each framework implementation also includes roughly the same amount of E2E tests), the goal is to offer peace of mind that pretty much all the code and PR changes are fully tested before releasing anything. Every time a new Pull Request (PR) is created, it runs all unit tests and Cypress E2E tests for vanilla flavor and every framework wrappers.

Package Name	Version	NPM downloads	Size (gzip)	Changes
@slickgrid-universal/common				changelog
@slickgrid-universal/binding				changelog
@slickgrid-universal/event-pub-sub				changelog
@slickgrid-universal/composite-editor-component				changelog
@slickgrid-universal/custom-footer-component				changelog
@slickgrid-universal/custom-tooltip-plugin				changelog
@slickgrid-universal/empty-warning-component				changelog
@slickgrid-universal/pagination-component				changelog
@slickgrid-universal/excel-export				changelog
@slickgrid-universal/text-export				changelog
@slickgrid-universal/graphql				changelog
@slickgrid-universal/odata				changelog
@slickgrid-universal/row-detail-view-plugin				changelog
@slickgrid-universal/rxjs-observable				changelog
@slickgrid-universal/utils				changelog
@slickgrid-universal/vanilla-bundle				changelog
@slickgrid-universal/vanilla-force-bundle				changelog

NOTE: the installation instructions below areonly required if you want to contribute to this project, if however you just want to download a quick Slickgrid-Universal demo, then I would suggest you to take a look at the following reposSlickgrid-Universal Vite Demo orSlickgrid-Universal WebPack Demo.

To get started with development in this monorepo, you will need to clone the repo and follow the steps shown below. Note that you must be at the root of the project in order to run the commands, this project also requirespnpm.

1. pnpm installation

This project usespnpm workspaces, you can install pnpm by choosing 1 of these 2 choices:

a. following theirinstallation

b. or install pnpm via Nodecorepack

corepackenable# optionally update pnpm to latestcorepack prepare pnpm@latest --activate

For a more targeted install, you could optionally install a specific framework (which avoids installing all frameworks).You should only do that if you're only interested in contributing something specific to a framework wrapper, see commands below:

# install all framework wrapperspnpm install# or install only a single framework wrapper# choose the command from list below depending on the frameworkpnpm angular:installpnpm aurelia:installpnpm react:installpnpm vue:install

2. Run Dev (Vanilla Implementation)

There is a Vanilla flavour implementation of this monorepo, vanilla means that it is not associated to any frameworkand is written in plain TypeScript without being bound to any framework. The implementation is very similar to Angular and Aurelia.It could be used as a guideline to implement it for other framework wrappers.

# dev vanilla (default)pnpm run dev# dev for Angular, Aurelia, React or Vuepnpm run dev:angularpnpm run dev:aureliapnpm run dev:reactpnpm run dev:vue

3. Build

You also need to run a full build in order to run the Vitest unit tests

# full build (all universal & all frameworks)pnpm run build# or only Slickgrid-Universal packages (excludes all frameworks)pnpm run build:universal

You must go through Installation Steps 1-3 prior to running the Vitest unit tests OR steps 1-2 for Cypress E2E tests.

To run all unit tests (with Vitest), you can run one of the following commands (make sure that steps 1-3 were executed prior to running this command)

pnpm runtest

To run all E2E tests (with Cypress), you can run one of the following commands (make sure that steps 1-2 were executed prior to running this command)

# will open the Cypress GUIpnpm run cypress# or run it in the shell (like a CI/CD would)pnpm run cypress:ci