We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Syncfusion Feedback


N-level column grouping

Allows the user to perform N-level grouping without any restrictions. It also possible to hide or show grouped columns in the Data Grid.


Grouping with Aggregate in React Data Grid.

Grouping with aggregates

Data Grid allows users to apply the aggregate function on grouped rows. Users can display aggregate values for a group either on the group footer cell or group caption cell. It is also possible to define multiple aggregations to the same column.


Group by format

Grouping is performed based on the field value, by default. A column can be grouped on the basis of formatted value instead of raw value to make viewing formatted date columns easier.

Group rows by format in React Data Grid.


React Data Grid with Lazy Load Grouping

Lazy load grouping with paging

Load huge amounts of grouped records to the Grid without any performance degradation using the on-demand concept. While grouping, the Grid will render only the initial level caption rows in the collapsed state based on page size. The child records of each caption will be fetched on demand and render in the Grid when you expand the caption row.


Lazy load grouping with infinite scrolling

Load large amounts of grouped records to the Grid without any performance degradation using the on-demand concept. When infinite scrolling is enabled in a grid, lazy load grouping renders records in a collapsed state when binding data. The grouped items with N levels of data will be loaded on demand with infinite scrolling when the corresponding group is expanded.

React Data Grid lazy load grouping with infinite scrolling


85+ REACT UI COMPONENTS

Scroll up icon