Slickgrid components made available in Angular


Keywords
angular, plugin, datagrid, datatable, slickgrid, angular4, angular8, bootstrap, data-table, dataview, graphql, grid, odata
License
MIT
Install
npm install angular-slickgrid@2.12.3

Documentation

Angular-Slickgrid

License: MIT TypeScript npm version NPM downloads gzip size CircleCI codecov jest

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, this is the most active fork since the original @mleibman fork was closed some time ago by his author for personal reasons. Also worth to know, I also contributed a lot to the 6pac/SlickGrid fork for the benefit of Angular-Slickgrid.

NPM Package

Angular-Slickgrid on NPM

License

MIT License

Use it, like it?

You like and use this great library Angular-Slickgrid? Please upvote ⭐️ and if you want to contribute, please feel free to do so. 😄

Demo page

Angular-Slickgrid supports both Bootstrap 3 and Bootstrap 4, you can see a demo of each one below.

Working Demo

For a complete and working local demo, you can clone the Angular-Slickgrid Demos repository. That repo is updated frequently and is used for both 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

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 the rxjs-compat package.
  • version 2.x.x for Angular 7+
    • since version 2.11.0, you can also change your build target to ES2015 for modern browser.

Fully Tested

Angular-Slickgrid recently reached 100% Test Coverage, we are talking about ~8200 lines of code that are now fully tested with Jest.

Installation

Refer to the Wiki - HOWTO Step by Step and/or clone the Angular-Slickgrid Demos.

How to load data with HttpClient?

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.

Material Theme

Technically speaking, Material theme is not provided, but it should still work. The styling might need some adjustments to make it look like Material but there's over 300+ SASS variables, so I'm sure making a Material Theme is totally doable and if you do, please contribute it as a new theme to the project. Thank you.

Who is using Angular-Slickgrid?

Are you using Angular-Slickgrid? Add your company/site/project to the Used by Who list.

You want to help and contribute?

You like the library and would like contribute? That would be awesome, the first thing you can do is head over to the Version 2.x - Project, there are some tasks that I would gladly like receiving help with. One of the biggest task is to increase Jest unit tests code coverage and/or more Cypress E2E tests.

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

Like my work?

If you like my work, you can also support me with caffeine ☕️ Buy Me a Coffee

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 (that is the only available theme, but there is a lot of SASS variables to make it look like Material, or other theme if you wish to. If you create a new theme, please submit a PR).

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

Filter and Sort (clientside with DataView)

Filter and Sort

Editors and/or onCellClick

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

Slickgrid Server Side