This post contributed to the AG Grid blog by Melissa McEwen
When it comes to implementing a data grid component in a web application, one of the toughest decisions is which component to use. You can build the data grid component yourself or choose to go with one of the many existing third-party data grid components like AG Grid.
For most projects, a third-party data grid component beats building a data grid yourself. Going with a third-party solution saves your team many months of planning, development, and testing. Furthermore, third-party grid components offer the best long-term support from professional data grid developers, eliminating the need to maintain your own data grid team. Finally, for a growing business, a third-party data grid lets you scale without worrying about whether your custom code can keep up.
In this article, you’ll learn more about when it’s appropriate to build your own grid and the pros and cons of doing so. Then, you’ll explore the reasons why using a third-party grid like AG Grid may be a better choice.
The Difficulties of Building Your Own Data Grid Component
If your data grid has very simple requirements, it may seem faster to build it yourself; modern web APIs have made creating your own data grid easier than ever. Developers have even managed to build impressive data grids with just a basic table HTML element. However, if your needs go beyond the basics, you face the challenge of building complex data grid features that may add weeks or even months to your development timeline.
A homespun data grid might be fine for a small personal project, but for business requirements, it’s far more complex. Building the data grid requires not only developer time but also efforts in design, testing, documentation, DevOps, and management. A study by Harvard Business Review found that the average IT project overruns time estimates by 27 percent, with one in ten projects having an overrun of 70 percent.
Estimating time for software projects is notoriously difficult, but examining open source projects and tutorials provides a few approximations. This tutorial for building a basic data grid from scratch with React is about four hours long. The features include sorting, searching, pagination, reordering columns, and filtering. What about difficult features like pivot tables? This open source library for data grid pivot tables has around seventeen thousand lines of code and took the lead developer many years to build.
Furthermore, while your feature needs might be simple in the beginning, what happens when you need more? Prisma, a major ORM for Node.js, actually started by building their own data grid component in React. However, as their functionality grew, they realized a third-party solution would save time, so they ultimately ended up going with AG Grid.
Unless your requirements are simple, building a data grid component is a complex task with unpredictable timelines. There’s no need to reinvent the wheel—go with a third-party data option if you want to ensure efficiency and a straightforward development process.
DIY Data Grids Might Be More Expensive Than You Expect
Building your own data grid might also seem like the cheapest solution; after all, you don’t need to buy anything.
However, there are many open source data grid components that you can get started with for free. With web application elements like a data grid component, it’s not a traditional debate of build vs. buy. For example, AG Grid offers an open source, free community edition that can be used in commercial projects. In fact, that’s what Prisma chose after outgrowing their homespun solution.
If you find yourself in need of the more powerful features of AG Grid Enterprise, a paid product, it’s available and fully supported. It’s also important to consider that even a paid product may be cheaper when you factor in opportunity cost. Every hour your team spends on making your own data grid component is an hour they could be spending on something else. How much are your software devs worth per hour?
The costs don’t end when you finish building your own data grid component, even if you never add another feature. Fixing bugs and keeping the software up-to-date will keep your team busy for years. Imagine if a browser update breaks your data grid and your team has to drop all its other projects to fix it.
Business consultant Robert Sher wrote in Harvard Business Review, “Software breaks down all the time. Hackers continually find new attack vectors. New needs pop up and users demand modifications. Even programming languages age, so every five to 10 years, software may need to be rewritten. The costs keep coming.” Furthermore, an analysis of 1857 applications by security consultancy Contrast Labs found that custom code accounted for 93 percent of all vulnerabilities found. The long-term costs are unpredictable, which can be much worse for your business compared to the predictable costs of an enterprise premium grid.
Proof Trading, a startup with the goal to revolutionize equity trading, chose to go with AG Grid for that very reason. CTO Prerak Sanghvi wrote on the company’s blog, “AG Grid is not free, but it is affordable even for a startup like us.” The decision to use AG Grid gave his team more time to focus on what makes their own product unique and valuable.
Third-Party Data Grids Offer Unparalleled Flexibility
While searching for a data grid solution, you may see many data grid components that don’t meet your visual, user experience, or feature needs. You might think that building it yourself is the only answer. But the truth is that most third-party solutions are extremely customizable.
AG Grid features many ways to customize every single little detail. Prisma found that AG Grid’s customizability allowed them to implement their own design and user-experience vision. The Prisma team customized the grid with their own cell renderers and editors, headers, and dark/light theme. Prisma also liked that they could use AG Grid with their preferred state-management solution, MobX.
Proof Trading also used AG Grid’s features to meet their unique needs. As CTO Prerak Sanghvi and Designer/Developer Han Dong put it, “AG Grid hands over the tools and lets the developer figure things out.” Proof uses the AG Grid APIs to power customizations such as conditional formatting per view. You can read more about Proof Trading’s customizations in Sanghvi’s blog post “Proof Engineering: The Algorithmic Trading Platform.”
AG Grid even offers tailored documentation for major frameworks such as React, Angular, and Vue, as well as vanilla JavaScript.
For React, AG Grid’s React cell renderers not only provide customizability but also work seamlessly with React components. This makes it easier for React developers to learn, and even to reuse the code if they happen to choose another data grid library.
Choosing a third-party data grid component doesn’t mean sacrificing flexibility. The APIs and documentation of a good third-party data grid component can actually empower your team to implement their vision without having to worry about building an entire data grid from scratch.
Using a Third Party Data Grid Sets Your Product Up for Long-Term Success
When it comes to the long term, a third-party grid offers huge advantages in sustainability and reliability. Custom code written from scratch can be very difficult to maintain. In comparison, third-party data grid components like AG Grid have the backing of a full-time team that produces bug fixes, updates, and documentation so you don’t have to.
Adobe CTO Wouter Van Geluwe wrote in a blog post titled “When to Build vs. Buy Enterprise Platform: Risks, Benefits, and Considerations,” “It’s unsettlingly common for companies to be left with unusable code bases created by developers who no longer work at the company, adding an ongoing maintenance cost of hiring new developers to rebuild the codebase from scratch.”
Is a grid part of your business value? If so, it might make sense to spend the substantial time and money required to develop your own dedicated team. Otherwise, it may make more sense to choose a product that already has a team with deep expertise.
AG Grid has not only a development team devoted to their data grid product but also a full-time support team. Proof Trading said they contacted support a few times for technical topics and general design and found the team responsive and very knowledgeable.
Another advantage in choosing a third-party data grid component is professionally produced documentation. Proof Trading saw the documentation of AG Grid as a big selling point, allowing their developers to get started quickly and helping them build through examples.
With a third-party data grid component, you don’t have to shoulder the burden of updates and bug fixes yourself. The Prisma team says they haven’t touched AG Grid’s basic setup in nearly two years, and “it continues to just work.”
The other bonus to a third-party data grid component is the developer ecosystem surrounding it. For example, Adaptable Tools is an extension library offering additional features like configurable dashboards and alerts for data changes.
For long-term success, a third-party data grid component with its own team behind it will leave you with more support, better development experience, and less time and energy spent on updates.
Third-Party Data Grids Enable Scaling
A home-rolled grid might work well for one hundred or even ten thousand rows, but what happens when you get to one hundred thousand or even a million rows? A DIY data grid component will struggle to handle large amounts of data, if it even loads at all. Many times, when confronted with a massive amount of data in the DOM, browsers just freeze or crash.
In contrast, professionally produced third-party data grid components like AG Grid can handle massive data sets with ease. Proof Trading found that many other grids couldn’t handle their five hundred thousand rows, but AG Grid could.
AG Grid has built-in row virtualization, meaning it only adds rows that are displayed to the DOM. The rest are maintained in memory and only added to the DOM when needed. Perhaps you work with a truly massive amount of data. AG Grid Enterprise has a solution for that too—their server-side row models pull data from the server only as required. Such a high-performance feature would be costly to build in-house.
Growing businesses means growing data sets. If you want to be able to add data without worries, choose a third-party data grid like AG Grid, which was built to perform just as well with a million rows as it does with ten.
A Third Party Data Grid Component Is the Best Choice
When it comes to data grids, going with a third party gives you a customizable, flexible, and affordable solution that saves your team time and sets you up for long-term success. With few exceptions, a third-party data grid component is the way to go.
If you’re looking for a high-performance third-party data grid component that 'just works' out of the box, with a full team’s expertise behind it, check out our own product, AG Grid. With the Community Edition, you can try it for free and rapidly prototype your data grid, enabling you to get feedback and deliver your product faster. There’s nothing to lose.
If you don't need to be up and running immediately, and are prepared to spend some time building the Data Grid GUI then check out the headless Tanstack Table. We have a comparison blog post that shows the difference in implementation to write for AG Grid and Tanstack Table with examples implemented using Storybook.