VOOZH about

URL: https://thenewstack.io/a-react-based-open-source-tool-for-creating-data-tables/

⇱ A React-Based Open Source Tool for Creating Data Tables - The New Stack


TNS
SUBSCRIBE
Join our community of software engineering leaders and aspirational developers. Always stay in-the-know by getting the most important news and exclusive content delivered fresh to your inbox to learn more about at-scale software development.
REQUIRED
It seems that you've previously unsubscribed from our newsletter in the past. Click the button below to open the re-subscribe form in a new tab. When you're done, simply close that tab and continue with this form to complete your subscription.
The New Stack does not sell your information or share it with unaffiliated third parties. By continuing, you agree to our Terms of Use and Privacy Policy.
Welcome and thank you for joining The New Stack community!
Please answer a few simple questions to help us deliver the news and resources you are interested in.
REQUIRED
REQUIRED
REQUIRED
REQUIRED
REQUIRED
Great to meet you!
Tell us a bit about your job so we can cover the topics you find most relevant.
REQUIRED
REQUIRED
REQUIRED
REQUIRED
REQUIRED
Welcome!

We’re so glad you’re here. You can expect all the best TNS content to arrive Monday through Friday to keep you on top of the news and at the top of your game.

What’s next?

Check your inbox for a confirmation email where you can adjust your preferences and even join additional groups.

Follow TNS on your favorite social media networks.

Become a TNS follower on LinkedIn.

Check out the latest featured and trending stories while you wait for your first TNS newsletter.

PREV
1 of 2
NEXT
VOXPOP
As a JavaScript developer, what non-React tools do you use most often?
Angular
0%
Astro
0%
Svelte
0%
Vue.js
0%
Other
0%
I only use React
0%
I don't use JavaScript
0%
Thanks for your opinion! Subscribe below to get the final results, published exclusively in our TNS Update newsletter:
NEW! Try Stackie AI
From clobbered drafts to real-time sync
Apr 14th 2026 10:00am, by David Moore
TypeScript 6.0 RC arrives as a bridge to a faster future
Mar 14th 2026 9:00am, by Darryl K. Taft
Mastra empowers web devs to build AI agents in TypeScript
Jan 28th 2026 11:00am, by Loraine Lawson
2024-11-21 05:00:58
A React-Based Open Source Tool for Creating Data Tables
Data / Developer tools / Frontend Development / JavaScript

A React-Based Open Source Tool for Creating Data Tables

A look at AG Grid, a JavaScript data grid library used to build interactive and sophisticated data tables or grids in web applications.
Nov 21st, 2024 5:00am by Loraine Lawson
👁 Featued image for: A React-Based Open Source Tool for Creating Data Tables
Photo by Yashowardhan Singh on Unsplash.

AG Grid‘s developer relations lead, James Swinton-Bland, doesn’t see TanStack Table as a competitor. TanStack Table is an open source library for creating tables in the React framework, formerly known as React Table. On the contrary, the data grid company sponsors TanStack Table and considers TanStack a partner.

“Our founder, Niall [Crosby], who sadly passed away recently, was a big fan of supporting open source communities and open source projects, and a big fan of supporting Tanner [Linsley] specifically,” Stinton-Bland said. “Tanner’s React Table solution is headless. Essentially that means that you have to build out the UI yourself, and you have to style everything, and you have to do a lot of legwork to get things working.”

AG Grid, an open source solution, is a feature-rich JavaScript data grid library used to build interactive and sophisticated data tables or grids in web applications. A JavaScript grid is a UI component used to display and manage tabular data in a web application. It provides a structured way to present information in rows and columns, making it easy for users to understand and interact with the data.

AG Grid provides a way to put these grids into your web applications, he added. It’s essentially like React Table but with “batteries included,” he added.

“The simplest way I can describe that is it’s built to be basically Excel for web developers,” he said. “Essentially, it lets you put a very powerful table into your web applications.”

Last year, the company launched AG Charts, a charting library created as a way to power the integrated charting features of AG Grid, where it’s possible to highlight data and build charts from it.

“In order to power that functionality, we essentially had to build a whole charting library to do that, and we took the decision last year to turn it into its own product, essentially,” he said. “Now AG Charts is a completely standalone JavaScript charting library with support from React, Angular and Vue, much the same as AG Grid.”

The two products are built to work seamlessly together, but they can also be used as standalone applications, he added.

