The Beginning

In the fall of 2015, I started working for a company who just started using AngularJS 1.x, to continue the development of a CRM (Customer Relationship Management) system.

As with every management system, we needed to choose a grid to show our data and my predecessor had already used two grids inside the app — ag-Grid (v2.7) and Ng-Table (v0.8.3) — and I passionately hated the former. In retrospect, I realise I only hated it because of my predecessor’s lack of knowledge of AngularJS 1.x and of ag-Grid. And so was born The Grid Project.

‘I was young and stupid’

The Grid Project had a single goal: To make a grid to replace all my grids and to make it awesome. As with most developers who like something and want to work with it for their own usage, I forked Ng-Table, and extended that grid with many features I needed, at that time. Not thinking about the future, not even considering it as a big project, but boy I was wrong. I created this bug filled monster that instead of solving The Grid Project, just added lots of monkey-patches to my code base. I was young and stupid.

New Goal

So the goal changed. I needed to look for the best grid for everyone — that has options for every user and use case — to replace with all my grids. I reviewed multiple grid projects for AngularJS 1.x, none as active as ag-Grid, and when I casually followed a link chain, I landed on the ag-Grid example page. My predecessor was doing it all wrong! I promptly checked the source code and found out that ag-Grid has a column definition field with everything that I really needed. This comes along with sorting, filtering, pinning and -most importantly — grouping, aggregation and the ability to have as many rows as I want. I am a really proud developer, so it was hard to accept that I was wrong, but when I finally accepted it, my life became so much easier, thanks to ag-Grid.

My journey:

I just couldn’t stop using it. I used this grid for so many things. I decided that after my failed attempt forking the prior grid, I would not do the same for this one, and instead I created an angular directive that managed the extra stuff I needed for the grid.

I added user preferences for column sizes, columns order, pinning, grouping and sorting. These were remembered in browser storage. I added views, so you could work on the same grid several times but with a different customised look for every one of them, and one time I went as far as dumping the client’s database to the user (around 150K rows and 150 properties) and created a customised reports generator. Every kind of administrator on the system could now just create reports with the data relevant to them, and save the configuration for future uses, and it saved me around 30 minutes a day to create some made up report for some division in the company. Success.

Later, I added my own data virtualization (before it was refactored on ag-Grid) and enjoyed some cool things the grid’s API has to offer. When that was done, development of that CRM was swift. Every new page had at least one table, with adding/editing/deleting for rows, which I just controlled programmatically with the switch of a Boolean. Life was awesome and I can’t thank this grid enough.

The problems along the way:

In the beginning of my usage of this grid, I mostly relied on the main example’s source code. For anything that was not there and I didn’t know what to do, I used the forum for my questions and GitHub for my issues.

Not long after, I realised that there is documentation so I read it — several times — to the point where I started answering other people’s problems. I also began opening my own issues but now they had real merit.

As of today, I have opened 26 issues with the grid (23 closed) and 6 issues with the enterprise version (all closed). I found that these were professionally handled by the ag-Grid team.

Outcome:

So I fell in love with this grid. It is awesome and it was there for me at the right time. I knew I messed up before, I stopped and realised I needed to change things. Now I couldn’t be happier with it.

I am often asked by web development beginners that I know “Do you know data-tables?” or “Do you know smart-table?”. Even “Do you know “INSERT_GRID_NAME_HERE? It’s superior to anything else!”. Now, educated and experienced with data grids for JavaScript in general, and AngularJS 1.x in particular, I just laugh and teach them about ag-Grid. ag-Grid gives the foundations to make everything you want to make, and that is a winner for me.

Learn more about AG Grid — high performance JavaScript Data Grid. We write the code to visualise data in interactive tables so you can concentrate on writing the application code. We support multiple frameworks: Angular, Vue, React so you can pick the best framework for your needs.