Skip to content

ghiscoding/aurelia-slickgrid

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Aurelia-Slickgrid

License: MIT TypeScript NPM downloads npm version

Actions Status Cypress.io jest codecov

Description

One of the best JavasSript datagrid SlickGrid, which was originally developed by @mleibman, is now available to Aurelia. SlickGrid beats most other datagrids in terms of features, customizability and performance (it can easily deal with even a million row). Angular-Slickgrid is a wrapper on top of SlickGrid and we are using the 6pac/SlickGrid fork which is the most active one since the original one was put on pause by its original author for personal reasons. Also worth to know, that I also contributed a lot to the 6pac/SlickGrid fork over the years for the benefit of all the SlickGrid libraries that I maintain including this one here... SlickGrid was recently refactored to be browser native, which means that jQuery is no longer required in Aurelia-Slickgrid v6.0 and higher.

Installation

Refer to the Wiki - HOWTO Step by Step and/or clone the Aurelia-Slickgrid Demos repository. Please review all Wikis before opening any new issue, also consider asking installation and/or general questions on Stack Overflow unless you think there's a bug with the library.

npm install aurelia-slickgrid

Install any optional Slickgrid-Universal dependencies, for example Excel Export

npm install @slickgrid-universal/excel-export

Versions Compatibility

For a full compatibility table of Aurelia-Slickgrid with Slickgrid-Universal, you can consult the Versions Compatibility Table - Wiki

Demo page

Aurelia-Slickgrid works with all Bootstrap versions, you can see a demo of each one below. There are also extra styling themes for not just Bootstrap but also Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the Wiki - SVG Icons

There are also 2 new Themes, Material & Salesforce that are available as well and if you wish to use SVG then take a look at the Wiki - SVG Icons.

Working Demos

For a complete set of working demos (over 30 examples), we strongly suggest you to clone the Aurelia-Slickgrid Demos repository (instructions are provided in the demo repo). The repo provides multiple demos and they are updated every time a new version is out, so it is updated frequently and is also used as the GitHub live demo page for both the Bootstrap 5 demo and Bootstrap 4 demo.

For a complete working set of demos, you can clone the Aurelia-Slickgrid Demos repository (instructions are provided in the demo repo). This repo provides multiple samples (RequireJS, WebPack, CLI, ...) and it is also worth to know that the 2 WebPacks demos are updated frequently since they are the actual live GitHub Bootstrap 4 demo / Bootstrap 5 demo.

License

MIT License

Like it? ⭐ it

You like and use Aurelia-Slickgrid? Be sure to upvote ⭐ and feel free to contribute. 👷

Like my work?

You could ⭐ the lib and maybe support me with cafeine ☕. Thanks.

Buy Me a Coffee at ko-fi.com

Wiki / Documentation

The Wikis is where you'll find all the documentation and instructions for the lib, so please consult the Aurelia-Slickgrid - Wiki before opening any new issue. The Wiki - HOWTO is a great place to start with.

Latest News & Releases

Check out the Releases section for all latest News & Releases.

Fully Tested with Jest (Unit Tests) - Cypress (E2E tests)

Aurelia-Slickgrid has 100% Unit Test Coverage, we are talking of 15,000+ lines of code (3,750+ unit tests, most of these tests were moved into Slickgrid-Universal) fully tested with Jest. On the UI side, all Aurelia-Slickgrid Example are tested with Cypress, there are over 550+ Cypress E2E tests.

Usage

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

You might have noticed 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 a FetchClient or Http-Client? 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.

Main features

You can see a few screenshots below to demo some of the lib features as well as instructions underneath them and if that is not enough to convince you then head over to the Wiki - Main Features.

Missing features

What if Aurelia-Slickgrid is missing feature(s) compare to the original core library 6pac/SlickGrid?

Fear not, you can simply reference the SlickGrid and DataView objects, just like in the core lib (they are exposed through Custom Events). 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.

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

Composite Editor Modal Windows

Composite Editor Modal