Share on twitter
Share on facebook
Share on linkedin

Top 5 Features of React Data Grid

Introduction

The Syncfusion React Data Grid (data table) is a feature-rich control for displaying data in a tabular format. The wide range of functionalities includes data binding, editing, Excel-like filtering, custom sorting, support to export data grids to Excel, CSV, and PDF formats, aggregating rows, selection, etc. It provides extensive appearance customization options and is very useful for generating complex grid-based reports with rich formatting. In this blog, I am going to walk you through five major features of the Data Grid control:

Virtual scrolling

To achieve high performance in React Data Grid when loading a huge number of records, we have provided virtualization support. This loads data that you require instantly as you scroll (load data based on page size) without loading the entire database.

The control loads a high volume of data, nearly 1 million records, in one second, without any performance degradation, with the help of row and column virtualization support.

Row virtualization

Row virtualization allows you to load and render only the rows that fit the content viewport. It is an alternative way of paging, in which the data will be loaded on demand as you scroll vertically.

Column virtualization

Column virtualization allows you to virtualize columns. Data Grid will render only the columns that are in the current viewport, and the rest of the columns will be rendered instantly as you scroll horizontally.

Column virtualization - React Data Grid

Editing

React Data Grid provides full-fledged support to manipulate (create, read, update, and delete) records easily by using the following built-in options for both local and remote data.

Edit modes

Through an interactive UI edit mode, you can easily add or edit records. The available edit modes are:

  • Inline—Allows editing entire row values.
  • Dialog—The row details are shown in a dialog for editing.
  • Batch—The cell itself allows you to edit its value.

Edit modes - React Data Grid

Edit types

You can also use built-in editors to edit a column value in a row easily. The available edit types are:

Edit types - React Data Grid

Grouping with aggregates

React Data Grid supports row grouping. The records are organized into a hierarchical structure to facilitate easier expanding and collapsing of records. Rows can be grouped by dragging the desired columns into the interactive drop area or programmatically.

You have an option to show the aggregate value of the grouped records either in individual group-summary rows, or in group-caption rows. The control also lets you show the total summary of the corresponding column in the individual summary rows (footer summary).

Built-in aggregate types

Aggregates for column values can be easily processed by using the following built-in aggregate types:

  • Sum
  • Average
  • Min
  • Max
  • Count
  • Truecount
  • Falsecount

Custom aggregate

Using this feature, you can use your own custom logic aggregate function to calculate the aggregate value of the corresponding column and display the resultant value in individual summary rows, individual group-summary rows, or group-caption rows.

Custom aggregate - React Data Grid

Templates

React Data Grid offers template support, through which you can create custom user experiences. There are template options for the following features:

  • Header template—You can customize the header element.
  • Column template—You can customize the cell content by displaying a custom element instead of a field value in the column.
  • Row template—You can customize the look and behavior of the grid rows as your application needs.
  • Details template—You can customize the look and behavior of the details row by expanding or collapsing detail content.
  • Toolbar template—You can customize the entire toolbar by adding custom toolbar items.
  • Cell edit template—You can add a custom component for a column to edit the value of corresponding cell.
  • Inline/dialog template—You can customize the form elements and also edit the column values not specified in the React Data Grid columns.

Exporting

Easily export the React Data Grid component in various file formats such as Excel, PDF, or CSV. You can customize the exported document programmatically.

Some of the important supports available in the exporting feature are:

  • Export multiple grids.
  • Export hierarchy grids.
  • Conditional cell formatting.
  • Export with a theme.
  • Export current page.
  • Export hidden columns, etc.

Conclusion

In this blog post, we have seen the top five features of the React Data Grid. I hope you now have a better understanding of the major supported features. What else do you expect from a React data grid? Please share your feedback in the comments section. Try all these features with the help of our available online samples.

If you’re already a Syncfusion user, you can download the product setup from your account. Otherwise, you can download a free, 30-day trial.

If you have any questions about this control, please let us know in the comments section below. You can also contact us through our support forum, Direct-Trac, or Feedback Portal. We are happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top