Ignite UI for React - What’s New in 21.2

Brian Lagunas / Thursday, December 16, 2021

I’m sorry but you need to tell your kids Santa Claus isn’t coming this year. Why you ask? Well, it’s because Santa, and all his elves, are going to be too busy building mind blowing web applications using today’s release of Infragistics Ignite UI for React 21.2.

Today’s Ignite UI for React 21.2 release is jam-packed with goodies for everyone to enjoy. 

Now, let’s turn on the holiday music and unwrap this gift of awesomeness!

React Grid

It’s no secret that the React grid is by far the most popular component in the Ignite UI for React product offering. Easy to use, exploding with performance, and packed with features. It’s no wonder why the Ignite UI for React grid is the go-to component for all our React customers. In this latest release of Ignite UI for React 21.2, we wanted to make sure we focused on the most important features that have the biggest impact on a grids ability to provide value to an end-user.

Filter Row

While the Ignite UI for React data grid has always supported filtering, the filter experience was limited to the column options dialog with the excel style filtering feature. While this works, it’s not always the most optimal filtering experience. For this reason, we have added a brand-new filter row to the data grid component. You can now provide filters inline making for a much better end-user filtering experience. Not only can you simply filter a specific column, but you can also choose the filter operand for that filter such as start-with, ends with, and contains just to name a few. Not happy with the built-in filter operands? No problem, you can build your own custom filter operands that will show in the data grids new filter row.

 React Grid row filtering

Interactive GroupBy

Probably the most important on my list, was the ability to group columns by a simple drag and drop operation. Before today’s Ignite UI for React 21.2 release, you had to use the column options dialog to group columns. Unfortunately, that isn’t the best experience and becomes very confusing at times. However, starting today you can now drag and drop any column header into the brand-new data grid GroupBy Header to automatically apply your groupings. It’s so easy and so smooth.

 React Grid  interactive groupby

Cell Merging

Cell merging is a common feature in Microsoft Excel that allows you to deliver data clarity and avoid duplication by merging neighboring data cells across different rows whenever they display matching values.  While Excel made this feature famous, it is now a very common request in the context of showing data in a data grid.  With the release of Infragistics Ignite UI for React, the data grid has full support for cell merging.

 React Grid cell merging

Save/Load Layout

When your end-users move, sort, filter, pin, resizes a column, adds a summary, or groups the data grid at runtime, they would often like to save the state of their changes to be loaded later. As of today, they can! You can now save the layout of the React data grid to json using the DataGrid.SaveLayout method and then provide the ability to load any saved layout back into the data grid using the DataGrid.LoadLayout method.

Let’s Wrap this Baby Up!

If you have ideas about new features we should bring to our components, important issues we need to fix, or even brand new components you’d like us to introduce, please let us know by posting them on our Product Ideas website. Follow and engage with us on Twitter via @infragistics. You can also follow and contact me directly on Twitter at @brianlagunas. You can also subscribe to my YouTube channel to be notified of new videos, and follow me on Twitch to watch me stream live.  Also make sure to connect with our various teams via our Community Forums where you can interact with Infragistics engineers and other customers.  

Lastly, when you do build something cool with our controls, please make sure to let us know.