Blog Post 2019 - ghiscoding/aurelia-slickgrid GitHub Wiki

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 hope of helping the Aurelia community to grow, and today I will talk about Aurelia-Slickgrid.

It's basically a data grid and it's a wrapper on top of 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 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.

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 Aurelia 2+ (sadly not Aurelia) but we quickly realized that there was not much free open source data grid 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 and 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 functionalities. A lot of the features were added by some of our projects requirement, and some of them were demanded by the community. The goal of this library was always to make it as easy as possible while being a versatile library.

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.

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 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

<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>

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
    };    
  }
}

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
• fully 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

1. loop through all column and add an <input> to filter the data
2. bind a keyup event to each input
3. and finally when the keyup event occurs, we 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 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 were added over time, and what is currently in the work is the ability to open a Context Menu from the grid or a cell. Also another great and recent was the Excel Export feature.

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 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 pinned (frozen) column/row feature.

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.

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.

I've been developing Aurelia-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 100% test coverage in Aurelia-Slickgrid 🚀.

• 100% test coverage
• 150 files tested
• ~8500 lines of code tested
• ~2300 unit tests
• a few Cypress E2E tests but the bulk are Jest Unit Tests

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

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, Aurelia-Slickgrid has (166) ⭐ while Aurelia-Slickgrid (60) ⭐. I would be happy to get more interest and usage on the Aurelia side 😉

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