One of the best JavasSript datagrid SlickGrid, which was originally developed by @mleibman, is now available to Angular. SlickGrid beats most other datagrids in terms of features, customizability and performance (it can easily deal with even a million row). Angular-Slickgrid is a wrapper on top of SlickGrid and it requires Slickgrid-Universal dependency, originally we used the 6pac/SlickGrid fork but that was dropped in >=7.0, so we no longer need external SlickGrid dependencies anymore apart from Slickgrid-Universal since v7.0. SlickGrid was also recently refactored to be browser native (no more jQuery).
📕 Documentation website powered by GitBook.
A good starting point is the Docs - Quick Start and/or simply clone the Angular-Slickgrid Demos repository. Please review all documentation and closed issues before opening any new issue, also consider asking installation and/or general questions on Stack Overflow unless you think there's a bug with the library.
npm install angular-slickgridAngular-Slickgrid works with all Bootstrap versions, you can see a demo of each one below. It also with any other framework like Material or Bulma and 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
- Bootstrap 5 demo / examples repo
- Bootstrap 4 demo / examples repo
Bootstrap 5 demo with Single Locale/ examples repo
Bootstrap 5 with single Locale - Code Sample with single Locale (without ngx-translate)
For a complete set of working demos (over 30 examples), we strongly suggest you to clone the Angular-Slickgrid Demos repository (instructions are provided in the demo repo). The repo provides multiple demos and they are updated every time a new version is released, so it is updated frequently and is also used as the GitHub live demo page for both the Bootstrap 5 demo and Bootstrap 4 demo.
git clone https://github.com/ghiscoding/angular-slickgrid-demos
cd bootstrap4-demo-with-translate # or any of the 4 demos
npm install
npm startYou like to use Angular-Slickgrid? Be sure to upvote ⭐ and maybe support me with caffeine ☕ and feel free to contribute. 👷👷♀️
If you wish to contribute then make sure to follow the steps shown in the CONTRIBUTING guide.
Check out the Releases section for all latest News & Releases.
The Documentation is powered by GitBook and is where you'll find all the documentation, so please consult the Angular-Slickgrid - Documentation before opening any issues. The Docs - Quick Start is a great place to start with. You can also take a look at the Demo page, it includes sample for most of the features and it keeps growing (so you might want to consult it whenever a new version comes out).
For common issues, see the Troubleshooting Section below
Note please be aware that only the latest version of Angular-Slickgrid is supported and will receive bug fixes. The reason older versions are not supported is simply because it's already a lot of work to maintain for a single developer.
| Angular-Slickgrid | Angular version | Migration Guide | Notes |
|---|---|---|---|
| 7.x | >=17.0 | Migration 7.x | merge SlickGrid into Slickgrid-Universal, requires Slickgrid-Universal 4.x version |
| 6.x | >=16.0 | Migration 6.x | removal of jQuery (now uses browser native code), requires Slickgrid-Universal 3.x version |
| 5.x | >=14.0 | Migration 5.x | removal of jQueryUI, requires Slickgrid-Universal 2.x version |
| 4.x | >=13.0 | Migration 4.x | for Ivy build only, requires Slickgrid-Universal 1.x version |
| 3.x | >=12.0 | Migration 3.x | the lib now uses Slickgrid-Universal monorepo v0.19.2. Also, IE11 is EOL and no longer supported. |
| 2.x | 7-11.x | Migration 2.x | support multiple grids on same page |
| 1.x | 4-6.x |
Note For a full compatibility table of Angular-Slickgrid with Slickgrid-Universal, please take a look at the Versions Compatibility Table - Wiki.
For Angular 12+ see the instructions below - Angular 12 with WebPack 5 - polyfill issue.
Angular-Slickgrid uses ngx-translate library to support Locales, it is also required even when using a single Locale. The reason is because, we use @Optional() TranslateService in the lib and for that to work, it requires ngx-translate to installed. Once you run the build and if you are using a single Locale then the tree shaking process should remove these optional dependencies. See their version compatibility table below for more info
| Angular Version | @ngx-translate/core |
|---|---|
| 16+ | 15.x |
| 13+ (Ivy only) | 14.x |
| 10-13 | 13.x |
| 8-9 | 12.x |
| 7 | 11.x |
Angular-Slickgrid and Slickgrid-Universal both have 100% Unit Test Coverage, that includes over +4,000 unit tests using Jest. On the UI side, all Angular-Slickgrid Examples are tested with Cypress, there are over +500 Cypress E2E tests.
You might notice that all demos are coded with mocked dataset in each of the examples, that is mainly for demo purposes, but you might be wondering how to connect this with an HttpClient? Easy... just replace the mocked data, assigned to the dataset property, by your HttpClient call and that's about it. The dataset property can be changed or refreshed at any time and it will be reflected in the grid, which is why you can use local data and/or connect it with a Promise or an Observable with HttpClient (internally it's just a SETTER that refreshes the grid). See Example 24 for a demo showing how to load a JSON file with HttpClient.
You can see some screenshots below and visit the Documentation website.
Since Angular 12 switched to WebPack 5, you might get some new errors and you will need to add some polyfills manually to get the Excel Builder (Excel Export) to work.
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
npm install stream-browserify- Add a path mapping in
tsconfig.json:
{
...
"compilerOptions": {
"paths": {
"stream": [ "./node_modules/stream-browserify" ]
},
- Add
streamtoallowedCommonJsDependenciesinangular.json:
"options": {
"allowedCommonJsDependencies": [
"excel-builder-webpacker",
"stream"
],
You might get warnings about SlickGrid while doing a production build, most of them are fine and the best way to fix them, is to simply remove/ignore the warnings to CommonJS packages, all you have to do is to add a file named ngcc.config.js in your project root (same location as the angular.json file) with the following content (you can also see this commit which fixes the Angular-Slickgrid-Demos prod build):
module.exports = {
packages: {
'angular-slickgrid': {
ignorableDeepImportMatchers: [
/assign-deep/,
/slickgrid\//,
/flatpickr/,
/dequal/,
]
},
}
};You should also add Angular-Slickgrid as an allowed CommonJS dependency to your angular.json file to silence the warnings.
"options": {
"allowedCommonJsDependencies": ["angular-slickgrid"]
}In Angular 14 and higher, Angular has a strictTemplates flag in your tsconfig.json file (enabled by default when creating new projects from CLI) which causes issues with Angular-Slickgrid events with errors similar to this:
Property 'detail' does not exist on type 'Event'. (onAngularGridCreated)="angularGridReady($event.detail)"
The reason is because Angular-Slickgrid uses Custom Event for all its events and Angular complains because these Custom Events aren't typed. In order to fix this issue, you have 3 viable approaches:
- disabled
strictTemplatesin yourtsconfig.jsonconfig - cast the event in the View template to
$anytype$any($event)for example$any($event).detail.eventData
- cast the event in the component ViewModel to
CustomEvent
<angular-slickgrid gridId="grid28"
[columnDefinitions]="columnDefinitions"
[gridOptions]="gridOptions"
[dataset]="dataset"
(onAngularGridCreated)="angularGridReady($event.detail)">
</angular-slickgrid>angularGridReady(event: CustomEvent) {
this.angularGrid = event.detail as AngularGridInstance;
this.gridObj = this.angularGrid.slickGrid;
}The simplest is obviously the option 1 but you lose the strictness on the view templates, more details can found under the discussion (strictTemplates) Template error , I have also opened a similar Stack Overflow question myself:
How to use Custom Event (not Event Emitter) without strictTemplates to complain about $event not being a Custom Event type?.
Screenshots from the demo app with the Bootstrap theme.
Note that the styling changed a bit, the best is to simply head over to the Live Demo page.
