The Great React Grid-Off: KendoReact vs. MUI vs. AG Grid

Curious how the best React grids on the market compete head-to-head? KendoReact vs. MUI vs. AG Grid—let’s see it!

If you’re looking for an enterprise-level data grid for your React application, there’s no shortage of options to consider. When you’re making a comparison, many aspects will be subjective; those things will ultimately come down to which approach makes the most sense to you as a developer and what you think will be easiest for your existing team to adopt.

However, there are also performance-related metrics that are objective, which we can test directly and draw clear conclusions around. In the hopes of making that task slightly easier for you, we ran the tests ourselves and would like to share the results.

This benchmark compares the rendering and virtualization performance of three popular React data grids: Progress KendoReact, MUI and AG Grid. The goal is to provide objective, repeatable performance data across common real-world scenarios—from small datasets to large, virtualized grids with up to 1 million rows. We wanted to mirror production-like situations as closely as possible, rather than simply testing demo scenarios that aren’t commonly reflected in real applications.

Sneak Peek at the Results

For those of you who are just eager to see our conclusions, below is a summary of our results. For those interested in diving deeper into the methodology and details, read on!

• For basic grids (≤5k rows, no virtualization), MUI is faster.
• When paging is enabled, the KendoReact consistently leads.
• If virtualization is needed (10k–1M rows), KendoReact is significantly faster, with performance gaps widening as datasets grow.
• In situations with row and column virtualization, MUI performs well on smaller datasets, while KendoReact scales better at higher volumes.
• If you’re working with very large datasets, the best choice is the KendoReact Data Grid.

How We Measure Performance

Before we look at the numbers, let’s take a second to discuss how we calculated them.

We run automated performance tests twice each week (for our own visibility) and track the results to a set of internal dashboards. This is for our own learning—we want to keep an eye on our grid and how it performs in real-world scenarios, as compared to our competitors. All our tests are designed to be repeatable and to reflect realistic application usage.

We run our tests via GitHub Actions, using Selenium WebDriver and a custom browser automation in a headless Chromium browser. The tests use realistic, production-like data generated with the Faker.js library (ours is for a “warehouse,” with columns for ID, name, price, start date, units in stock, discontinued status and a description). For tests requiring wider datasets, additional column content is dynamically generated, with each cell containing realistic five-character alphanumeric data. Each scenario is executed eight times, and we average the results for consistency.

The testing framework uses high-precision millisecond timing, moving through the following steps:

1. Pre-render State: To begin, the Grid component is not initially loaded on the page.
2. Data Generation: Test data is generated and prepared in memory before timing begins.
3. Timer Start: A precise timestamp is captured using Date.now() immediately before grid initialization.
4. Grid Load: The Grid component is rendered with a full dataset.
5. Completion Detection: Automated polling (every 10ms) detects when the last table cell becomes visible in the DOM using XPath selectors (td[contains(@class,'k-table-td')]).
6. Timer Stop: A timestamp is captured when the target cell is detected.
7. Result: The rendering time in milliseconds is logged.

What Gets Measured

We look at our KendoReact Data Grid (Premium) as compared to AG Grid (Community Edition) and MUI Grid (Material-UI Data Grid) in terms of pure component rendering time, DOM manipulation performance, virtual scrolling efficiency and template rendering overhead. We do not measure network latency, API calls or data generation time.

For all the grids, we test in four different configurations:

The Results in Detail

Now that the scope and scale of the tests have been established, let’s look at the results. This particular benchmark compared KendoReact v13.0.0 against AG Grid Community v34.3.1 and MUI Grid v8.11.0. Below are the results from this specific test, but it’s worth noting that we repeat these tests regularly and the results are consistently similar.

Grid Basic Tests

100 Rows x 10 Cols

100 Rows x 100 Cols

1,000 Rows x 10 Cols

5,000 Rows x 20 Cols

Grid Paging Tests

100 Rows x 10 Cols

100 Rows x 100 Cols

1,000 Rows x 10 Cols

5,000 Rows x 20 Cols

Column Virtualization Tests

10,000 Rows x 100 Cols

100,000 Rows x 100 Cols

Dual-Axis Virtualization Tests

