ghiscoding / Angular Slickgrid
Programming Languages
Projects that are alternatives of or similar to Angular Slickgrid
Angular-Slickgrid
Brief introduction
One of the best javascript datagrid SlickGrid which was originally developed by @mleibman is now available to Angular. I have used a few datagrids and SlickGrid beats most of them in terms of functionalities and performance (it can easily deal with even a million row). We will be using the 6pac/SlickGrid fork, it is the most active fork since the original author @mleibman stopped working on his original repo. Also worth knowing that I have contributed a lot to the 6pac/SlickGrid fork for the benefit of Angular-Slickgrid... also a reminder, this is a wrapper of a jQuery lib (SlickGrid) and a big portion of the lib (like Editors, Filters and others) are written in jQuery/JavaScript, so just keep that in mind and that also means jQuery is a dependency.
NPM Package
License
Like it? ⭐️ it
You like and use Angular-Slickgrid? Be sure to upvote ⭐️ and feel free to contribute. 👷
Like my work?
If you like my work, you can also support me with caffeine ☕️ Buy Me a Coffee
I certainly drank many coffees to build and keep adding features for this great library.
Latest News & Releases
Check out the Releases section for all latest News & Releases.
Angular Compatibility
- version
1.x.x
for Angular 4 to 6- Angular 6, is only supported through
rxjs-compat
as shown in this post. It's preferable to upgrade to Angular 7+ to avoid using therxjs-compat
package.
- Angular 6, is only supported through
- version
2.x.x
for Angular 7+- since version
2.11.0
, you can also change your buildtarget
toES2015
for modern browser.
- since version
Note on RxJS
Please note that RxJS is fixed at version 6.3.3
and will certainly not work with version 7.0.0
. Why you might ask? Because they made structurale changes in version 6.4.0
which would impact anyone using Angular-Slickgrid that haven't upgraded and for that reason the version used by the lib is fixed at 6.3.3
. Also note that I will not release a major version of Angular-Slickgrid just to support RxJS 7 (which is still in Beta), a major version of Angular-Slickgrid is many months away.
ngx-translate Compatibility
If you are facing any issues with ngx-translate
library while building your Angular Project. You need to make sure that @ngx-translate/core
is part of your dependencies, that is also true even if you just use a single Locale, because it is a peerDependency
of Angular-Slickgrid. We use @Optional() TranslateService
in the lib and for that to work, we still need it to be installed, but don't worry it should be removed by tree shaking process after a running a build. See their version compatibility table below
Angular Version | @ngx-translate/core |
---|---|
10 | 13.x+ |
9 | 12.x+ |
8 | 12.x+ |
7 | 11.x+ |
Build Warnings (Angular 8+)
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, 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: [
/slickgrid\//,
/flatpickr/,
/jquery-ui-dist\//,
]
},
}
};
You should also add Angular-Slickgrid
as an allowed CommonJS dependency to your angular.json
file to silent the warnings.
"options": {
"allowedCommonJsDependencies": ["angular-slickgrid"]
}
Jest (Unit Tests) - Cypress (E2E Tests)
Fully Tested withAngular-Slickgrid reached 100% Unit Test Coverage, we are talking about +10,000 lines of code (+2,800 unit tests) that are now fully tested with Jest. On the UI side, all Angular-Slickgrid Examples are tested with Cypress, there are over 400+ Cypress E2E tests.
Installation
Refer to the Wiki - HOWTO Step by Step and/or clone the Angular-Slickgrid Demos repository. Please don't open any issue unless you have followed these steps (from the Wiki), and if any of the steps are incorrect or confusing, then please let me know.
NOTE: if you have any question, please consider asking installation and/or general questions on Stack Overflow
Demo page
Angular-Slickgrid
supports both Bootstrap 3
, Bootstrap 4
and even Bootstrap 5
(Beta), you can see a demo of each one below.
There are also 2 new Themes, Material & Salesforce that are available as well and if you wish to use SVG then take a look at the Wiki - SVG Icons
Working Demo
For a complete and working local demo, you can (should) clone the Angular-Slickgrid Demos repository. That repo is updated frequently and is used to update the GitHub demo pages for the Bootstrap 3 demo and Bootstrap 4 demo.
git clone https://github.com/ghiscoding/angular-slickgrid-demos
cd bootstrap4-demo-with-translate
npm install
npm start
HttpClient
?
How to load data with You might notice that all demos are coded with mocked dataset in each 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 it. The dataset
property can be changed or refreshed at any time, which is why you can use local data and/or connect it to 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
.
Wiki / Documentation
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).
Main features
You can see some screenshots below and the instructions down below and if that is not enough for you to decide, head over to the Wiki - Main Features.
Missing features
What if Angular-Slickgrid
is missing feature(s) compare to the original core library 6pac/SlickGrid?
Fear not, and just simply reference the SlickGrid
and DataView
objects, just like in the core lib, those are exposed through Event Emitters. For more info continue reading on Wiki - SlickGrid & DataView objects and Wiki - Grid & DataView Events
Screenshots
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.