/aurelia-slickgrid

Aurelia-Slickgrid a wrapper of the lightning fast & customizable javascript datagrid with Bootstrap 3,4 themes support

Primary LanguageTypeScriptMIT LicenseMIT

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? You can always upvote ⭐ and/or 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 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.

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