Blog Post 2019

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). We use Angular at work, obviously not my first choice, I still prefer Aurelia and use it on all my Personal projects. I also wrote a couple of plugins/libraries for Aurelia in hope of helping the Aurelia community to grow, and today I will talk about Aurelia-Slickgrid.

What is Aurelia-Slickgrid?

It's basically a data grid and it's a wrapper on top of the popular SlickGrid jQuery library (it 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 functionalities 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 row without sweating. A 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 an 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 moved to AngularJS with UI-Grid and finally upgraded to Angular 2+ but we quickly realized that there was not much free open source data grid available. You might think that there are some libraries like Ag-Grid and KendoUI which offer basic grid features but their best features require licensing and can become quite expensive and our budget was 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) in Angular. After a few days of playing around, Angular-Slickgrid was born and Aurelia-Slickgrid (which I had created a year earlier) was eventually rewritten to align both libraries. Fast-forward to today and both libraries are well alive with lots of users across the globe and have had 2 major versions (3 in the case of Aurelia-Slickgrid) and they are aligned in terms of functionalities. So the good thing about Angular is that, whatever feature was added to Angular-Slickgrid (for work), it was also added to Aurelia-Slickgrid and vice versa. A lot of the functionalities were added by some of our projects requirement, but also some features were demanded by the community. The goal of this library was always to make it an easy and versatile library.

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). A good place to start with is the HOWTO 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 options, it's associated field, width, etc..
• grid-options which define what the grid can do
  • for example this.gridOptions = { enableFiltering: true, 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 Aurelia-Slickgrid is just a simple wrapper then? Well actually no, it's a lot more than that... There are over 8000 lines of code (excluding all TypeScript related stuff) and a lot of functionalities just don't exist in SlickGrid itself (or it's just harder in SlickGrid), below are a few of these functionalities 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 (new feature added last month)
• 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
• has 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

1. loop through all column and add an <input> to filter the data
2. bind a keyup event to the input
3. and finally when the keyup event occurs filter the dataset and refresh the grid.

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

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

What is also nice is that I 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 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 were added over time, and what is currently in the work is to be able to Set Filters and/or Sorting dynamically (on the fly) at any point in time. This is a great addition to the already existing Grid Presets feature (which only works on first page load, hence the word Presets).

SlickGrid Plugins

SlickGrid is very customizable and over the years, a few plugins were created to add extra functionalities 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, ...). 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 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 I even created some of these plugins. For example, I created the Grid Menu plugin because I needed it and I also contributed to the Row Detail plugin and helped in merging the code for pinned (frozen) column/row feature.

Contributions

Since I created the library, I had a few contributions and 1 major contributor Jeremy (@jmzagorski) which helped me with a few functionalities and also to add some standards in the library. For example, Jeremy introduced me to the Conventional Commits combined with conventional-changelog-cli, which I think 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 follow

• 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 worth to know that each PR (Pull Request) runs all unit tests to ensure stability and test code coverage.

Unit Testing

I've been developing Aurelia-Slickgrid (and Angular-Slickgrid) for the past 2 years and I have been constantly adding new functionalities 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... a full test coverage in Aurelia-Slickgrid 🚀.

Some Statistics on Testing

• 99.6% test coverage (~30 lines are not quite testable)
• 150 files tested
• ~8000 lines of code tested
• ~2200 unit tests
• a few Cypress E2E tests but the bulk are Jest Unit Tests

Documentation

I created a ton a Wiki pages to explain most of the functionalities and features of the grid. 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 usage, Angular-Slickgrid has (166) ⭐ while Aurelia-Slickgrid (59) ⭐. 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!?!

You can reach out on Discourse

Print Screens

Slickgrid example with Formatters (the last column shown is a custom Formatter)

You can also see the Grid Menu opened (aka hamburger menu)

Filter and Sort (clientside with DataView)

Editors and/or onCellClick

Pinned (aka frozen) Columns/Rows

Draggable Grouping & Aggregators

Slickgrid Example with Server Side (Filter/Sort/Pagination)

Comes with OData & GraphQL support (you can implement custom too)