Awesome

Angular-Slickgrid

Brief introduction

One of the best JavasSript data grid SlickGrid, which was originally developed by @mleibman, is now available to the Angular world. SlickGrid beats most other data grids 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 a dependency), 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 with browser native code (no more jQuery 🎉).

License

MIT License

Documentation

📕 Documentation website powered by GitBook for version 7+ (or use the Wikis for older versions).

For common issues, see the Troubleshooting Section below

Installation

Available in Stackblitz (Codeflow) below, this can also be used to provide an issue repro.

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

Basic Grid

import { type Column, type GridOption } from 'angular-slickgrid';

export class GridComponent implements OnInit {
  columnDefinitions: Column[] = [];
  gridOptions!: GridOption;
  dataset!: any[];

  onInit() {
    this.columnDefinitions = [
      { id: 'username', name: 'Username', field: 'username'},
      { id: 'age', name: 'Age', field: 'age' }
    ];
    this.gridOptions = { /*...*/ };
    this.dataset = [
      { id: 1, username: 'John', age: 20 },
      { id: 2, username: 'Jane', age: 21 }
    ];
  }
}

<angular-slickgrid gridId="grid2"
    [columnDefinitions]="columnDefinitions"
    [gridOptions]="gridOptions"
    [dataset]="dataset">
</angular-slickgrid>

Troubleshooting

[!WARNING] This project does not work well with strictTemplates because of its use of native Custom Event, so please make sure to either disable strictTemplates or cast your event as any (see this discussion for more info)

Styling Themes

Multiple styling themes are available

• Bootstrap (see all Angular-Slickgrid live demos)
• Material (see Slickgrid-Universal)
• Salesforce (see Slickgrid-Universal)

Also note that all of these themes also have Dark Theme equivalent and even though Bootstrap if often used as the default, it also works well with any other UI framework like Bulma, Material, ...

Demo page

Angular-Slickgrid works with all Bootstrap versions, you can see a demo of each one below. It also works well with any other frameworks like Material or Bulma and there are also couple of extra styling themes based on Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the Docs - SVG Icons

Angular-Slickgrid-Demos includes the following:

• Bootstrap 5 demo / examples repo - Code samples which uses ngx-translate to support multiple locales.
• Bootstrap 5 (single Locale) / examples repo - Code Sample with a single Locale (without ngx-translate)

Working Demo

For a complete set of working demos (40+ examples), we strongly suggest you clone Angular-Slickgrid Demos repository (instructions are provided in the demo repo). The repo provides multiple demos and they are updated for every new project release, so it is updated frequently and is also used as the GitHub live demo page for both the Bootstrap 5 demo and Bootstrap 5 demo (single Locale).

git clone https://github.com/ghiscoding/angular-slickgrid-demos
cd bootstrap5-demo-with-translate # or any of the other 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. 👷👷‍♀️

<a href='https://ko-fi.com/ghiscoding' target='_blank'><img height='32' style='border:0px;height:32px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' />

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.

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 that is 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 be 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

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

Slickgrid-Universal has 100% Unit Test Coverage and all Angular-Slickgrid 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

Sponsors