Quick Links

Recent Posts

How to evaluate a Javascript Data Grid

  |   Misc

What do we do when hunting for a new component to meet a specific need? How do we answer the question "What is the best Data Grid?"

For a specific framework, we could 'Ask Google': "What is the best React Data Grid?" and in response, we will see many listicle articles.

But 'best' needs to consider your specific needs, and no listicle article can do that.

For example:

  • What is your budget?
  • What is your team's skill level?
  • Do you want a Data Grid or an entire component suite?
  • Are you looking for enterprise-level support?
  • Do you need multi-framework support?
  • etc.

The only way to decide the "best data grid" for your environment is to evaluate the options.

We've put together this list of points as a starting guide for how to evaluate a Data Grid. You can answer many of these points just by reviewing the website and examples of the product:

  • Could you build your own?
  • What essential features do you need immediately?
  • What features will you need in the future when your product takes off?
  • Do you need High-Frequency Updates?
  • Do you need to customize the data grid?
  • Does your user need to customize the data grid?
  • What is the product documentation like?
  • How easy will it be to hire staff?
  • How popular and widely used is the data grid?
  • Is commercial and enterprise support available?
  • Is the data grid supported and updated?
  • Can you evaluate freely?
  • Can you review the Data Grid source code?
  • Is there a free version available for commercial use?
  • How easy is it to get started?

We've supplied some answers below to cover AG Grid and feel free to use this as a basis to compare AG Grid with our competitors to see which Data Grid works best for you. We believe AG Grid will be the best for most use-cases, but we know that different teams prioritize different features and options.

Could you build your own?

Choosing any component can be tricky. It's often tempting to build custom components iteratively, but the feature set you need becomes too much to code on your own at some point.

Considering what features you'll want the component to provide your users ultimately gives you a good starting point for reviewing the component marketplace.

Creating a simple table with sorting and filtering won't take too much time, but it will still be longer than adding an existing Data Grid as a dependency and enabling a few properties.

Make sure you consider the future needs of your project and estimate how long it will take to create more advanced features like pivoting and grouping by rows and columns. The complexity increases if you want user control over those features and not just set them up in advance in code.

Don't start from scratch - go headless

If you do decide to build your own regardless, we'd still recommend you don't. AG Grid comes fully featured and will save you a lot of time.

Still, if you are determined, then we recommend looking at a Headless component like the Tanstack Table, previously known as React Table before it supported multiple frameworks.

Tanstack Table is headless, so you still have to write the code to create the GUI, but the component handles the underlying functionality, like sorting. We have a blog post showing the difference in the amount of code required to use a Headless Component versus a fully featured Data Grid like AG Grid.

What essential features do you need immediately?

If you decide to build your own data grid, it is crucial to consider the features you will eventually need.

For a data grid, the initial set of features is likely to be:

  • sorting,
  • filtering,
  • in cell editing,
  • pagination and,
  • customizing the rendering of data in the cells.

This set of features won't help reduce the list of candidate components because this is the basic set of features you'd expect from any Data Grid.

But when you estimate the time it will take you to build these features yourself, while creating and styling a GUI, then you might consider evaluating an existing Data Grid rather than spending the time coding them yourself.

For example, you only need a few lines of code to create a basic AG Grid implementation that is editable and pulls data from an API while providing sorting, filtering, and pagination. Additionally, it can all be built in a few minutes.

    const columnDefs = [
        {field: 'make'}, {field: 'model'},
        {field: 'price', editable: true}
    ];

    const gridOptions = {
        columnDefs: columnDefs, enableSorting: true,
        enableFilter: true, pagination: true
    };

    const eGridDiv = document.querySelector('#myGrid');

    new agGrid.Grid(eGridDiv, gridOptions);

    fetch('https://www.ag-grid.com/example-assets/row-data.json').
    then(function (response) {
        return response.json();
    }).then(function (data) {
        gridOptions.api.setRowData(data);
    })

What features will you need in the future when your product takes off?

Thinking through the future needs of your product can be one of the most complex parts of evaluating a component. You're often so focused on the immediate need to render data in a grid and make it user accessible that more advanced features don't come into the picture.

Consider:

  • Column Spanning
  • Column Grouping
  • Multi Level column grouping
  • Row Spanning
  • Row Grouping
  • Data Aggregation when grouping
  • Rendering Tree Data
  • Nested Data Grids
  • Advanced Column Filtering
  • Pivoting

We recommend reading through the component's documentation as it will trigger ideas for features you probably had not considered. The AG Grid documentation has a sidebar where you can reveal the contents and quickly see the scope of the features available.

For each advanced feature, you identify as helpful, try to estimate how long it would take to implement yourself. Many of the features listed above could well take months to implement the most basic implementation.

AG Grid has been in development since 2014 with a dedicated team of professional developers who continually add new features and update the Data Grid to keep pace with the framework changes and cross-browser nuances. It can be helpful to consider adopting a third-party Data Grid component as outsourcing the development of a niche part of your product. At the same time, you focus on the functionality that adds the most business value. And if our open-source community edition can meet your application needs, then you're outsourcing the programming and maintenance of Data Grid functionality to a professional team of developers for free.