10,000 Rows x 10 Cols

100,000 Rows x 10 Cols

1,000,000 Rows x 10 Cols

Basic Grid

For the Basic Grid, MUI came out on top—although, it’s worth remembering that in all these situations, we’re talking about a matter of milliseconds (note that I’ve converted the results into seconds in these summaries, since that’s a bit easier to mentally parse). Still, they consistently clocked in faster than both KendoReact and AG Grid.

For a 100x10 grid, MUI (0.67s) was faster than KendoReact (0.71s) and AG Grid (0.85s). Even at 5,000x20, MUI (10.4s) still kept the lead over both KendoReact (14.7s) and AG Grid (16.5s).

For small datasets without virtualization, MUI Grid shows slightly faster initial render times, though all three grids perform within the same order of magnitude.

Paging

The situation changes once other, more complicated factors are included. When we enable paging, we see KendoReact move into the lead.

In a 100x10 grid, KendoReact (0.33s) is faster than MUI (0.41s) and AG Grid (0.46s). Scaled up to a 5,000x20 grid, KendoReact (0.38s) still has the edge on MUI (0.46s), which in turn beats out AG Grid (0.50s).

Once paging is enabled, the KendoReact Grid consistently outperforms both MUI Grid and AG Grid across all tested dataset sizes.

Row Virtualization

Similarly, KendoReact remains on top for row virtualization. For a 10,000x10 grid, KendoReact (0.32s) is more performant than both MUI (0.42s) and AG Grid (0.60s).

Push that to 1,000,000x10, and we start to see a truly significant difference: KendoReact (0.83s) is significantly faster than MUI (5.6s) and AG Grid (6s). Obviously, that’s a testing scenario that pushes the boundaries of capability, but it demonstrates the kind of compounding performance costs that developers need to be aware of when dealing with larger datasets.

As dataset size increases, performance gaps widen significantly. At 1,000,000 rows, KendoReact renders in under 1 second, while MUI Grid and AG Grid require more than 5 seconds.

Row + Column Virtualization

MUI and KendoReact split the victory on Row + Column Virtualization.

When we tested with a smaller dataset, MUI takes the lead: at 10,000x100, MUI (0.49s) is faster than AG Grid (0.5s), which is faster than KendoReact (0.77s).

However, KendoReact takes the crown when tested with the larger dataset: at 100,000x100, KendoReact (0.62s) beats AG Grid (0.85s) and MUI (1.1s).

KendoReact scales more predictably as both row and column counts grow, avoiding compounding render costs.

Which Grid Is Best for Your Team?

There’s a long-running joke: no matter what they’re asked, a senior developer never says “yes” or “no” They always say: “It depends.”

I must be showing my true colors here, because when faced with the question of which grid to pick, I find myself saying … well, it depends!

You might prefer MUI Grid if:

• Your datasets are small
• You prioritize Material UI consistency
• You rarely rely on virtualization

You might prefer KendoReact Grid if:

• Your app handles large or growing datasets
• Virtualization and performance are top priorities
• You need predictable enterprise-grade performance at scale

If you just need basic grid functionality, all the grids we looked at here were honestly pretty evenly matched in terms of performance.

In this case, as a tech lead, I would default to other determining factors to help tip the scales. What other components are included in the library that could be leveraged in our app? How does it meet the needs of our users who rely on accessibility functionality? How customizable is it? How easy is it to integrate AI-related functionality? How often is it updated, and what are the available customer support offerings?

How you weigh and compare the answers to these questions will ultimately come down to what factors are most important for both the userbase of your specific application and the needs of your specific team.

However, if you’re dealing with truly large datasets and virtualization is a high priority, then KendoReact is the frontrunner. And the larger the dataset gets, the greater the disparity between KendoReact and the competitors.

If your application needs to handle truly large amounts of data, there’s one grid that’s simply better equipped to do so: the KendoReact Data Grid.

Try It Yourself!

Of course, we highly encourage you to try this experiment for yourself! That’s why we shared our methodology: this is meant to be repeatable and standardized. If you run these tests and see different results, please let us know.

You can even try the full KendoReact library free for 30 days:

Try KendoReact