Aurelia SlickGrid

Today, I'm pleased to introduce Ghislain, a member of the Aurelia community who has been working on a fantastic data grid for Aurelia. Read on to learn more about his open source work.

Quick Introduction

Hello, I'm Ghislain B. I live in Montreal Quebec in Canada, which is a French-speaking province, and I speak both French and English almost every day (more on that later). I use Aurelia mainly for all my personal projects. I also wrote a couple of plugins/libraries for Aurelia in the hope of helping the Aurelia community to grow. Today I'll be talking about Aurelia-Slickgrid.

What is Aurelia-Slickgrid?

Aurelia-Slickgrid is basically a data grid that's a wrapper around the popular SlickGrid jQuery library (which has been around for well over 10 years). You might have heard about Ag-Grid . Well, they got a big chunk of their ideas from SlickGrid itself when they started their library. Aurelia-Slickgrid offers a lot of the functionality that Ag-Grid offers, except that it's totally open source and all features are available from the start. There's no Pro version; it's all in.

SlickGrid itself is described as A lightning fast JavaScript grid/spreadsheet. It uses virtual rendering that makes it an extremely fast data grid. It can easily work with even a million rows without sweating. Virtual rendering will basically render only what is visible on the screen. When a user starts scrolling up or down, it will render the necessary rows at that time. This allows for a much smaller DOM tree and extremely fast rendering.

Little bit of History

At my work, nearly every project/application requires a data grid for the business. We used SlickGrid a few years ago with plain jQuery (good old days), then we used UI-Grid , and finally upgraded to Angular 2+ (sadly not Aurelia) but we quickly realized that there were not many free open source data grids available. That was also true for Aurelia. You might think that there are some libraries like Ag-Grid and KendoUI that can do the job, but in reality their best features require licensing and can become quite expensive; our budget was (you can guess) near zero.

So, we decided at the time that I spend a few days just to find out if it was possible to use SlickGrid (a jQuery library) as a wrapper for our project. After a couple weeks of playing around, I had something working for both frameworks. Fast-forward to today and both libraries are well alive with lots of users across the globe and they are both aligned in terms of functionality. A lot of the features were added by some of our project's requirements, and some of them were requested by the community. The goal of this library was always to make it as easy as possible while being highly versatile.

Demos

To give you an idea of what the grid can do, you can start by taking a look at the Bootstrap 3 or Bootstrap 4 demos (they both include various grid examples, 23 of them).

You can also clone the aurelia-slickgrid-demos repo. It has demos for almost all bundlers (RequireJS, SystemJS, and WebPack) and it works with TypeScript and/or regular JavaScript. A good place to start with is the HOWTO - Step by Step Wiki. It has step by step instructions on how to get started with Aurelia-Slickgrid.

Basic Usage

At the core, Aurelia-Slickgrid is a data grid which requires the following 3 basic properties:

column-definitions which define each column's options, its associated field, width, etc.
grid-options which define what the grid can do, for example options = { enableSorting: true }
dataset which is the array of data that you will pass to the grid

The most basic grid can be written with the following:

View

    
  <template>
    <aurelia-slickgrid grid-id="grid1"
                       column-definitions.bind="columnDefinitions"
                       grid-options.bind="gridOptions"
                       dataset.bind="dataset"
                       grid-height="300"
                       grid-width="800">
    </aurelia-slickgrid>
  </template>

ViewModel

    
  import { Column, GridOption } from 'aurelia-slickgrid';
  
  export class GridBasicComponent {
    columnDefinitions: Column[];
    gridOptions: GridOption;
    dataset: any[] = [];
  
    constructor() {
      this.prepareGrid();
    }
  
    attached() {
      this.dataset = [ /** ...your data... **/ ];
    }
  
    prepareGrid() {
      this.columnDefinitions = [
        { id: 'title', name: 'Title', field: 'title', sortable: true },
        { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true },
        { id: '%', name: '% Complete', field: 'percentComplete', sortable: true },
        { id: 'start', name: 'Start', field: 'start' },
        { id: 'finish', name: 'Finish', field: 'finish' },
      ];
  
      this.gridOptions = {
        enableSorting: true
      };    
    }
  }

Some Features

Alright, so is Aurelia-Slickgrid just a simple wrapper? Well, actually no. It's a lot more than that...

There are over 8,000 lines of code (excluding all TypeScript related stuff) and a lot of functionality that just doesn't exist in SlickGrid itself (or it's just harder in SlickGrid). Below are a few of the features that only exist in Aurelia-Slickgrid:

Built-in Filters & Editors
Grid Auto-Resize
OData and GraphQL Backend Services
Export to CSV, Tab-Delimited, or even to Excel (a new feature added recently)
I18N support (in Canada we have 2 official languages, so I18N is a must)
Grid State & Grid Presets (allows to save the state of a grid in Local Storage then reload it with Grid Presets)
Bootstrap theme (you could create a custom theme, there are over 300+ SASS variables)
Written in TypeScript
Full suite of unit tests
And a lot more... For an exhaustive list of all the features implemented, see this closed tracking issue

