DEV Community

Sarthak Chhabra
Sarthak Chhabra

Posted on

My 1st Experience with AG Grid

I recently shared my first experience with creating a CRUD application from scratch. I used a CSS grid to design a visually appealing card-based view that showcased the data.
(you can see it here: https://dev.to/sarthak_chhabra_123/building-my-first-crud-app-for-marvel-database-from-scratch-4hn9)

While working more on that project I faced a challenge in implementing search and filter features, so I came up with a solution to create a tabular view for easier navigation, filtering, and organising data
While it seems there are a ton of tools to choose from , AG Grid kept coming up everywhere, so I decided to give it a shot.
My main goal was to convert a JSON file containing data into a tabular format with search, filter, and sorting options—all while keeping the setup as simple and efficient as possible.
Setting Up AG Grid with Sample Data to understand its working :
Here’s how I got AG Grid up and running:

  1. Created a Grid.js file for a modular setup.
  2. Defined columnDefs with properties such as field, headerName, width, and editable.
  3. Managed API responses using useState() and useEffect().
  4. Used onGridReady() to store references to the grid and column API for future use.
  5. Mounted the App component in index.tsx using ReactDOM.render(). Index.tsx file (you can see it here: Git Hub link)

What I achieved:

  1. Successfully converted JSON data into a functional table with AG Grid.
  2. Optimized data display view into a tabular format.
  3. Improved data organization and accessibility for better user interaction.
  4. Gained hands-on experience with AG Grid’s API and customization options.

Features I Loved:

  1. Custom cell rendering – allowed me to use my components inside cells.
  2. Column & row visualization – made structuring large datasets easier.
  3. vPre-applied themes & styling** – looked good and easy to understand.
  4. Multi-framework support – works with React, Angular, and Vanilla JavaScript. Table view

Roadblocks I Hit:

  1. Some features are locked behind a paid license on the enterprise version.
  2. The documentation was tough to understand at times.
  3. It will take time to grasp and use it effectively in projects fully.

While troubleshooting these issues, I realised I wasn’t alone. I found Reddit discussions (screenshots attached) where many developers shared similar struggles with AG Grid.

Image comnt 1

Image comnt 2

Image comnt 3

I’d love to hear your thoughts! Since this is my first project using AG Grid, I might have missed something or taken a longer route. Do you have any better solutions or AI-powered approaches Let’s discuss!

Top comments (0)