angular-slickgrid
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.1 • Public • Published

    Angular-Slickgrid

    License: MIT TypeScript npm version NPM downloads

    Actions Status Cypress.io jest codecov

    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 it also mean that jQuery is a dependency.

    License

    MIT License

    NPM Package

    Angular-Slickgrid on NPM

    Demo page

    Angular-Slickgrid works with all Bootstrap versions, you can see a demo of each one below. There are also 2 new styling Themes, Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the Wiki - SVG Icons

    Working Demo

    For a complete & working local demo (30+ examples), you can (and should) clone the Angular-Slickgrid Demos repository to get started. That repo is updated frequently and is used to update the GitHub 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 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. I certainly drank many coffees to build and keep adding features for this great library.

    Buy Me a Coffee at ko-fi.com

    Latest News & Releases

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

    Angular Compatibility

    • version 1.x.x for Angular 4 to 6
    • version 2.x.x for Angular 7+
    • version 3.x.x for Angular 12+ and RxJS 7+ (migration guide to 3.x)
      • build target got bumped to ES2018 for modern browser only
      • IE11 is reaching EOL by year end and is no longer supported, if you still need to support it then stick with version 2.x
      • uses Slickgrid-Universal monorepo
    • version 4.x.x for Angular 13+ and RxJS 7+ (Ivy only, migration guide to 4.x)
      • for Ivy build only (no more UMD bundle), IE is definitely out of the picture

    For Angular 12+ see the instructions below - Angular 12 with WebPack 5 - polyfill issue

    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 when using a single Locale, that is because it is a peerDependency of Angular-Slickgrid. The reason is because, 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 still be removed by the tree shaking process after a running a production build. See their version compatibility table below

    Angular Version @ngx-translate/core
    13+ (Ivy only) 14.x+
    10-13 13.x+
    8-9 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: [
            /assign-deep/,
            /slickgrid\//,
            /flatpickr/,
            /dequal/,
            /jquery-ui\//,
          ]
        },
      }
    };

    You should also add Angular-Slickgrid as an allowed CommonJS dependency to your angular.json file to silence the warnings.

    "options": {
      "allowedCommonJsDependencies": ["angular-slickgrid"]
    }

    Angular 12 with WebPack 5 - how to fix polyfill error

    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.

    The error you might get

    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.
    

    Steps to fix it

    1. npm install stream-browserify
    2. Add a path mapping in tsconfig.json:
    {
      ...
      "compilerOptions": {
        "paths": {
          "stream": [ "./node_modules/stream-browserify" ]
        },
    
    1. Add stream to allowedCommonJsDependencies in angular.json:
      "options": {
        "allowedCommonJsDependencies": [
          "assign-deep",
          "excel-builder-webpacker",
          "jquery-ui",
          "stream"
        ],
    

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

    Angular-Slickgrid and Slickgrid-Universal both have 100% Unit Test Coverage, we are talking about +15,000 lines of code (+3,750 unit tests) that are fully tested with Jest. On the UI side, all Angular-Slickgrid Examples are tested with Cypress, there are over +500 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

    How to load data with HttpClient?

    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 it 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.

    Slickgrid example with Formatters (last column shown is a custom Formatter)

    You can also see the Grid Menu opened (aka hambuger menu)

    Default Slickgrid Example

    Filters and Multi-Column Sort

    Filter and Sort

    Inline Editing

    Editors

    Pinned (aka frozen) Columns/Rows

    Pinned Columns/Rows

    Draggable Grouping & Aggregators

    Draggable Grouping

    Slickgrid Example with Server Side (Filter/Sort/Pagination)

    Comes with OData & GraphQL support (you can implement custom ones too)

    Slickgrid Server Side

    Composite Editor Modal Windows

    Composite Editor Modal

    Install

    npm i angular-slickgrid

    DownloadsWeekly Downloads

    1,476

    Version

    4.1.1

    License

    MIT

    Unpacked Size

    1.05 MB

    Total Files

    56

    Last publish

    Collaborators

    • ghiscoding