One of the best JavasSript data grid SlickGrid, which was originally developed by @mleibman, is now available to the Aurelia world. SlickGrid beats most other data grids in terms of features, customizability & performance (running smoothly with even a million rows). Aurelia-Slickgrid is a wrapper on top of Slickgrid-Universal (which is a dependency), in the early beginning we used the 6pac/SlickGrid fork but that was dropped in >=v7.0 since Slickgrid-Universal is now a standalone project. SlickGrid was also recently rewritten with browser native code (no more jQuery 🎉).
📕 Documentation website powered by GitBook for version 7+ (or use the Wikis for older versions).
Available in Stackblitz (Codeflow) below, this can also be used to provide an issue repro.
Refer to the Docs - Quick Start and/or clone the Aurelia-Slickgrid Demos repository. Please review the Documentation website 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-slickgridInstall any optional Slickgrid-Universal dependencies, for example Excel Export
npm install @slickgrid-universal/excel-exportNote please be aware that only the latest major version of Aurelia-Slickgrid will be supported and receive bug fixes (it's already a lot of work to maintain for a single developer like me).
| Aurelia-Slickgrid | Aurelia version | Migration Guide | Notes |
|---|---|---|---|
| 8.x | Aurelia 2 | Migration 8.x | modern UI / Dark Mode, requires Slickgrid-Universal 5.x |
| 7.x | Aurelia 2 | Migration 7.x | merge SlickGrid into Slickgrid-Universal, requires Slickgrid-Universal 4.x |
| 6.x | 1.x | Migration 6.x | removal of jQuery (now uses browser native code), requires Slickgrid-Universal 3.x |
| 5.x | 1.x | Migration 5.x | removal of jQueryUI, requires Slickgrid-Universal 2.x version |
For a full compatibility table of all Aurelia-Slickgrid versions with Slickgrid-Universal, please refer to the Versions Compatibility Table - Wiki
Multiple styling themes are available
- Default (UI agnostic)
- Bootstrap (see all Aurelia-Slickgrid live demos)
- Material (see Slickgrid-Universal)
- Salesforce (see Slickgrid-Universal)
Also note that all of these themes also have a Dark Theme equivalent and even though Bootstrap is often used for live demos, it does work as well with any other UI framework like Bulma, Material, ...
Aurelia-Slickgrid works with all Bootstrap versions, you can see a demo of each one below. It also works well with any other frameworks like Material or Bulma and there are also couple of extra styling themes based on Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the Docs - 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 Docs - SVG Icons.
For a complete set of working demos (40+ examples), we strongly suggest you to clone the Aurelia-Slickgrid Demos repository (instructions are provided inside it). The repo provides multiple examples which are updated for every new release, so it is updated frequently and is also the GitHub live demo page for both the Bootstrap 5 demo and Bootstrap 5 demo (single Locale).
You like and use Aurelia-Slickgrid? Be sure to upvote ⭐ and feel free to contribute.
You could ⭐ the lib and maybe support me with caffeine ☕ or GitHub sponsoring. Thanks.
Check out the Releases section for all latest News & Releases.
Slickgrid-Universal has 100% Unit Test Coverage and all Aurelia-Slickgrid Examples are tested with Cypress as E2E tests.
import { type Column, type GridOption } from 'aurelia-slickgrid';
export class Example {
columnDefinitions: Column[] = [];
gridOptions: GridOption;
dataset: any[] = [];
constructor() {
this.columnDefinitions = [
{ id: 'firstName', name: 'First Name', field: 'firstName', sortable: true },
{ id: 'lastName', name: 'Last Name', field: 'lastName', sortable: true },
{ id: 'age', name: 'Age', field: 'age', type: 'number', sortable: true }
];
}
attached() {
this.dataset = [
{ id: 1, firstName: 'John', lastName: 'Doe', age: 20 },
{ id: 2, firstName: 'Jane', lastName: 'Smith', age: 21 }
];
this.gridOptions = { /*...*/ }; // optional grid options
}
}<aurelia-slickgrid
grid-id="grid2"
column-definitions.bind="columnDefinitions"
grid-options.bind="gridOptions"
dataset.bind="dataset">
</aurelia-slickgrid>Thanks to all my sponsors!
