Home

Angular-Slickgrid

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 rows).

SlickGrid Source

We will be using 6pac - SlickGrid fork (the most active fork with over 800+ stars, since the original repo of @mleibman is now inactive by it's author for personal reasons).

Goal

The goal is of course to be able to run SlickGrid within Angular 4+ but also to incorporate as much as possible the entire list of functionalities that SlickGrid offers (you can see a vast list of samples on the 6pac SlickGrid examples website) and more extras...

Demo page

Demo page includes sample for most of the features and it keeps growing (so you might want to consult it whenever a new version comes out).

Note on loading JSON data

You might notice that all demos are made with mock dataset right from the examples, you might be wondering how to connect this with an HttpClient? Easy... just replace the mocked data, that is assigned to the dataset property, by your HttpClient call and that's it. The dataset property can be changed at any time, which is why you can use local data and/or connect it to a Promise or an Observable with HttpClient. See Example 24 for a demo of HttpClient loading a JSON file.

NPM Package

Aurelia-Slickgrid on NPM

Bootstrap support

The creation of Angular-Slickgrid started with Bootstrap 3 support and Bootstrap 4 is now supported as well since version 1.2.0

• Bootstrap 3 demo / examples repo
• Bootstrap 4 demo / examples repo

Main features

You can see some screenshots below and the instructions down below.

This is a work in progress, but so far here are some of the features that angular-slickgrid brings (on top of Slickgrid itself):

• Easier use of SlickGrid within Angular as it is just a component (simply pass a column definitions and a dataset and you're good to go)
• Bootstrap Theme with SASS variables for extra customization (if you create a theme, then please make a PR)
• Auto-resize (boolean flag), will resize the datagrid viewport with available space even on browser resize (basically takes available space of it's container)
• Inline Editors (number, float, text, longText, date, ... you can also create your own custom ones)
• Formatters to display something different in UI, for example a boolean flag can be shown as a Font-Awesome checkmark icon
• Filters (input text, select, multi-select, single-select & even custom filter)
  • input text also support operators at the beginning of the input text:
    • <, <=, >, >=, <>, !=, ==, *
    • * can be used for startsWith and endsWith
• Grouping & Aggregators
• Support all the SlickGrid Controls and Plugins
• Row(s) Selection
• Server side (backend) Services (filtering, sorting, pagination)
  • GraphQL
  • OData
• Some Features of SlickGrid itself which are working out of the gate
  • Sort/Multi-Sort (client/server side)
  • Header Row with Filters (currently support Input and Select dropdown, multi-select is planned)
  • Formatters (a few default ones were added, and you can easily create custom ones too)
  • Optimized DataView which brings a lot of functionalities (sort, grouping, and more)
    • even server side data is saved into the SlickGrid DataView
  • All the SlickGrid Events are supported, see the [Wiki] (https://github.com/ghiscoding/Angular-Slickgrid/wiki/Grid-&-DataView-Events)
• Localization support with ngx-translate, please read the Wiki - Localization
• Pinned (aka frozen) Columns/Rows, see the Wiki

Missing features

What if Angular-Slickgrid is missing feature(s) versus the original SlickGrid?

Fear not and simply and use the SlickGrid and DataView objects, just like in the core lib, these are exposed through Event Emitters. For more info continue reading on Wiki - SlickGrid & DataView objects and Wiki - Grid & DataView Events