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:
- Created a Grid.js file for a modular setup.
- Defined columnDefs with properties such as field, headerName, width, and editable.
- Managed API responses using useState() and useEffect().
- Used onGridReady() to store references to the grid and column API for future use.
- Mounted the App component in index.tsx using ReactDOM.render().
(you can see it here: Git Hub link)
What I achieved:
- Successfully converted JSON data into a functional table with AG Grid.
- Optimized data display view into a tabular format.
- Improved data organization and accessibility for better user interaction.
- Gained hands-on experience with AG Grid’s API and customization options.
Features I Loved:
- Custom cell rendering – allowed me to use my components inside cells.
- Column & row visualization – made structuring large datasets easier.
- vPre-applied themes & styling** – looked good and easy to understand.
-
Multi-framework support – works with React, Angular, and Vanilla JavaScript.
Roadblocks I Hit:
- Some features are locked behind a paid license on the enterprise version.
- The documentation was tough to understand at times.
- 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.
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)