Slickgrid-Universal

📢 VueJS Support

Note

VueJS is now supported via a new Slickgrid-Vue Component 🚀. One major difference compare to the other existing framework ports is that this new one is included directly in here under the /frameworks folder, eventually all other framework ports will also be moved in here as well (scheduled for our next major version).

Documentation

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

Live Demo

Live Demo website

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

Description

This is a monorepo project (using pnpm workspaces and Lerna-Lite) which is regrouping a few packages under a single repository. It was originally requiring SlickGrid as an external dependency, but that was dropped in v4.0, and so it is now a standalone library. 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 (it is framework agnostic). The original SlickGrid is like an IKEA product that requires assembling everything yourself, however the goal of the project here is to offer an all assembled product that already includes a set of built-in Editors, Filters, Formatters while also offering extra (but optional) packages like OData, GraphQL, Export to Excel ... which SlickGrid simply does not offer by default. The project also provides multiple Themes including Dark Mode. See below for more project details.

Why create this monorepo?

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

1. it was originally created to remove duplicated code from the first 2 framework ports Angular-Slickgrid and Aurelia-Slickgrid
   • prior to this monorepo, these 2 projects had ~90% duplicated code in common which was not very DRY.
   • being a common source makes it a lot easier to maintain by pushing fixes in this common project here.
2. it also decoupled a few Services which are not required in every project (OData, GraphQL, Export to CSV, Export to Excel, Composite Editor, RxJS, ...)
3. and finally it is framework agnostic, it could be implemented in many different frameworks (if you are interested in adding a different framework port, which is not listed in the table below, then please open a new Discussion)
   • 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)

Latest News & Releases

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

Like my work?

You could ⭐ the lib and perhaps support me with caffeine via the button below. Thanks in advance.

Live Demos & Available Framework Ports

The GitHub live demo above shows 2 different UI themes (Material Design / Salesforce), but you could also choose the Bootstrap theme which is demoed in other frameworks with available links available in the table below. Also note that even though the demos are built with either Bootstrap or Bulma, 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 customize it the way you want.

Available Framework Ports

Project Repo	Live Demo	Stackblitz	UI demoed	Framework	Docs	Downloads
Angular-Slickgrid	demo		Bootstrap	Angular	docs
Aurelia-Slickgrid	demo		Bootstrap	Aurelia	docs
Slickgrid-React	demo		Bootstrap	React	docs
Slickgrid-Vue	demo		Bootstrap	Vue - new 🚀	docs
Slickgrid-Universal-WebPack-Demo	demo		Bulma	Vanilla / WebPack	docs
Slickgrid-Universal-Vite-Demo	demo		Bulma	Vanilla / Vite	docs

The Slickgrid-Universal live demo is a Vanilla Implementation (which is not associated to any framework) built with ViteJS (originally WebPack) and is also being used to run E2E tests with Cypress for testing all UI functionalities. The Vanilla-force-bundle, which extends the vanilla-bundle package is what we use in our SalesForce implementation (with Lightning Web Component) and can also be used as Standalone script (see zip file). These were all the original reasons to create this monorepo library and mainly to avoid code duplication. Dark Mode is also shown in some examples (not all), see Dark Mode documentation for more infos.

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

Slickgrid-Universal has close to 100% Unit Test Coverage, ~5,000 Vitest unit tests and also 700 Cypress E2E tests to cover all Examples and most UI functionalities (each framework implementation also have an additional 700 tests as well), the goal is to test everything and offer peace of mind that pretty much all the code and PR changes are fully tested before being released.

Available Public Packages

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

Installation

NOTE: the installation instructions below are only 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 to take a look at the following repos Slickgrid-Universal Vite Demo or Slickgrid-Universal WebPack Demo.

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

1. pnpm installation

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

a. following their installation

b. or install pnpm via Node corepack

corepack enable

# optionally update pnpm to latest
corepack prepare pnpm@latest --activate

Specific Framework install

For a more targeted install, you could optionally install a specific framework (which avoids installing all frameworks). Taking Vue for example

pnpm vue:install

Note for frameworks development you will not only require the targeted install but it also requires you to run a pnpm bundle

2. Run Dev (Vanilla Implementation)

There is a Vanilla flavour implementation of this monorepo, vanilla means that it is not associated to any framework and 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 ports.

pnpm run dev

3. Build (bundle)

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

pnpm run bundle

Tests

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

Vitest Unit 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 run test

# or run Vitest in watch mode
pnpm run test:watch

Cypress E2E Tests

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 GUI
pnpm run cypress

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

Sponsors