angular-slickgrid

Brief introduction

One of the best JavasSript datagrid SlickGrid, which was originally developed by @mleibman, is now available to the Angular world. SlickGrid beats most other datagrids in terms of features, customizability and performance (running smoothly with even a million rows). Angular-Slickgrid is a wrapper on top of Slickgrid-Universal (which is required), in the early beginning we used the 6pac/SlickGrid fork but that was dropped in >=v7.0 since Slickgrid-Universal is now a standalone project. SlickGrid was also recently rewritten to be browser native (no more ~jQuery~ 🎉).

License

MIT License

Documentation

📕 Documentation website powered by GitBook.
For common issues, see the Troubleshooting Section below

Installation

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-slickgrid

Demo page

Angular-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)

Working Demo

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 start

Like it? ⭐ it

You like to use Angular-Slickgrid? Be sure to upvote ⭐ and maybe support me with caffeine ☕ and feel free to contribute. 👷👷‍♀️

Contributions

If you wish to contribute then make sure to follow the steps shown in the CONTRIBUTING guide.

Latest News & Releases

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

Angular Compatibility

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.

ngx-translate Compatibility

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 |

Tested with Jest (Unit Tests) - Cypress (E2E Tests)

Slickgrid-Universal has 100% Unit Test Coverage and all Slickgrid-React Examples are tested with Cypress as E2E tests.

Troubleshooting Section

• Angular 12 with WebPack 5 - how to fix polyfill error
• ngcc Build Warnings (Angular >=8.0 && <16.0)
• strictTemplates error