AG-Grid vs DevExtreme DataGrid. Which One Should You Use?
TLDR; I think DevExtreme’s 70+ UI control suite which comes with the Data Grid provides a much better value for money than AG Grid. The Data Grid provides features that fill almost every typical business use case.
AG Grid is provided by ag-grid.com and DevExtreme is a set of 70+ UI controls (including the data grid) provided by DevExpress.com. I will make a high level comparison between the two and highlight my experience when I was reviewing their websites to determine the features and the type of documentation they provide.
Today is Jan 21, 2023. AG Grid is at version 29.0 and DevExtereme is at version 22.2.3. I am checking out their websites to see how quickly and easily I can get to know about their grids. The first thing I do when I check out a UI control vendor is going to the demo page(s) and see what the control(s) look like. What they can do and how polished they are. I am persnickety when it comes to UI controls and user experience.
DEMOS:
AG Grid’s demo page shows a grid that fills the page and that’s it. No list of features or anything. I guess I am supposed to click and mouse around and see what it does? Versus DevExtreme has a well organized demo page where all the main features are listed on the left side and you can view how each feature works in the main content. On the right side, you can see the code for 7 different frameworks. jQuery, React, AngularJS, Angular, Vue, ASP.NET Core and ASP.NET MVC. You can even make changes to the code or HTML and hit Apply to see the effects on the demo page. In AG Grid’s case, demos are in the documentation pages and they use plunkr, an external website, for real time examples. Thumbs up to DevExtreme for the high quality of their demos.
DOCUMENTATION:
AG Grid’s documentation is not well organized. They explain features through a free flow type of text and the properties and methods of the grid are dispersed in the text. Not conducive for a quick lookup as a reference. There are times when they put a real life grid in the feature documentation and I still didn’t know how to try the feature. A video would be helpful.
For DevExtreme, the API Reference for every UI control is organized in 3 sections, Configuration, which is the list of properties. Methods and Events. All sorted alphabetically. They are concise and up to the point. There’s also another section of documentation with high level descriptions and examples on how to use certain features.
FEATURES:
Both grids will provide most of the features that 99% of developers will need. My goal was to find out what features that AG Grid has that DevExtreme doesn’t have and vice versa. To come up with a good list was going to be a very time consuming effort because it meant that I had to comb through the documentation of both grids and try out a lot of code for both grids. This is time and effort I couldn’t afford. So I casually went through the list of features for both grids, compare, and see what each grid is missing. It was hard. Both grids seem to provide similar advanced features like master-detail rows, grouping, advanced selections and filters, real-time updates, drag and drop of rows inside the same grid and between grids, inline editing and so on. So why is AG Grid a lot more expensive and more popular? I really don’t know. It could be because they spend a lot of money on marketing. They are a sponsor of Web Rush, a JS podcast I listen to where each episode has an AG Grid ad. Also, the hosts have interviewed people from AG Grid a few times. I’ve seen their ads elsewhere too. I tend to believe when a company spends a lot of money on advertising and marketing, their products have high costs so as to recoup some of the advertising money.
One big difference in features I noticed is that AG Grid supports pivoting of rows and columns in the grid, while DevExtreme has a separate UI control called Pivot Grid that has this feature. I am not sure if this is a big disadvantage but the point is that pivoting is available.
AG Grid’s lacks infinite scrolling which DevExtreme supports?
DevExtreme’s layout also adopts to smaller screens where you can define what columns to hide. Tapping the 3 vertical dots will display the hidden rows as rows. I didn’t see this feature in AG Grid. To find out if DevExtreme supports any of AG Grid’s extra features meant that I needed to ask support. And vice versa. I skipped all this. My conclusion here is that both grids support all the scenarios and use cases that I can think of.
THE DIFFERENT EDITIONS OF THE GRIDS:
AG Grid comes in a community and enterprise edition. The community edition is free and can be used for commercial and non-commercial applications. However, the community edition lacks many of the advanced features like master-detail and grouping which are in the enterprise version.
DevExtreme is a suite of 70+ UI controls. They can all be used for free in non commercial applications without any feature limitations. A license is required if they are to be used in commercial applications.
Both grids support one year of free upgrades and technical support.
COST:
This is the killer differentiator between the two. First, DevExtreme is a whole suite of UI controls. You basically can create any line of business app with these controls without the need to look elsewhere. AG Grid is just a grid and charts. If you want advanced controls, a scheduler, Gantt component, file manager as examples, you will need to go to another vendor and purchase it and you end up with a hodge podge of controls from different control vendors which might not work well together. DevExtreme’s controls naturally work well together and they can be all themed together easily.
Let’s compare prices here. Assume your team has 4 UI developers working on 2 different applications.
For AG Grid, the total cost would be $1200 (multi app license) x 4 plus $750 for every external environment deployment license. Total minimum cost = $5550
For DevExtreme it’s $500 x 4 + $0 deployment license = $2000 and not counting you’re getting a lot of other high quality controls, including charts which AG Grid provides.
AG Grid is almost 3 times more expensive and it’s 2 controls, grid and charts.
CONCLUSION:
Both grids provide almost everything you need in your typical line of business application. While AG Grid might provide some extra features, I don’t see these features to be compelling enough to forgo DevExtreme’s big price advantages and the host of UI controls that come with it. I also work in a .NET shop so the support for ASP.NET is also a nice advantage.
DevExpress’ technical support and support center website are excellent.
One main thing that frustrated me a lot about AG Grid’s website is that I couldn’t find any way to download the software. No download options on the home page. I did a search and I couldn’t find it. Their Getting Started has nothing about how to download or install it. Their GitHub page had nothing about how to install the enterprise version. Such a lack of critical information was a big turnoff about them. I can’t understand how a software company whose whole revenue comes from one piece of software makes it so hard to find its download/trial options.
DevExpress has trial/download links all over its website. You can’t miss it.
Note that I am not affiliated with either company. I just wanted to put out my personal opinion and if you’re deciding to make a choice between these two products, perhaps my comparison here can provide you with some insights.
Good luck.