Do you need High-Frequency Updates?

One of the most challenging aspects of creating a Data Grid is handling frequent updates, especially when the Data Grid is rendering a lot of data.

The main techniques required for this are:

  • Row virtualization
  • Transactional Data Updates
  • Rendering optimization
  • Server-side Data updates

Row virtualization ensures that the Data Grid only renders data visible on the screen. Various techniques are available to do this, and AG Grid has DOM Virtualisation built into both Community and Enterprise editions.

Look for examples in the documentation for the Data Grid components to find working examples where you can see the data virtualization and updates in practice. Also, information on how to configure the data grid when it handles lots of data with frequent updates.

For AG Grid we have:

High-Frequency handling of large Data Sets is often one of the main reasons for choosing AG Grid as described in this customer case study with Proof Trading.

Do you need to customize the data grid?

Most teams immediately think of writing their own data grid because they are nervous that they will not be able to customize the Data Grid to their specifications.

Make sure that the Data Grid you are evaluating can be easily customized.

With AG Grid, we support customization through components written in the framework being used.

Full documentation on the types of components is available. We also have an overview video explaining how the component customization works.

Additionally AG Grid also supports various CSS Styling mechanisms including themes.

The customization available from AG Grid is often cited as a reason for choosing AG Grid and is covered in this case study with Prisma.io.

Additionally, AG Grid is so customizable that AdapTable has built their entire business on an extension for AG Grid which relies entirely on the customisability of AG Grid, as described in this case study interview with AdapTable's CTO.

Does your user need to customize the data grid?

When choosing a Data Grid, we often forget that the more customization we can put in the hands of the user when they use our product, the more it can meet their evolving needs without any additional coding effort.

Once you put your Data Grid in the hands of users, it can be hard to predict what they will need and what subtle configuration changes they will require. Using a Data Grid that supports user configuration will save development time later because your users can configure the grid themselves.

AG Grid's Tool Panel and support for user-controlled pivoting, column grouping and row grouping are some of the most obvious user customizations, and these only require a few parameters to enable.

In addition, AG Grid Enterprise comes with Integrated Charting, allowing users to select data and build their charts from rendered data, all without any programming involvement.

What is the product documentation like?

The product documentation is essential when working with a component library. It is important to know that the team building the component care as much about the developer's experience with the documentation as they do about the component itself.

Things to look for in the documentation:

  • Is there a Getting Started Guide?
  • Is there a search facility?
  • Are there examples embedded in the documentation?
  • Are the examples runnable in the browser?
  • Can you amend the code and experiment with the examples in the browser?
  • Are there any video tutorials in the documentation?
  • Are older versions of the documentation available online?

With the AG Grid Documentation, we have all the framework documentation available by clicking the framework icon at the top right-hand corner because all Data Grid features are available in all supported frameworks.

We use Plunker to host the examples embedded in the documentation. These examples are maintained for all frameworks and supported approaches in each framework, e.g. classes and hooks. Plunker allows us to automatically upload the examples with each release, so they are always in step with the current version. It provides an environment where you can edit and easily play with each example to try things out.

Our older version documentation is available from the "Documentation Archive" link in the footer of the site.

We have a blog post describing how to maximize your productivity with the AG Grid documentation.

How easy will it be to hire staff?

When you are choosing a Data Grid for your product, it is likely to be a strategic choice, and you will need to be sure that you can hire experienced staff to work with the component choice.

We recommend performing a job search on job hunting sites to see how many jobs are listed with the component.

When the component is listed as a skill in job listings, it is a good indicator that the component is well used and has an active set of developers who list it as a skill. You will also gain an idea of the companies that use the component.

Job adverts frequently list AG Grid as "ag-grid," so be sure to search for variants of the component's name.

The Job Ad search above will provide some indicators as to the popularity of the component.

The other indicators are npm stats and Github stars.

Is commercial and enterprise support available?

When building strategic and business-critical applications, you need to use components from a company that takes the component seriously.

Some data grids are part of a large component suite; they won't be equally important to the company selling them. AG Grid only makes a data grid, it is our single focus, and all we do is continue to improve the grid.

It's also the only thing we have to support, so we have a dedicated team that can work with customers directly for their specific use-cases.

You never know when you will face a problem that you can't resolve internally. The documentation that supports a component is generic and won't cover every technical combination you are using on your project. You'll want to know that you have the option of contacting support and that the support team can help you work through any issue you face rather than wasting development time experimenting on your own.

Is the data grid supported and updated?

If a company is serious about its component, they will continually work on it and release new versions.

Things to look out for are the release notes on the company website and the releases that have been made through npm or Github.

The AG Grid links to see how we put out releases are:

Can you evaluate freely?

When choosing between components, there is nothing worse than having to sign up for a trial version or contact sales to get permission to use the component.

