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 we are using the 6pac/SlickGrid fork which is the most active one since the original one was put on pause by its original author for personal reasons. Also worth to know, that I also contributed a lot to the 6pac/SlickGrid fork over the years for the benefit of all the SlickGrid libraries that I maintain including this one here... SlickGrid was recently refactored to be browser native, which means that jQuery is no longer required in Angular-Slickgrid v6.0 and higher.
A good starting point is the Wiki - HOWTO Step by Step and/or simply clone the Angular-Slickgrid Demos repository. Please review all Wikis 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. 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 Wiki - SVG Icons
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 Wiki is where all the documentation and instructions will go, so please consult the Angular-Slickgrid - Wiki before opening any issues. The Wiki - HOWTO 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 |
|---|---|---|---|
| 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 some instructions below and if that is not enough for you to decide, head over to the Wiki - Main Features.
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.
