Slickgrid-Universal
This is a monorepo project (using pnpm workspaces) which is regrouping a few packages under a single repository. It is using SlickGrid (more specifically the 6pac/SlickGrid fork) behind the scene (there is no need to rewrite the core library itself, in other words this is a wrapper library). The main goal of this library is to create a common repo that includes all Editors, Filters, Extensions and Services that could be used by any Framework (it is framework agnostic). It was also a good opportunity to decouple some features/services that not every one need at all time, this will also help in getting smaller bundle size depending on which features (packages) you decide to use. For example, not every project require backend services (OData, GraphQL) and export services (Excel Export, Text Export), which is why they are better handled with a monorepo structure.
Latest News & Releases
Check out the Releases section for all latest News & Version Releases.
Demo page
The GitHub demo page uses 2 different themes (Material Design / Salesforce) but you could also use Bootstrap theme which is demoed in other frameworks.
- Angular-Slickgrid - External Library
- Aurelia-Slickgrid - External Library
- Webpack-Demo-Vanilla-Bundle - internal with Material Design theme & Salesforce themes
- Slickgrid-Universal-Vite-Demo - Slickgrid-Universal demo with ViteJS
Like my work?
You could
Why create this monorepo?
You might be wondering why was this monorepo created? Here are a few reasons:
- it removes a lot of duplicated code that existed in both Angular-Slickgrid and Aurelia-Slickgrid libraries (these libs had over 90% of code in common and that was not very DRY, it's a lot better to push fixes in only 1 place instead of multiple places).
- decouple some Services that should not be required, neither imported, for every project (OData, GraphQL, Export to File, Export to Excel, RxJS, ...)
- framework agnostic, it could be implemented in many more frameworks (if you're interested in adding a port for any other framework, please open a new Discussion)
- you can use it in plain JavaScript (ES6) or TypeScript, on our side we use it with plain JS (ES6) in our Salesforce environment with LWC (Lightning Web Component)
Frameworks using this monorepo
- Aurelia-Slickgrid starting with version
>=3.x - Angular-Slickgrid starting with version
>=3.x - Vanilla bundle is to use it with plain JavaScript or TypeScript without targeting any particular framework.
The Vanilla Implementation (which is not associated to any framework) was built with WebPack and is also used to run and test all the UI functionalities Cypress (E2E tests). The Vanilla-force-bundle, which extends the vanilla-bundle package is what we use in our SalesForce implementation (with Lightning Web Component), hence the creation of this monorepo library.
Fully Tested with Jest (Unit Tests) - Cypress (E2E Tests)
Slickgrid-Universal has 100% Unit Test Coverage, we are talking about +15,000 lines of code (+3,700 unit tests) that are fully tested with Jest. There are also +400 Cypress E2E tests to cover all Examples and most UI functionalities (there's also an additional +500 tests in Aurelia-Slickgrid)
Available Demos
| Package or Lib Name | Description |
|---|---|
| Angular-Slickgrid | for Angular framework |
| Aurelia-Slickgrid | for Aurelia framework |
| slickgrid-universal/webpack-demo-vanilla-bundle | standalone package written in plain TypeScript for demo and UI testing (do not use in production, this is only for demo/testing purpose). |
| Slickgrid-Universal-Vite-Demo | Slickgrid-Universal demo with Vite & TypeScript |
Available Public Packages
Installation
NOTE: the installation instructions below are only required if you want to contribute to this project, if on the other hand you just want to do a quick demo and use Slickgrid-Universal then take a look at webpack-demo-vanilla-bundle. There is no need to clone and install the entire library, you can just create an empty project with the content of webpack-demo-vanilla-bundle (perhaps clone it the lib and copy only that folder to an empty project would be the easiest to get started).
To get started and do development with this monorepo, you will need to clone the repo and then follow the steps below. You must be at the root of your project to run the following commands. This project uses pnpm, you can install it via npm i -g pnpm or follow their installation
- Install pnpm workspace with pnpm or run it with
npx
# from the root
pnpm install
# or with npx
npx pnpm install- Build
To get started you must run at least once the following script for the initial TS build so that all necessary dist folders are created and bundled for all the workspace packages to work together.
pnpm run buildNOTE: this will also have to be re-executed if you change any of the interfaces in the common package (since that package is a dependency of all other packages).
- 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:watchTests
You must go through Installation Steps 1-2 prior to run the unit tests OR Steps 1-3 when running E2E tests.
Jest Unit Tests
To run all unit tests (with Jest), you can run one of the following commands
pnpm run test
# or run Jest in watch mode
pnpm run test:watchCypress E2E Tests
To run all E2E tests (with Cypress), you can run one of the following commands
# will open the Cypress UI
pnpm run cypress
# or run in the shell like a CI/CD would
pnpm run cypress:ci