Ideally, you want to be able to add it to your project using npm and get started on your evaluation with no limitations.

AG Grid is a company created by developers, and we don't put any blockers on the evaluation process.

You can get started by adding AG Grid to your project using npm.

If you want to evaluate using the community edition, you can even deploy it into production because our Community edition is MIT Licensed and free to use with no restrictions on production usage.

This is one of the reasons that Prisma.io adopted AG Grid Community Edition in their online Data Platform.

When you evaluate the Enterprise edition, all we do is add a watermark to the screen for a second or two and display a message in the console. It is possible to evaluate the Enterprise edition features without any permission or any sales contacts.

We only issue a trial license for evaluations so that people can see what the grid is like without the watermark, for example, when you want to demo the application to your users.

No functionality is locked behind a license. You have access to all the functionality as soon as you add AG Grid to your product.

And we have a page in the documentation if you are interested in the differences between the Community Edition and the Enterprise edition.

Can you review the Data Grid source code?

Developers will want to review the quality of the component's code, not just the features and usability.

That's one reason why AG Grid adopted an Open Source model for our code base.

The community edition is open source and completely free to use, even in production. The enterprise edition source is also openly available on Github, so you can review the implementation and algorithms used to ensure they are what you would choose.

This was one of the deciding factors that helped Proof Trading adopt AG Grid. They looked at our implementation and saw we were using the same algorithms and techniques they would, so why bother writing it from scratch? Better to adopt something built by another company and save yourself years of effort.

Consider also the long-term escrow position. The open-source model we adopt is also an excellent safeguard for an escrow position, with Github as a third party holding the source code.

Proof Trading used the community edition to evaluate AG Grid as this was a hassle-free way to get started, and by reviewing the AG Grid source code, they were able to perform a very technical evaluation before adopting AG Grid in their high-frequency trading environment.

Is there a free version available for commercial use?

Many companies only offer a 'trial' edition of their component. If you're evaluating their component and building your application with it, they hope you invest so much time in the trial that you'll feel committed enough to buy the product to keep using it.

At AG Grid, we take the opposite view. We only want to charge for something that offers value above and beyond the open-source products on the market. So our Community Edition is open-source and completely free for production use.

This makes it easy to compare with any open-source grid that is out there. Our Community Edition is open-source. It also happens to be programmed by professional programmers for whom this is their 100% day job, not a side project.

You get all the benefits of open-source:

  • Community Edition is free.
  • Use it without restrictions.
  • Fork the project and make your own version if you want to.
  • Review the code.

You also avoid all the drawbacks:

  • Bugs don't get fixed because they are not important.
  • Features requests are ignored because they don't fit the developers' needs.

With AG Grid, the Community Edition functionality is also part of Enterprise Edition. We fix it and keep it up to date. We use customer feedback to drive the product forward and make it even better.

Our Community Edition is not a side project; it is the core, and the heart and soul, of our commercial Enterprise product.

How easy is it to get started?

Before getting hands-on and using it with any custom code, make sure to follow some of the Getting started information on the site.

Most component documentation is a reference guide and requires some experience with the component to understand it fully.

The Getting Started guides should be simple and fast to follow.

AG Grid has Getting Started Guides and videos for every framework we support:

We also have posts on our blog covering How To Guides for Features and longer tutorials that go in depth to a specific application or domain.

You'll also find that we have free training courses for Angular and React.

Finally, Use It

After reading the documentation, watching YouTube Videos, and walking through a tutorial, you will finally be able to start using it in your production application.

Some people prefer to create a Prototype Implementation that mirrors some of the production requirements:

  • create a simple app
  • add some basic customizations that demonstrate the capabilities required
  • hook into the existing APIs and databases

Other people prefer to add the component directly into their application to see how easy it will be to wire it up with their existing abstractions and API code.

If you do this with AG Grid, then anything you build with the Community Edition, you can deploy directly into production and let your Users provide feedback on the component.

Summary

Hopefully, this provided some ideas for evaluating a Data Grid.

We know it can be very easy to pick the first open-source Data Grid that you find, start building with it, and then have to begin writing pull Requests to make it do what you want. That is, after all, what triggered the AG Grid to create its Data Grid in the first place.

Because of this, we also understand the temptation to 'just build your own'; after all, that's what we did.

But unless you plan to set up your own company to sell a Data Grid, we don't recommend this.

Instead, identify the business value the development process aims to deliver, and think through the features and capabilities you will need to implement the value. Experiment with components that have proven themselves in the marketplace and plan to stick around for the long term.

If you want to learn how some of our existing users approached the evaluation process, check out the Prisma.io case study which has many points about how they evaluated the product. Also, the Proof Trading case study with their evaluation points and they described their evaluation process on the WebRush Podcast.

At AG Grid our mission is to build the best Data Grid in the world and while we believe we've done that, we invite you to evaluate our Data Grid and find out. We support React, Angular, Vue and Javascript, additionally we are fully typed for use in Typescript.

Read more posts about...