This is a monorepo project (using yarn 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's also a good opportunity to decouple some features/services that not every project require at all time, this will also help in getting smaller bundle size depending on which features (packages) you use. For example, not every project requires backend services (OData, GraphQL) and export services (Excel Export, Text Export), which is why they are better handled with a monorepo structure.
Check out the Releases section for all latest News & Version Releases.
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
You could ⭐ the lib and maybe support me with cafeine ☕. Thanks.
You might be wondering why was this monorepo created? Here are a few of the reasons:
- it removes a lot of duplicate code that exist in both Angular-Slickgrid and Aurelia-Slickgrid (these libs have over 90% of code in common and that is not very DRY, we should only push fixes in 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)
- Aurelia-Slickgrid starting with version
>=3.xis now using Slickgrid-Universal - Angular-Slickgrid starting with version
>=3.xis now using Slickgrid-Universal - Vanilla bundle is to use it with plain JavaScript or TypeScript without targeting any particular framework.
The Vanilla Implementation (not associated to any framework) is built with WebPack and is also used to 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.
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)
| Package or Lib Name | Description |
|---|---|
| Angular-Slickgrid | Angular-Slickgrid for Angular framework |
| Aurelia-Slickgrid | 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). |
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, just create an empty project with the content of webpack-demo-vanilla-bundle (perhaps clone it and copy only that folder to an empty project would be the easiest).
To get going 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.
- Install npm packages with Yarn classic 1.x since this lib uses Yarn version 1.x Workspaces and so you need to use Yarn to install all packages
# from the root
yarn install- Build (bundle)
To get started you must run at least once the initial TS build so that all necessary dist are created and bundled for all the workspace packages to work together.
yarn run bundleNOTE: 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 with other frameworks.
yarn run dev:watchYou must go through Installation Steps 1-2 prior to run the unit tests OR Steps 1-3 when running E2E tests.
To run all unit tests (with Jest), you can run these commands
yarn run test
# or run Jest in watch mode
yarn run test:watchTo run all E2E tests (with Cypress), you can run these commands
# will open the Cypress UI
yarn run cypress
# or run in the shell like a CI/CD would
yarn run cypress:ci
