Deep Dive into Grouping and Aggregates of React Data Grid

Deep Dive into Grouping and Aggregates of React Data Grid


Welcome back to this series on
working with the React Data Grid. Last time, you saw the different
filter options in React Data Grid. In this video, I will show
you more about grouping. You will also learn more about
footer aggregates, custom aggregates and group aggregates
of React Data Grid. In my getting started video I
showed you how to enable grouping option in React Data Grid. I will give a recap of
this by opening the sample created in that video. You can get this sample from the
link in the description part below. or watch my getting
started video from the link in double card. Here, I had
loaded the data from the local JSON file and displayed
only selective columns using the column customization. To enable the grouping option, I
had imported group from ej2-react-grids package. Injected into
the grid component and enabled the allow grouping option in the grid. This way I enabled the
grouping option in the grid. You can also apply grouping at
initial rendering of the grid component. To achieve this create
a constant groupOptions of type GroupSettingsModel. You can import this from
ej2-react-grids package. add a field columns, which
is of type array and add a value ShipCountry. Assign this to the group
settings props of the grid component. In the output you will see
the grid component grouped with the column ShipCountry. Next I will show you how to add
aggregates to the grid component Aggregates are special rows that
contains the processed result of other row values. The in-built aggregate types
available in the grid component are sum, average, min, max, count,
true count and false count. Let’s see the aggregates in action. Now I will display the
aggregates row in the footer of the grid component to achieve
this import Aggregate, AggregatesDirective, AggregateDirective, AggregateColumnsDirective and
AggregateColumnDirective from the ej2-react-grids package. Inject aggregate to the grid
component and disable the grouping at this point. To enable the aggregate in the
grid component configure it within AggregatesDirective. I’m going to add a row, which
sums up the value in the column Freight. So add AggregateDirective within AggregatesDirective. Within this aggregate row, I
should add the aggregate columns customization using
AggregateColumnsDirective. As I’m going to display the
sum value of the column Freight. I will add a single
AggregateColumnDirective. Mentione the field as Freight and
the type us sum. You also need to mention the
template to be displayed using the footer template. Create a callback function for
the footer template and display the sum value using props sum. In the output you can see the
sum value of the column Freight displayed at the bottom of the grid component. If you want to
add additional aggregate rows add more aggregate directives. I will add an additional
aggregate row to display the maximum value of the
column Freight. Duplicate the aggregate
directive. Change the type to Max and the
template to maximum. This way you can add multiple
aggregate rows to the grid. Next I will show you how to add
custom aggregates in the footer. In this example, I will find the
number of records that have the ShipCountry value as Germany. To achieve this, I will add
additional aggregate column directive with the field as ship
country type as custom. Add your callback function to
the footer template. And display the custom value. Finally add the custom logic
in the callback function of custom aggregate. Get the record details in args.result Filter it by
ship country and return the count value. In the output you will see the
value displayed as 2 as there are 2 records with the ship
country as Germany. As a final topic of this video I
will show you how to add aggregates in the grouped data grid. You could add the
aggregate values, either in the group footer are as a group caption. To look at it’s
working I will enable the grouping option again. Add two more aggregate
directives one for adding in Group footer and another for
adding in Group caption. I will reuse the code, which
was created earlier. And remove the custom
aggregate column, I will change the footer template
to group footer template. And change the 2nd row footer
template to group caption template. In the output the sum
of the group is displayed in the group footer and the
maximum value is displayed in the group caption. Let me summarize some of the
major points, we have discussed in this video. 1st we saw how to
enable grouping in the grid component and how to add the
initial grouping option in the grid component. Next we saw
about the inbuilt aggregates and how to add it in the footer of the grid component. Then we saw
about custom aggregates. Finally we saw how to add
aggregates to the group footer and group caption. Thanks for watching this
video if you found this video useful. Please give it
a like and subscribe to our channel. Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *