Skeptic To Believer | How I Fell In Love with ag-Grid

Amit Moryossef
Feb 15, 2017 · 5 min read

The Beginning

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’

Naive

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

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:

Early Issues

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:

Love

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.


The latest update of the grid is out now. Learn more about Version 17 Thomas.

ag-Grid

We are ag-Grid and our mission is to build the best datagrid in the world

Amit Moryossef

Written by

MSc in Computer Science student at BIU 👨‍🎓

ag-Grid

ag-Grid

We are ag-Grid and our mission is to build the best datagrid in the world

More From Medium

Also tagged Javascript Frameworks

Also tagged Javascript Frameworks

9 Top JS Gaming Engines and Libraries for 2020

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade