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:
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 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 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.
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.
Through an interactive UI edit mode, you can easily add or edit records. The available edit modes are:
You can also use built-in editors to edit a column value in a row easily. The available edit types are:
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).
Aggregates for column values can be easily processed by using the following built-in aggregate types:
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.
React Data Grid offers template support, through which you can create custom user experiences. There are template options for the following features:
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:
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!