Support for Frameworks

For both products, the core business logic is written in JavaScript, which allows the solutions to be very fast, Stinton-Bland said. AG Grid and AG Charts support React, Angular, Vue and JavaScript with full TypeScript support. Solid was supported, but that has been deprioritized due to less interest than anticipated, he said. However, Solid does offer its own wrapper for AG Grid, he added.

“We’re not restricted by any of the restrictions of the individual frameworks, but then we actually provide full support for those frameworks on top of that, and it’s not a thin wrapper layer or anything like that,” he said. “All of the rendering is done in pure React, for example. In that way, you can get all of the benefits of performing your logic in pure JavaScript, but you also get all the benefits of it working just like you would expect any other React library to.”

Features of AG Grid

AG Grid can handle large amounts of data without seeing any sort of lag or performance drops from the UI perspective, Swinton-Bland said. They make sure to optimize every release.

“Because of all of that core business logic being in pure JavaScript, we don’t have any of the overhead that you might get with some pure React libraries, for example,” he said.

AG Grid has what it calls client-side role models and server-side role models. Developers can either hand all of the data off to AG Grid and it will manage it on the client side, or developers can implement the server-side row model, which would require the developer to figure out how they want to send the data from the server to AG Grid. The product offers features that allow you to easily make that connection, Swinton-Bland said. It also supports features such as tree data views, master-detail views, and things like that.

“If you have more nested data or different levels of data, there [are] features in there to fit those use cases as well,” Swinton-Bland said. “It really is quite versatile. I don’t think we would find a use case where we wouldn’t be able to handle the data.”

Ag Grid also does virtualization out of the box, which means that rather than loading all of your data in one go into the data grid and the browser, AG Grid loads what you see or what you want the user to see and then some data before and after it.

“A lot of other data grids will do the same sort of thing,” he added. “They’ll implement virtualization, but the way that we’ve done it is just in a much more performant way, essentially.”

Most recently, the company has put together a new community section of their website. Under tools and extensions, there’s a list of the ecosystem built for AG Grid, including extensions and open source tools.

“Companies have built design systems and custom themes,” he said. “They’ve built wrappers and integrations for no code, low code platforms for other frameworks like .Net and Rust, and it really was quite surprising to me how much of an ecosystem there was built around and on top of AG-Grid.

The company has received fewer feature requests recently because there are “very few features that we get requests for from users that there isn’t a way to do it already.” That said, AG Grid is open to feature requests from developers.

Web development is a constantly evolving and changing space, and so we put a lot of work into maintaining everything that we’ve built so far,” Swinton-Bland said. “AG Charts is a big focus of ours now as well. That being a whole new product, we’re constantly releasing new features, new series types and really trying to grow that product as well.”

Competitors

AG Grid lists its customers as Amazon, Facebook, Microsoft, PayPal and FedEx, among others. While it is a popular option open source solution for creating data grids and tables, it isn’t the only open source solution. Open source competitors include:

  • Material UI is an open source React component library that implements Google’s Material Design. Its clients include Netflix, Amazon, NASA and Shutterfly.
  • SlickGrid is another open source solution that’s designed for large datasets and real-time updates.

There are also proprietary competitors such as:

  • DevExpress Data Grid is a commercial offering known for its feature set of advanced filtering, grouping, and pivot tables.
  • Handsontable, which used to be open source but is no longer. Currently, it offers a free non-commercial license, which allows developers to use it for personal and non-profit projects. However, for commercial use, a commercial license is required.
  • Syncfusion Essential JS 2 DataGrid, which includes data editing, filtering, grouping, and exporting. It offers a free community license for personal and small-scale commercial use, but the full version with all features requires a commercial license.

AG Charts’ open source competitors include Chart.js, D3.js and Plotly.js.

TRENDING STORIES
Loraine Lawson is a veteran technology reporter who has covered technology issues from data integration to security for 25 years. Before joining The New Stack, she served as the editor of the banking technology site Bank Automation News. She has...
Read more from Loraine Lawson
SHARE THIS STORY
TRENDING STORIES
SHARE THIS STORY
TRENDING STORIES
TNS DAILY NEWSLETTER Receive a free roundup of the most recent TNS articles in your inbox each day.
The New Stack does not sell your information or share it with unaffiliated third parties. By continuing, you agree to our Terms of Use and Privacy Policy.