Skip to content
SlickGrid for Angular 4+, the fastest & most customizable javascript datagrid with Bootstrap 3/4 theme support
Branch: master
Clone or download
ghiscoding Merge pull request #153 from ghiscoding/feat/jest
feat(tests): add first implementation of Jest (unit tests) & Cypress (e2e)
Latest commit a91970d Mar 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode fix(jest): watch jest tests Mar 20, 2019
cypress refactor(e2e): add Example 6 Cypress tests Mar 22, 2019
e2e replace packaging library with ng-packagr Oct 17, 2017
screenshots
src refactor(e2e): add Example 6 Cypress tests Mar 22, 2019
.angulardoc.json replace packaging library with ng-packagr Oct 17, 2017
.editorconfig Add GridExtraService with Highlight and RowSelection, replaced mouse … Nov 10, 2017
.gitignore
.npmignore replace packaging library with ng-packagr Oct 17, 2017
ISSUE_TEMPLATE.md update issue template Dec 19, 2018
LICENSE prepare release 0.9.0 Feb 6, 2018
README.md add "used by who" link & wiki Mar 7, 2019
angular.json feat(jest): trying to add Jest Unit Testing Mar 12, 2019
cypress.json refactor(e2e): add Example 6 Cypress tests Mar 22, 2019
dist.tgz prepare release 1.9.2 Dec 13, 2018
jest.config.js feat(e2e): add Cypress to the lib Mar 19, 2019
karma.conf.js feat(angular): ran ng update for latest Angular 7 version Dec 18, 2018
package.json fix(jest): watch jest tests Mar 20, 2019
protractor.conf.js replace packaging library with ng-packagr Oct 17, 2017
test-env.ts fix(jest): jQuery and jQuery UI being undefined in Jest Mar 19, 2019
tsconfig.json fix(editor): allow all Editors to work with complex objects Mar 4, 2019
tsconfig.spec.json feat(e2e): add Cypress to the lib Mar 19, 2019
tslint.json feat(angular): ran ng update for latest Angular 7 version Dec 18, 2018
vscode.code-workspace replace packaging library with ng-packagr Oct 17, 2017

README.md

Angular-Slickgrid

License: MIT TypeScript npm version NPM downloads

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

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+ as soon as possible.
  • version 2.x.x for Angular 7+

SlickGrid Source

We will be using 6pac SlickGrid fork, this the most active fork since the original @mleibman fork was closed some time ago by his author personal reasons. Also worth to know, I also contributed a lot to that fork to benefit Angular-Slickgrid.

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 (and more) that SlickGrid offers (you can see a vast list of samples on the 6pac SlickGrid examples website).

Who is using Angular-Slickgrid?

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

NPM Package

Angular-Slickgrid on NPM

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 Bootstrap 4 repository. That repo is updated frequently and is the actual Bootstrap 4 demo.

git clone https://github.com/ghiscoding/angular-slickgrid-bs4-demo
npm install
npm start

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.

Installation

Refer to the Wiki - HOWTO Step by Step

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.

See a quick look at 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 new 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 picker, ... 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 & Compound Filters (input text, single & multi select, slider, auto-complete, & even custom filter)
    • input text also support operators at the beginning of the input text:
      • <, <=, >, >=, <>, !=, ==, *
      • * can be used for startsWith and endsWith
  • Grouping & Aggregators
  • Grouping by Column Dragging
  • Support all the SlickGrid Controls and Plugins
  • Row(s) Selection
  • Row Detail View
  • Server side (backend) Services (filtering, sorting, pagination)
  • Some Features of SlickGrid itself which are working out of the gate
    • 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
    • Expose all the SlickGrid Events, see the Wiki
  • Localization support with ngx-translate, please read the Wiki - Localization
  • Export to File CSV or Text file (Tab Delimited or Semicolon Delimited)
    • support Unicode as well, even unicorn emoji shows up in the export and it even works with IE11.
  • 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

License

MIT License

Use it, like it?

You like and use this great library Angular-Slickgrid? You can always upvote ⭐️ and/or contribute :)

Like my work?

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

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)

Slickgrid Server Side

Editors and/or onCellClick

Editors

Pinned (aka frozen) Columns/Rows

Slickgrid Server Side

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

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

Slickgrid Server Side

You can’t perform that action at this time.