What's New in Ignite UI for React - Fastest React Data Grid

Daizen Ikehara / Friday, February 15, 2019

As part of our Ignite UI for React release (take a peek at our general overview blog or our blogs on the React Data Chart and Excel Library) the native React UI toolset includes numerous controls to build modern experiences for web and mobile.

In this blog, I'll run through everything you need to know about the fastest React Data Grid included in our release.

Fastest React Data Grid

Ignite UI for React includes the world’s fastest native React Data Grid. The grid delivers on the most demanding needs for any application. Built for high-volume, real-time scenarios, our React Data Table is designed to be the backbone of your mission-critical apps.able

Live Grid

The lightweight React Data Grid was built to meet the challenge of displaying large amounts of data while providing superior versatility and performance on mobile devices. The virtualization engine provides a world-class foundation on which our core line-of-business features rest.

Below, I'll touch upon the performance features. These features allow you to load thousands, millions record with smooth scrolling. 

Virtualization

The Live Grid is optimized for high-performance, speed, and smooth handling of large data. You can seamlessly scroll through an unlimited number of rows and columns in your grid with the grid's column and row virtualization. Your users will experience an Excel-like scrolling performance with no lag, screen flicker, or visual delay. You can bind thousands of records to the Live Grid, group them and live-updating multiple columns every couple of milliseconds without impacting performance.
Ignite UI for React - Live Grid - Scrolling

Remote Data Source

The Live Grid also supports binding to a remote data source with little coding or configuration. We provide a virtualized data source that has ability to load data asynchronously. Even if you have millions of records, you don’t need to load them at once. When scroll position is changed, the data source loads chunks of rows for you as necessary. In this way, you can get the fast data loads and the grid stays responsive!
Ignite UI for React - Live Grid - Remote Data Binding

We also provide “must-have” features for Line of Business Applications as usual.

Column Types

The Live Grid supports five column types that can help you visualize your data appropriately

  • Text Column
  • Numeric Column
  • DateTime Column
  • Image Column
  • Template Colum

Ignite UI for React - Live Grid - Column Types

Filtering

The Live Grid supports filtering out-of-the-box through the API.
Ignite UI for React - Live Grid - Filtering

Sorting

The Live Grid level sorting is provided.
Ignite UI for React - Live Grid - Sorting

Column Grouping

When a grouping is applied, the data is organized into a hierarchical structure based on matching property values. The records that have identical values in the grouped column combine to form a group. A group represents a collection of data that belongs to a specific category. While grouping on a single column is standard for most mobile data grids, the data grid supports the ability to apply column grouping to multiple columns, which may or may not be defined as a visible column in the data grid.

Row Pinning

The Live Grid control allows row pinning by either using keys or the underlying data source items. When a row is pinned, it will show at the top of the data grid and remain fixed there.

Row Selection

The Live Grid control allows three modes of selection for its rows: Single Row, Multiple Row, None.

Get Started with Ignite UI for React

To get started with Ignite UI for React, you can visit the product page and browse the online samples. You can also download a project that includes samples that can run on your local environment with npm packages.

Happy Coding!

Ignite UI for React