DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Data Grid - Custom Summaries

The DataGrid can calculate custom summaries on the client or server side. In this demo, we have implemented client-side logic. The instructions below explain how to do this in your code.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API
  1. Make sure that the remoteOperations.summary, remoteOperations.groupPaging, or remoteOperations property is not set or set to false.

  2. Add a summary configuration object to the summary.groupItems or summary.totalItems array.

  3. Set the object's summaryType to "custom".

  4. Specify the summary's name. It will be used to identify the summary item within the calculateCustomSummary function in the next step.

  5. Calculate the resulting value in the calculateCustomSummary function. Implement the necessary calculation stages. See the function's description for details.

The custom summary in this example calculates the sum of sale amounts for selected rows. To recalculate the resulting value when selection is changed, the code calls the refresh() method in the onSelectionChanged handler.

Client-side custom summaries are suitable for small datasets. If your tests show that client-side calculations result in noticeable lags, we recommend that you use Server-Side Data Aggregation.