A good example of what is really easy to implement in Aurelia-Slickgrid, but requires quite a few lines of code in SlickGrid, are the Filters (Editors follow the same concept) that can be added to the grid on top of each column. The steps to do that in SlickGrid are the following:

Loop through all columns and add an <input> to filter the data.
Bind a keyup event to each input.
Finally, when the keyup event occurs, filter the dataset and refresh the grid.

However, in Aurelia-Slickgrid, you do this with one line of code, simply by updating your column definitions with the following:

    
  this.columnDefinitions = [
    { id: 'description', field: 'description', filterable: true, filter: { model: Filters.input } }
  ];

I've added over 10 different Filters that you can use (input, singleSelect, multipleSelect, compoundDate, dateRange, slider, sliderRange, ...). Also in that list are what I call the Compound Filters. They combine an extra dropdown which allows you to choose an operator (>, >=, <, <=, ...) with a Filter, so it's like a 2 in 1 Filter which can be useful with a date picker or a number filter.

The library is constantly evolving and lots of features have been added over time. Currently in the works is the ability to open a Context Menu from the grid or one of its cells. Also, another great and recent addition is the Excel Export feature.

SlickGrid Plugins

SlickGrid is very customizable, and over the years a few plugins were created to add extra functionality without affecting the core library. They are just external plugins that you can use with SlickGrid, some created by the author himself and some created by other users. You can see the full list here . A few examples are Cell Range Selector, Row Selection, Draggable Grouping, Header Menu, Grid Menu, Row Detail, etc. All of these plugins are available within Aurelia-Slickgrid and are easily accessible by enabling a simple flag (some plugins require a bit more setup). For example, if you want to use the Grid Menu, just set enableGridMenu: true in your Grid Options and you're good to go; Aurelia-Slickgrid will internally do all the necessary setup for you.

Also, note that I am a major contributor to the SlickGrid core library. While developing Aurelia-Slickgrid, I found and fixed a few issues in the core library and even created some of these plugins. For example, I created the Grid Menu plugin because I needed one and I also contributed to the Row Detail plugin and helped in merging the code for the pinned (frozen) column/row feature.

Contributions

Since I created the library, I've had a few contributions and one major contributor Jeremy (@jmzagorski) who helped me with a few features and also to add some standards in the library. For example, Jeremy introduced me to the Conventional Commits combined with conventional-changelog-cli, which Aurelia itself also uses. This helps a lot when pushing new versions. With one simple command, it pushes a new version on GitHub, updates the changelog, and produces a clean and standardized changelog with all the commits that I then copy over to all Aurelia-Slickgrid releases .

Technologies Used by the library

Some of the technologies and/or standards that Aurelia-Slickgrid uses are as follows:

Conventional Commits combined with conventional-changelog-cli
SASS and node-sass for custom styling and theme (over 300+ SASS variables available)
TypeScript and TSLint to have cleaner code, typing, and intellisense
Jest for unit testing
Cypress for End to End testing (E2E)
Codecov for unit tests code coverage
CircleCI to automate build process and unit testing

Also, it's worth noting that each PR (Pull Request) runs all unit tests to ensure stability and test code coverage.

Unit Testing

I've been developing Aurelia-Slickgrid for the past 2 years and I have been constantly adding new functionality since then. I also started adding Unit Tests with Jest sometime during the Spring of this year (about 8-9 months ago). I'm also happy to share that quite recently, I reached a major milestone in the library, which is... full test coverage in Aurelia-Slickgrid !

Some Statistics on Testing

100% test coverage
150 files tested
About 8,500 lines of code tested
About 2,300 unit tests
A few Cypress E2E tests but the bulk are Jest Unit Tests

Documentation

I created a ton of Wiki pages to explain nearly all of the functionality and features of the library. A good starting point is the HOWTO - Step by Step Wiki, which will get you started in minutes.

Sponsoring

Aurelia-Slickgrid is fully Open Source. I am not paid to develop it (though I had a couple of contributions, thank you!), and I probably spent thousands of hours in this great library. So, hopefully you'll find it useful. A side note: if you use this great library on commercial projects, I would be happy if you consider buying me coffee(s) via the Ko-Fi sponsor link. Thank you.

If we now compare both libraries that I support, Angular-Slickgrid has 166 stars while Aurelia-Slickgrid has 60 stars. I would be happy to get more interest and usage on the Aurelia side :)

Final Word

I'd also be curious to know if any of you are using Aurelia-Slickgrid on big projects. Perhaps more in the future, since it's now fully tested!?! Please feel free to reach out to me on Discourse about our experiences.