Log in to like this post! What's New: Ignite UI for React 18.3.0 Release Radoslav Mirchev / Monday, October 23, 2023 At Infragistics, we always strive to provide the best components for your development experience. And today's Ignite UI for React 18.3.0 includes the new React Data Grid. The React Data Grid is part of the Ignite UI family, and just like Angular, Web Components, and Blazor Data Grids, it shares the same design, behavior, UX, and capabilities. This enables a seamless switch between Angular, Blazor, Web Components, or React for the development teams, allowing them to be more agile to changing requirements in React. It is time to get a high-level view of all the Data Grid features we're launching in Ignite UI for React 18.3.0 Release. Here are the React Grid features: Header Template Cell Template Data Binding Complex Data Binding Collapsible Column Groups Column Hiding Column Reordering & Moving Column Pinning Column Resizing Column Types Conditional Styling Display Density Editing React Grid Cell Editing Cascading Combos Row Adding Row Editing Export to Excel Service Filtering React Grid Advanced Filtering Excel Style Filtering Group By Live Data / Real-Time Updates Master-Detail Keyboard Navigation Multi-Column Headers Overview Multi-row Layout Pagination Remote Data Operations Row Actions Row Dragging Row Pinning Search Filter Selection Cell Selection Column Selection Row Selection Sizing Sorting Summaries Virtualization and Performance Toolbar Theming The React Data Grid The new React Data Grid component is used for displaying data in a tabular format quickly and easily. The Data Grid is a modern grid component packed with features such as data editing, selection, filtering, sorting, grouping, pinning, paging, templating, column moving, exporting, and more. Compared to the previous grid we shipped in Ignite UI for React, the new Data Grid has significantly more features, a richer API, and built-in theming. Header Template The Header Template allows you to customize the appearance and behavior of column headers in Ignite UI for React IgrGrid. Cell Template The Cell Template enables you to customize the appearance and behavior of cells in Ignite UI for React IgrGrid. Collapsible Column Groups The React Grid Collapsible Column Groups feature in Ignite UI allows you to organize and manage multiple levels of nested columns and column groups in the React Grid by grouping them together and providing the option to collapse or expand these groups for improved data visualization and navigation. Column Hiding The Ignite UI for React has a built-in column hiding UI, which can be used through the React Grid toolbar to change the visible state of the columns. Developers have the flexibility to define the Column Hiding UI anywhere within the page as needed. The React Grid Column Hiding feature is especially useful when one wants to decrease the size of the grid and eliminate the need for tabbing through redundant fields. Column Reordering & Moving The React Grid Column Moving feature in Ignite UI allows quick and easy column reordering. This can be done through the Column Moving API or by dragging and dropping the headers to another position via mouse or touch gestures. In the React Grid, you can enable Column Moving for pinned and unpinned columns and for Multi-Column Headers as well. Column Pinning Column Pinning in Ignite UI for React allows end users to lock a column in a particular column order. As a result, this will allow them to see it while horizontally scrolling the IgrGrid. The React Grid has a built-in column pinning UI, which can be used through the IgrGrid's toolbar to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns via the Column Pinning feature. Column Resizing The React Grid Column Resizing feature in Ignite UI allows users to adjust the width of the columns of the Grid easily. By default, they will see a temporary resize indicator while the drag resizing operation is in effect. Several resizing options are available - Resizing Columns in Pixels/Percentages, Restrict Column Resizing, Auto-Size Columns on Double Click, and Auto-Size Columns on Initialization. Column Types Ignite UI for React IgrGrid provides a default handling of column data types, based on which the appearance of the default and editing templates will be present. Supported column data types: Number Siring Date Boolean Currency Percent Conditional Styling The React Grid component in Ignite UI allows custom styling on a row or cell level. The Grid Conditional Styling functionality visually emphasizes or highlights data that meets certain criteria, making it easier for users to identify important information or trends within the grid. Display Density The React Grid Display Density in Ignite UI allows users to control the spacing and layout of data within the Grid. By changing density, you can significantly improve the user experience when interacting with large amounts of content. They can choose from three display density options: Cozy Comfortable Compact Editing The React Grid Cell editing feature in Ignite UI provides an easy way to perform data manipulation operations like creating, updating, and deleting records. The React Grid provides a powerful public API that allows you to customize how these operations are performed. The data manipulation phases are: React Grid Cell Editing The React Grid Cell Editing feature in Ignite UI provides a great data manipulation capability of the content of individual cells within the React Grid component and comes with a powerful API for React CRUD operations. It is a fundamental feature in apps like spreadsheets, data tables, and data grids, allowing users to add, edit, or update data within specific cells. By default, the Grid in Ignite UI for React is used in cell editing. Due to the default cell editing template, there will be different editors based on the column data type Top of Form. In addition, you can define your own custom templates for update-data actions and override the default behavior for committing and discarding any changes. Cascading Combos The Editing feature in Ignite UI provides with the opportunity to use Cascading Combobox components. By selecting the value in any preceding Combobox, the users will receive only the data that is relevant to their selection within the next React Combobox component. Row Adding The IgrGrid provides a convenient way to perform data manipulations through inline row adding and a powerful API for React CRUD operations. Add an IgrActionStrip component with editing actions enabled in the grid's template, hover a row and use the provided button, press "ALT" + "+" to spawn the row adding UI. Row Editing The IgrGrid provides a convenient way to perform data manipulations through inline editing and a powerful API for React CRUD operations. Click on a row and press Enter key, or simply double-click with the mouse on the row that needs to be modified. Batch Editing (Coming Soon) Export to Excel Service The React Grid Excel Exporter service in Ignite UI can export data to Excel. The data export functionality is encapsulated in the ExcelExporterService class and the data is exported in MS Excel table format. This format enables features like filtering, sorting, etc. To do this, you need to invoke the Export method of ExcelExporterService and pass the Grid component as the first argument to export the grid easily. Filtering The React Grid Filtering in Ignite UI is a feature that allows for selectively displaying or hiding data based on specific criteria or conditions. There is a bound data container through which the IgrGrid Component provides rich filtering API and all the filtering capabilities. The available filtering types here are three: React Grid Advanced Filtering The React Grid Advanced Filtering in Ignite UI allows you to manipulate data by providing a dialog where you can create different groups with filtering conditions across all columns in the React Grid. Excel Style Filtering The React Grid exposes an Excel-style filtering feature that provides an Excel-like filtering UI. It simplifies the process of working with large datasets. The main idea is to help them filter the most relevant data while eliminating irrelevant entries. Group By The Ignite UI for React Group By behavior in React Grid creates grouped data rows based on the column values. The Group By in the IgrGrid allows for visualizing the groups in a hierarchical structure. The grouped data rows can be expanded or collapsed and the order of grouping may be changed through the UI or API. When Row Selection is enabled, a Group By row selector is rendered in the left-most area of the group row. In case the rowSelection property is set to single, checkboxes are disabled and only serve as an indication for the group where selection is placed. If the rowSelection property is set to multiple, clicking over the Group By row selector selects all records belonging to this group. Live Data / Real-Time Updates The Ignite UI for React Live Data Updates feature in the Grid is used for enabling real-time or near-real-time updates of data displayed within the grid. This is extremely useful in apps where data is constantly changing, like stock market trackers, live sports scores, or IoT (Internet of Things) dashboards. The IgrGrid can handle thousands of updates per second, while staying responsive for user interactions. Master-Detail The IgrGrid component supports specifying a detail template that displays additional details for a particular row by expanding/collapsing its content. When specified each record acts as a master, which, upon expansion, shows a customizable details template with contextual data for the current record. This mode is useful when you need to display master-detail style data in a hierarchical structure. Keyboard Navigation The React Grid Keyboard Navigation feature in Ignite UI provides a rich variety of keyboard interactions for the user. It enhances the accessibility of the IgrGrid and allows the user to navigate through any type of elements inside (cell, row, column header, toolbar, footer, etc.). This functionality is enabled by default, and the developer has the option to override any of the default behaviors in an easy way. The tabulations of the IgrGrid has been reduced so that the navigation is compliant with W3C accessibility standards and convenient to use. Currently, the IgrGrid introduces the following tab stops: GroupBy or Toolbar area (if enabled). Grid header. Grid body. Column summaries (if enabled). Grid paginator (if enabled). Multi-Column Headers Overview The React Grid Multi-Column Headers feature in Ignite UI allows you to group columns by placing them under a common multi-header. Each multi-column headers group in the IgrGrid could be a representation of combinations between other groups or columns. This feature is particularly useful when dealing with large datasets where scrolling horizontally might be cumbersome Multi-row Layout The The React Grid Multi-row Layout feature in Ignite UI extends the rendering capabilities of the IgrGrid. The feature allows splitting a single data record into multiple visible rows. Pagination The React Grid Pagination feature in Ignite UI is used to split a large set of data into a sequence of pages that have similar content. React grid pagination improves user experience and data interaction. IgrGrid pagination is configurable via a separate component projected in the grid tree by defining a IgrPaginator tag, similar to adding of a column. As in any React table, the pagination in the React Grid supports template for custom pages. Remote Data Operations By default, IgrGrid uses its own logic for performing data operations. You can perform these tasks remotely and feed the resulting data to the IgrGrid by taking advantage of certain inputs and events, which are exposed by the IgrGrid. Row Actions The IgrGrid component in Ignite UI for React provides the ability to use IgrActionStrip and utilize CRUD for row/cell components and row pinning. The Action Strip component can host predefined UI controls for these operations. Row Dragging Ignite UI for React IgrGrid row dragging is initialized on the root IgrGrid component and is configurable via the rowDraggable input. Enabling row dragging provides users with a row drag-handle with which they can initiate the dragging of a row. Row Pinning In the React IgrGrid, you can pin one or multiple rows to the top or bottom of the grid. Row Pinning allows end-users to pin rows in a particular order, duplicating them in a special area that is always visible even when they scroll the IgrGrid vertically. The Material UI Grid has a built-in row pinning UI, which is enabled by initializing an IgrActionStrip component in the context of IgrGrid. In addition, you can define custom UI and change the pin state of the rows via the Row Pinning API. Search Filter The React Grid Search enables the process of finding values in the collection of data. We make it easier to set up this functionality and it can be implemented with a search input box, buttons, keyboard navigation, and other useful features for an even better user experience. While browsers natively provide content search functionality, most of the time, the IgrGrid virtualizes its columns and rows that are out of view. In these cases, the native grid search is unable to search data in the virtualized cells since they are not part of the DOM. We have extended the Ignite UI for React Material table-based grid with a search API that allows you to search through the virtualized content of the IgrGrid. Selection With the Ignite UI for React IgrGrid you can easily select data by using a variety of events, rich API or with simple mouse interactions like single select. Cell Selection The React Grid Cell Selection in Ignite UI enables rich data select capabilities and offers powerful API in the Grid component. The React Grid supports three selection modes: - Grid Multiple Cell Selection - Grid Single Selection - Grid None Selection Column Selection The Selection feature in Ignite UI offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the columnSelection input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations. Row Selection The Row Selection feature in React Grid allows users to interactively select, highlight, or deselect a single or multiple rows of data. There are several selection modes available in the IgrGrid: None Selection, Multiple Selection, Single Selection Sizing The Sizing feature in React Grid is an important aspect of creating responsive and user-friendly grid interfaces. The React Grid Sizing feature enables users to adjust the width and height of the grid to accommodate different screen sizes, content, or user preferences. In terms of border and padding size for the IgrGrid, they are taken into its width/height size calculations or also known as Border box sizing. It is applied in all scenarios. Sorting The Data Sorting feature in React Grid is enabled on a per-column level, meaning that the IgrGrid can have a mix of sortable and non-sortable columns. Performing React sort actions enables you to change the display order of the records based on specified criteria. Summaries The Summaries feature in React Grid functions on a per-column level as group footer. React Grid summaries is powerful feature which enables the user to see column information in a separate container with a predefined set of default summary items, depending on the type of data within the column or by implementing a custom template in the IgrGrid. Virtualization and Performance In Ignite UI for React, the IgrGrid control virtualizes its content both vertically and horizontally. Toolbar The Ignite UI for React Toolbar in is a container for UI operations in the React Grid. The React toolbar is located at the top of the React component, i.e., the IgrGrid and it matches its horizontal size. The toolbar container can host any custom content or set of predefined UI controls. The default set for the React Grid includes: Column Hiding Column Pinning Excel Exporting Advanced Filtering The toolbar and the predefined UI components support React events and expose API for developers. Theming Our React grid can be easily customized to match your brand identity. In addition to predefined themes and palettes, you can further customize the look and feel of your data grid by using a set of CSS custom properties. Wrap-Up We continue to ship new features on a continuous schedule, to improve performance, and to provide stability improvements as we are committed to providing you with the best React UI toolkit and related insights to empower you with more know-how. We have details for each piece of this release, and you can check them out here: Ignite UI for React - GitHub If you need more details, we encourage you to check out our: Discord channel GitHub discussions README YouTube channel Twitter Lastly, when you do build something cool with our controls, please make sure to let us know.