aurelia-slickgrid

Aurelia-Slickgrid

Brief introduction

Aurelia-SlickGrid is a custom component created specifically for Aurelia framework, it is a wrapper on top of Slickgrid-Universal library which contains the core functionalities. Slickgrid-Universal is written with TypeScript in browser native code, it is framework agnostic and is a monorepo that includes all Editors, Filters, Extensions and Services related to SlickGrid usage with also a few optional packages (like GraphQL, OData, Export to Excel, ...).

Documentation

📕 Documentation website powered by GitBook.

Installation

Available in Stackblitz 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-slickgrid

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

npm install @slickgrid-universal/excel-export

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 Docs - SVG Icons

• Bootstrap 4 demo / examples repo
• Bootstrap 5 demo / examples repo

License

MIT License

Basic Grid

import { type Column, type GridOption } from 'aurelia-slickgrid';

interface User {
  firstName: string;
  lastName: string;
  age: number;
}

export class Example {
  columnDefinitions: Column[] = []; // it could also be `Column<User>[]`
  gridOptions: GridOption;
  dataset: User[] = [];

  constructor() {
    this.columnDefinitions = [
      { id: 'firstName', name: 'First Name', field: 'firstName'},
      { id: 'lastName', name: 'Last Name', field: 'lastName'},
      { id: 'age', name: 'Age', field: 'age' }
    ];
  }

  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"
  columns.bind="columnDefinitions"
  options.bind="gridOptions"
  dataset.bind="dataset">
</aurelia-slickgrid>

Like it? ⭐ it

You like Slickgrid-Vue? Be sure to upvote ⭐ the project, and perhaps support me with caffeine ☕ or sponsor me on GitHub. Any contributions are also very welcome. Thanks

Versions Compatibility

Note 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
9.x	Aurelia 2	Migration 9.x	ESM-Only, requires Slickgrid-Universal 9.x version
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

Changelog

9.9.0 (2025-09-20)

Features

• add htmlDecode (true) to ExcelExportOption to HTML Decode data (#2148) (0d6d10c) - by @ghiscoding
• add second css property to RangeDecorator plugin (#2133) (c7bfc16) - by @ghiscoding

Bug Fixes

• add missing grid option to skipFreezeColumnValidation (#2147) (890a76c) - by @ghiscoding
• column header reorder should keep scroll position even frozen grid (#2156) (d0464b0) - by @ghiscoding
• Compound Input Operator w/o SearchVal shouldn't start filtering (#2164) (dd921de) - by @ghiscoding
• deps: update all non-major dependencies (#2126) (3654051) - by @renovate-bot
• deps: update all non-major dependencies (#2151) (36e1b83) - by @renovate-bot
• LongText Editors should always show and also show gray w/disabled (#2141) (7057911) - by @ghiscoding
• make Row Detail plugin work with Grouping (#2165) (af51395) - by @ghiscoding
• never hide Editors.longText in Composite Editor modal (#2144) (43f0318) - by @ghiscoding
• never hide Editors.longText in Composite Editor modal (9a31cf3) - by @ghiscoding
• rollback to previous column freeze when new freeze index is invalid (#2130) (1af82fc) - by @ghiscoding
• Salesforce resize should only recalc when tab or window changed (#2157) (e584b44) - by @ghiscoding
• Salesforce resize should only recalc when window size changed (#2155) (008e52b) - by @ghiscoding
• show an alert to user when trying to freeze wider than viewport (#2129) (077168a) - by @ghiscoding
• validate allowed frozen column only when setting grid options (#2139) (9d74f01) - by @ghiscoding
• validate allowed frozen column or alert when setting option (#2145) (f550a99) - by @ghiscoding
• validate to always have 1 or more column on right freeze section (#2154) (cacfb70) - by @ghiscoding
• vue: Row Detail in Vue shouldn't re-render same html twice (#2166) (94a51c7) - by @ghiscoding