{"id":2460,"date":"2024-08-08T05:14:00","date_gmt":"2024-08-08T05:14:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=2460"},"modified":"2025-02-26T13:46:52","modified_gmt":"2025-02-26T13:46:52","slug":"ignite-ui-for-react-24-1","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/ignite-ui-for-react-24-1","title":{"rendered":"What&#39;s New: Ignite UI for React 24.1 Release"},"content":{"rendered":"\n<p>We are excited to share that Ignite UI for React has received tons of significant improvements, introducing new features that enhance functionality and performance as part of our continuous release. Some of the key updates include several components like Hierarchical Grid, Button Group, a few gauges for better data visualizations, and more. All of these are tailored to help developers create high-quality, responsive web applications with ease. But let\u2019s explore them in detail.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"version-18-4\">Version 18.4<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"\/products\/ignite-ui-react\/react\/components\/general-changelog-dv-react#1840-december-2023\">Changelog 18.4<\/a><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">State Persistence feature for Grid component<\/h3>\n\n\n\n<p>&nbsp;The Ignite UI for React <a title=\"Documentation for State Persistence feature \" href=\"\/products\/ignite-ui-react\/react\/components\/grids\/grid\/state-persistence\">State Persistence<\/a> in <a title=\"Documentation for React Data Grid\" href=\"\/products\/ignite-ui-react\/react\/components\/grids\/data-grid\">React Data Grid<\/a>, <a title=\"Documentation for React Tree Grid\" href=\"\/products\/ignite-ui-react\/react\/components\/grids\/tree-grid\/overview\">React Tree Grid<\/a>&nbsp;and <a href=\"\/products\/ignite-ui-react\/react\/components\/grids\/hierarchical-grid\/overview\">React Hierarchical Grid<\/a> allows developers to easily save and restore the grid state. When the&nbsp;<a class=\"external-link-parent\" href=\"\/products\/ignite-ui-react\/api\/docs\/typescript\/latest\/classes\/igniteui_react_grids.igrgridstate.html\"><code class=\"external-link\">IgrGridState<\/code><\/a>&nbsp;is applied on the React&nbsp;<a class=\"external-link-parent\" href=\"\/products\/ignite-ui-react\/api\/docs\/typescript\/latest\/classes\/igniteui_react_grids.igrgrid.html\"><code class=\"external-link\">IgrGrid<\/code><\/a>, it exposes the&nbsp;<code>GetState<\/code>,&nbsp;<code>GetStateAsString<\/code>,&nbsp;<code>ApplyState<\/code>&nbsp;and&nbsp;<code>ApplyStateFromString<\/code>&nbsp;methods that developers can use to achieve state persistence in any scenario. The supported features are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a title=\"Documentation for Data Grid sorting feature\" href=\"\/products\/ignite-ui-react\/react\/components\/grids\/grid\/sorting\">Sorting<\/a><\/li>\n\n\n\n<li><a title=\"Documentation for Data Grid filtering feature\" href=\"\/products\/ignite-ui-react\/react\/components\/grids\/grid\/filtering\">Filtering<\/a><\/li>\n\n\n\n<li><a title=\"Documentation for Data Grid Advanced filtering feature\" href=\"\/products\/ignite-ui-react\/react\/components\/grids\/grid\/advanced-filtering\">Advanced Filtering<\/a><\/li>\n\n\n\n<li><a title=\"Documentation for Data Grid paging feature\" href=\"\/products\/ignite-ui-react\/react\/components\/grids\/grid\/paging\">Paging<\/a><\/li>\n\n\n\n<li><a title=\"Documentation for Data Grid Cell Selection feature\" href=\"\/products\/ignite-ui-react\/react\/components\/grids\/grid\/cell-selection\">Cell Selection<\/a><\/li>\n\n\n\n<li><a title=\"Documentation for Data Grid Row Selection feature\" href=\"\/products\/ignite-ui-react\/react\/components\/grids\/hierarchical-grid\/row-selection\">Row Selection<\/a><\/li>\n\n\n\n<li><a title=\"Documentation for Data Grid Column Selection feature\" href=\"\/products\/ignite-ui-react\/react\/components\/grids\/grid\/column-selection\">Column Selection<\/a><\/li>\n\n\n\n<li><a title=\"Documentation for Data Grid Row Pinning feature\" href=\"\/products\/ignite-ui-react\/react\/components\/grids\/hierarchical-grid\/row-pinning\">Row Pinning<\/a><\/li>\n\n\n\n<li><a title=\"Documentation for Expansion panel component\" href=\"\/products\/ignite-ui-react\/react\/components\/layouts\/expansion-panel\">Expansion<\/a><\/li>\n\n\n\n<li><a title=\"Documentation for Data Grid Group By feature\" href=\"\/products\/ignite-ui-react\/react\/components\/grids\/grid\/groupby\">Group By<\/a><\/li>\n\n\n\n<li>Columns\n<ul class=\"wp-block-list\">\n<li><a title=\"Documentation for Data Grid Multi-Column Headers feature\" href=\"\/products\/ignite-ui-react\/react\/components\/grids\/grid\/multi-column-headers\">Multi column headers<\/a><\/li>\n\n\n\n<li>Columns order<\/li>\n\n\n\n<li>Column properties defined by the `IColumnState` interface.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/Grid-State-Persistence.gif\" alt=\"Example of React Grid State Persistence feature\" title=\"Example of React Grid State Persistence feature\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"version-18-5\">Version 18.5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"\/products\/ignite-ui-react\/react\/components\/general-changelog-dv-react#1850-january-2024\">Changelog 18.5<\/a><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Chart Highlight filter feature<\/h3>\n\n\n\n<p>&nbsp;The <a title=\"Documentation for Ignite UI Chart components\" href=\"\/products\/ignite-ui-react\/react\/components\/charts\/chart-overview\">Ignite UI for React Chart<\/a> components support a <a title=\"Documentation for Ignite UI for React chart highlight feature\" href=\"\/products\/ignite-ui-react\/react\/components\/charts\/features\/chart-highlighting\">data highlighting overlay<\/a> that can enhance the visualization of the series plotted in those charts by allowing you to view a subset of the data plotted. When enabled, this will highlight a subset of data while showing the total set with a reduced opacity in the case of column and area series types, and a dashed line in the case of line series types. This can help you to visualize things like target values versus actual values with your data set. This feature is demonstrated in the following example:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/5141.Chart-Highlight-Filter.gif\" alt=\"Example of React Chart Highlight filter feature\" title=\"Example of React Chart Highlight filter feature\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"version-18-6\">Version 18.6<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"\/products\/ignite-ui-react\/react\/components\/general-changelog-dv-react#1860-march-2024\">Changelog 18.6<\/a><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">New Hierarchical Grid component<\/h3>\n\n\n\n<p>&nbsp;The Ignite UI for <a title=\"Documentation for Ignite UI for React Hierarchical Data Grid\" href=\"\/products\/ignite-ui-react\/react\/components\/grids\/hierarchical-grid\/overview\">React Hierarchical Data Grid<\/a> is used to display and manipulate hierarchical tabular data. Quickly bind your data with very little code or use a variety of events to customize different behaviors. This component provides a rich set of features like data selection, excel style filtering, sorting, paging, templating, column moving, column pinning, export to Excel and CSV, and more. The Hierarchical Grid builds upon the Flat Grid Component and extends its functionality by allowing the users to expand or collapse the rows of the parent grid, revealing corresponding child grids, when more detailed information is needed.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/7446.Hierachical-Grid-Component.gif\" alt=\"Example of React Hierarchical Data Grid Component\" title=\"Example of React Hierarchical Data Grid Component\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">New Radial Gauge<\/h3>\n\n\n\n<p>The <a title=\"Documentation for Ignite UI for React Radial gauge\" href=\"\/products\/ignite-ui-react\/react\/components\/radial-gauge\">React radial gauge component<\/a> provides a number of visual elements, like a needle, tick marks, ranges, and labels, in order to create a predefined shape and scale. The&nbsp;<a class=\"external-link-parent\" href=\"\/products\/ignite-ui-react\/api\/docs\/typescript\/latest\/classes\/igniteui_react_gauges.igrradialgauge.html\"><code class=\"external-link\">IgrRadialGauge<\/code><\/a>&nbsp;also has built-in support for animated transitions. This animation is easily customizable by setting the&nbsp;<a class=\"external-link-parent\" href=\"\/products\/ignite-ui-react\/api\/docs\/typescript\/latest\/classes\/igniteui_react_gauges.igrradialgauge.html#transitionDuration\"><code class=\"external-link\">transitionDuration<\/code><\/a>&nbsp;property.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/1220.Radial-Gudage.gif\" alt=\"Example of React Radial Guage\" title=\"Example of React Radial Guage\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">New Linear Gauge<\/h3>\n\n\n\n<p>&nbsp;The Ignite UI for <a title=\"Documentation for Ignite UI for React linear gauge component\" href=\"\/products\/ignite-ui-react\/react\/components\/linear-gauge\">React linear gauge component<\/a> allows for visualizing data in the form of a linear gauge. The&nbsp;<a class=\"external-link-parent\" href=\"\/products\/ignite-ui-react\/api\/docs\/typescript\/latest\/classes\/igniteui_react_gauges.igrlineargauge.html\"><code class=\"external-link\">IgrLinearGauge<\/code><\/a>&nbsp;provides a simple and concise view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The component has also a built-in support for animated transitions. This animation is easily customizable by setting the&nbsp;<a class=\"external-link-parent\" href=\"\/products\/ignite-ui-react\/api\/docs\/typescript\/latest\/classes\/igniteui_react_gauges.igrlineargauge.html#transitionDuration\"><code class=\"external-link\">transitionDuration<\/code><\/a>&nbsp;property. The features of the linear gauge component include configurable orientation and direction, configurable visual elements such as the needle, and more.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/3386.Linear-Gauge.gif\" alt=\"Example of React Linear Gauge\" title=\"Example of React Linear Gauge\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">New Bullet Graph Gauge<\/h3>\n\n\n\n<p>The <a title=\"Documentation for React bullet graph component\" href=\"\/products\/ignite-ui-react\/react\/components\/bullet-graph\">React bullet graph component<\/a> allows for a linear and concise view of measures compared against a scale.<\/p>\n\n\n\n<p>The Ignite UI for React bullet graph component provides you with the ability to create attractive data presentations, replacing meters and gauges that are used on dashboards with simple yet straightforward and clear bar charts. A bullet graph is one of the most effective and efficient ways to present progress towards goals, good\/better\/best ranges, or compare multiple measurements in as little horizontal or vertical space as possible.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/6011.Bullet-Graph-Gauge.gif\" alt=\"Example of React Bullet Graph Gauge\" title=\"Example of React Bullet Graph Gauge\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">New Text Area component<\/h3>\n\n\n\n<p>&nbsp;The Ignite UI for <a title=\"Documentation for React Text Area component\" href=\"\/products\/ignite-ui-react\/react\/components\/inputs\/text-area\">React Text Area component<\/a> represents a multi-line plain-text editing control. It is useful when you want to allow users to enter a sizeable amount of free-form text, such as a comment on a review or feedback form.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/02254.Text-Area-Component.gif\" alt=\"Example of React Text Area Component\" title=\"Example of React Text Area Component\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">New Button Group component<\/h3>\n\n\n\n<p>&nbsp;The <a title=\"Documentation for React Button Group component\" href=\"\/products\/ignite-ui-react\/react\/components\/inputs\/button-group\">React Button Group component<\/a> is used to organize&nbsp;<a class=\"external-link-parent\" href=\"\/products\/ignite-ui-react\/api\/docs\/typescript\/latest\/classes\/igniteui_react.igrtogglebutton.html\"><code class=\"external-link\">IgrToggleButton<\/code><\/a>s into styled button groups with horizontal\/vertical alignment, single\/multiple selection, and toggling.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/5468.Button-Group-Component.gif\" alt=\"Example of React Button Group Component\" title=\"Example of React Button Group Component\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"to-wrap-it-all-up\">To Wrap It All Up&#8230;<\/h2>\n\n\n\n<p>&nbsp;Seamlessly crafted for compatibility, Ignite UI for Angular is the library that enables you to leverage the power of the latest technologies and major releases. Committed to providing you with the best Angular UI toolkit and related insights, our goal is to equip you with more know-how, new features, enhanced performance, and improved stability. Some of the enhancements were added thanks to the requests from users like yourself through our&nbsp;<a href=\"https:\/\/github.com\/IgniteUI\/igniteui-react\" rel=\"noopener\">Ignite UI for React GitHub<\/a>&nbsp;repository. With this in mind, we are always open to suggestions and feedback \u2013 it makes us grow and better respond to your development needs.<\/p>\n\n\n\n<p>If you need more details, we encourage you to check out our:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/discord.com\/channels\/836634487483269200\/836636770170175558\" rel=\"noopener\">Discord channel<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/IgniteUI\/igniteui-react\/discussions\" rel=\"noopener\">GitHub discussions<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/IgniteUI\/igniteui-react\/blob\/master\/ROADMAP.md\" rel=\"noopener\">Roadmap<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/channel\/UCiPzmz_UyRqQE0Tboc7n66g\" target=\"_blank\" rel=\"noopener noreferrer\">YouTube channel<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/twitter.com\/infragistics\" target=\"_blank\" rel=\"noopener noreferrer\">Twitter<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"in-addition\">In Addition<\/h2>\n\n\n\n<p>&nbsp;Follow&nbsp;<a href=\"https:\/\/medium.com\/ignite-ui\" rel=\"noopener\">Ignite UI on Medium\u202f<\/a>to stay up to date and learn about the latest Angular-related projects we are working on. Give us a star on\u202fGitHub\u202fand help us continue improving our product by addressing any concerns, questions, or feature requests in the\u202fissues\u202fsection.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"\/products\/ignite-ui-react\/download\"><img decoding=\"async\" src=\"https:\/\/static.infragistics.com\/marketing\/Blog-in-content-ads\/Ignite-UI-React\/ignite-ui-react-you-get.gif\" alt=\"Ignite UI for React\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Discover all that&#39;s new in the latest Ignite UI for React 24.1. New grids, gauges, and features &#8211; these are all part of our continuous release. Read more here.<\/p>\n","protected":false},"author":20,"featured_media":2544,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,12],"tags":[],"class_list":["post-2460","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","category-product-updates"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/2460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=2460"}],"version-history":[{"count":3,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/2460\/revisions"}],"predecessor-version":[{"id":2557,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/2460\/revisions\/2557"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2544"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=2460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=2460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=2460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}