Skip to content
Aurelia-Slickgrid a wrapper of the lightning fast & customizable SlickGrid datagrid with Bootstrap 3,4 themes support
TypeScript JavaScript CSS HTML
Branch: master
Clone or download
ghiscoding fix(paginations): fix Grid State dbl event and some Pagination issues (
…#294)

* fix(paginations): fix Grid State double events and some Pagination issues
Latest commit efe5748 Jan 25, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci feat(cypress): add Pagination Service Cypress E2E tests (#245) Oct 26, 2019
.github refactor(doc): move contributing to ,github folder Jul 13, 2019
.vscode feat(export): add Export to Excel feature (#235) Oct 19, 2019
assets feat(columnGroup): add columnGroupKey property in order to use transl… Jan 23, 2020
aurelia_project refactor(folder): reorg lib folder to be in src (#153) Apr 6, 2019
doc chore(release): 2.16.5 Jan 11, 2020
screenshots refactor(readme): replace draggable grouping screenshot Jul 12, 2019
src fix(paginations): fix Grid State dbl event and some Pagination issues ( Jan 25, 2020
test fix(paginations): fix Grid State dbl event and some Pagination issues ( Jan 25, 2020
.codecov.yml fix(editors): complex objects should work with all editors (#226) Oct 2, 2019
.editorconfig feat(filter): add demo of single search filter, closes #152 (#157) Apr 7, 2019
.gitignore fix(dom): ColumnPicker & GridMenu were creating multiple DOM elements ( Aug 1, 2019
.npmignore feat(translate): make I18N an optional dependency (#208) Aug 1, 2019
LICENSE refactor(license): update license year Jul 12, 2019
README.md refactor(readme): rewrite the readme a little Jan 4, 2020
favicon.ico fix(dom): ColumnPicker & GridMenu were creating multiple DOM elements ( Aug 1, 2019
global.d.ts feat(tests): add some unit tests for FilterService (#198) Jun 27, 2019
index.ejs refactor(folder): reorg lib folder to be in src (#153) Apr 6, 2019
package-scripts.js fix(dom): ColumnPicker & GridMenu were creating multiple DOM elements ( Aug 1, 2019
package.json (build): use latest npm version of SlickGrid core Jan 22, 2020
tsconfig.json feat(tests): add few Grid Service unit tests (#182) Jun 4, 2019
tsconfig.spec.json feat(cypress): add Cypress E2E testing to CircleCI build (#207) Jul 30, 2019
tslint.json feat(tests): add more unit tests to FilterService (#199) Jul 2, 2019
webpack.config.js fix(dom): ColumnPicker & GridMenu were creating multiple DOM elements ( Aug 1, 2019

README.md

Aurelia-Slickgrid

License: MIT TypeScript npm version NPM downloads CircleCI codecov jest

One of the best javascript datagrid SlickGrid which was originally developed by @mleibman is now available to Aurelia. 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 Aurelia-Slickgrid.

NPM Package

Aurelia-Slickgrid on NPM

License

MIT License

Use it, like it?

You like and use this great library Aurelia-Slickgrid? Be sure to upvote ⭐️ and/or possibly contribute :)

Demo page

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

Working Demos

For complete working local demos, you can clone the Aurelia-Slickgrid Demos repository (instruction are provided in the repo). This repo provides multiple samples (RequireJS, WebPack, CLI, ...) and also worth to know that the 2 WebPacks demos are updated frequently since they are the actual Bootstrap 3 demo / Bootstrap 4 demo.

How to load data with Fetch-Client or Http-Client?

You might notice that all demos are made with mocked dataset that are embedded in each examples, that is mainly for demo purposes, but you might be wondering how to connect this with an FetchClient? Easy... just replace the mocked data, assigned to the dataset property, by your FetchClient 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 async call with FetchClient (internally it's just a SETTER that refreshes the grid). See Example 22 for a demo showing how to load a JSON file with FetchClient.

Fully Tested

Aurelia-Slickgrid recently reached 100% Test Coverage, we are talking about ~8300 lines of code (~2400 unit tests) that are now fully tested with Jest.

Installation

Refer to the Wiki - HOWTO Step by Step and/or the Aurelia-Slickgrid Demos repository.

Wiki / Documentation

The Wiki is where all the documentation and instructions will go, so please consult the Aurelia-Slickgrid - Wiki before opening any issues. The Wiki - HOWTO is a great place to start with.

Main features

You can see some screenshots below as well as instructions underneat them and if that is not enough for you to decide, head over to the Wiki - Main Features.

Contributions / Comments

Contributions are very welcome, this is what the community is for. If you wish to suggest something and/or want to make a PR (Pull Request), please feel free to do so.

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)

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

You can’t perform that action at this time.