Backend API
import React from 'react';
import DataGrid, {
Column, Selection, Paging, Summary, TotalItem, type DataGridTypes,
} from 'devextreme-react/data-grid';
import { orders } from './data.ts';
const startupSelectedKeys = [1, 4, 7];
const calculateSelectedRow = (options: DataGridTypes.CustomSummaryInfo) => {
if (options.name === 'SelectedRowsSummary') {
if (options.summaryProcess === 'start') {
options.totalValue = 0;
}
const isRowSelected = options.component.isRowSelected(options.value?.ID);
if (options.summaryProcess === 'calculate' && isRowSelected) {
options.totalValue += options.value.SaleAmount;
}
}
};
const onSelectionChanged = (e: DataGridTypes.SelectionChangedEvent) => e.component.refresh(true);
const App = () => (
<DataGrid
id="gridContainer"
defaultSelectedRowKeys={startupSelectedKeys}
onSelectionChanged={onSelectionChanged}
dataSource={orders}
keyExpr="ID"
showBorders={true}>
<Paging enabled={false} />
<Selection mode="multiple" />
<Column dataField="OrderNumber" width={130} caption="Invoice Number" />
<Column dataField="OrderDate" dataType="date" />
<Column dataField="Employee" />
<Column dataField="CustomerStoreCity" caption="City" />
<Column dataField="CustomerStoreState" caption="State" />
<Column dataField="SaleAmount" width={160} alignment="right" format="currency" />
<Summary calculateCustomSummary={calculateSelectedRow}>
<TotalItem
name="SelectedRowsSummary"
summaryType="custom"
valueFormat="currency"
displayFormat="Sum: {0}"
showInColumn="SaleAmount" />
</Summary>
</DataGrid>
);
export default App;
import React from 'react';
import DataGrid, {
Column,
Selection,
Paging,
Summary,
TotalItem,
} from 'devextreme-react/data-grid';
import { orders } from './data.js';
const startupSelectedKeys = [1, 4, 7];
const calculateSelectedRow = (options) => {
if (options.name === 'SelectedRowsSummary') {
if (options.summaryProcess === 'start') {
options.totalValue = 0;
}
const isRowSelected = options.component.isRowSelected(options.value?.ID);
if (options.summaryProcess === 'calculate' && isRowSelected) {
options.totalValue += options.value.SaleAmount;
}
}
};
const onSelectionChanged = (e) => e.component.refresh(true);
const App = () => (
<DataGrid
id="gridContainer"
defaultSelectedRowKeys={startupSelectedKeys}
onSelectionChanged={onSelectionChanged}
dataSource={orders}
keyExpr="ID"
showBorders={true}
>
<Paging enabled={false} />
<Selection mode="multiple" />
<Column
dataField="OrderNumber"
width={130}
caption="Invoice Number"
/>
<Column
dataField="OrderDate"
dataType="date"
/>
<Column dataField="Employee" />
<Column
dataField="CustomerStoreCity"
caption="City"
/>
<Column
dataField="CustomerStoreState"
caption="State"
/>
<Column
dataField="SaleAmount"
width={160}
alignment="right"
format="currency"
/>
<Summary calculateCustomSummary={calculateSelectedRow}>
<TotalItem
name="SelectedRowsSummary"
summaryType="custom"
valueFormat="currency"
displayFormat="Sum: {0}"
showInColumn="SaleAmount"
/>
</Summary>
</DataGrid>
);
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
export const orders = [{
ID: 1,
OrderNumber: 35703,
OrderDate: '2024-04-10',
SaleAmount: 11800,
Terms: '15 Days',
TotalAmount: 12175,
CustomerStoreState: 'California',
CustomerStoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
}, {
ID: 4,
OrderNumber: 35711,
OrderDate: '2024-01-12',
SaleAmount: 16050,
Terms: '15 Days',
TotalAmount: 16550,
CustomerStoreState: 'California',
CustomerStoreCity: 'San Jose',
Employee: 'Jim Packard',
}, {
ID: 5,
OrderNumber: 35714,
OrderDate: '2024-01-22',
SaleAmount: 14750,
Terms: '15 Days',
TotalAmount: 15250,
CustomerStoreState: 'Nevada',
CustomerStoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
ID: 7,
OrderNumber: 35983,
OrderDate: '2024-02-07',
SaleAmount: 3725,
Terms: '15 Days',
TotalAmount: 3850,
CustomerStoreState: 'Colorado',
CustomerStoreCity: 'Denver',
Employee: 'Todd Hoffman',
}, {
ID: 9,
OrderNumber: 36987,
OrderDate: '2024-03-11',
SaleAmount: 14200,
Terms: '15 Days',
TotalAmount: 14800,
CustomerStoreState: 'Utah',
CustomerStoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
ID: 11,
OrderNumber: 38466,
OrderDate: '2024-03-01',
SaleAmount: 7800,
Terms: '15 Days',
TotalAmount: 8200,
CustomerStoreState: 'California',
CustomerStoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
}, {
ID: 15,
OrderNumber: 39874,
OrderDate: '2024-02-04',
SaleAmount: 9050,
Terms: '30 Days',
TotalAmount: 19100,
CustomerStoreState: 'Nevada',
CustomerStoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
}, {
ID: 18,
OrderNumber: 42847,
OrderDate: '2024-02-15',
SaleAmount: 20400,
Terms: '30 Days',
TotalAmount: 20800,
CustomerStoreState: 'Wyoming',
CustomerStoreCity: 'Casper',
Employee: 'Todd Hoffman',
}, {
ID: 19,
OrderNumber: 43982,
OrderDate: '2024-05-29',
SaleAmount: 6050,
Terms: '30 Days',
TotalAmount: 6250,
CustomerStoreState: 'Utah',
CustomerStoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
ID: 29,
OrderNumber: 56272,
OrderDate: '2024-02-06',
SaleAmount: 15850,
Terms: '30 Days',
TotalAmount: 16350,
CustomerStoreState: 'Utah',
CustomerStoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
}, {
ID: 30,
OrderNumber: 57429,
OrderDate: '2023-12-31',
SaleAmount: 11050,
Terms: '30 Days',
TotalAmount: 11400,
CustomerStoreState: 'Arizona',
CustomerStoreCity: 'Phoenix',
Employee: 'Clark Morgan',
}, {
ID: 32,
OrderNumber: 58292,
OrderDate: '2024-05-13',
SaleAmount: 13500,
Terms: '15 Days',
TotalAmount: 13800,
CustomerStoreState: 'California',
CustomerStoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
}];
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const orders = [
{
ID: 1,
OrderNumber: 35703,
OrderDate: '2024-04-10',
SaleAmount: 11800,
Terms: '15 Days',
TotalAmount: 12175,
CustomerStoreState: 'California',
CustomerStoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
},
{
ID: 4,
OrderNumber: 35711,
OrderDate: '2024-01-12',
SaleAmount: 16050,
Terms: '15 Days',
TotalAmount: 16550,
CustomerStoreState: 'California',
CustomerStoreCity: 'San Jose',
Employee: 'Jim Packard',
},
{
ID: 5,
OrderNumber: 35714,
OrderDate: '2024-01-22',
SaleAmount: 14750,
Terms: '15 Days',
TotalAmount: 15250,
CustomerStoreState: 'Nevada',
CustomerStoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
},
{
ID: 7,
OrderNumber: 35983,
OrderDate: '2024-02-07',
SaleAmount: 3725,
Terms: '15 Days',
TotalAmount: 3850,
CustomerStoreState: 'Colorado',
CustomerStoreCity: 'Denver',
Employee: 'Todd Hoffman',
},
{
ID: 9,
OrderNumber: 36987,
OrderDate: '2024-03-11',
SaleAmount: 14200,
Terms: '15 Days',
TotalAmount: 14800,
CustomerStoreState: 'Utah',
CustomerStoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
},
{
ID: 11,
OrderNumber: 38466,
OrderDate: '2024-03-01',
SaleAmount: 7800,
Terms: '15 Days',
TotalAmount: 8200,
CustomerStoreState: 'California',
CustomerStoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
},
{
ID: 15,
OrderNumber: 39874,
OrderDate: '2024-02-04',
SaleAmount: 9050,
Terms: '30 Days',
TotalAmount: 19100,
CustomerStoreState: 'Nevada',
CustomerStoreCity: 'Las Vegas',
Employee: 'Harv Mudd',
},
{
ID: 18,
OrderNumber: 42847,
OrderDate: '2024-02-15',
SaleAmount: 20400,
Terms: '30 Days',
TotalAmount: 20800,
CustomerStoreState: 'Wyoming',
CustomerStoreCity: 'Casper',
Employee: 'Todd Hoffman',
},
{
ID: 19,
OrderNumber: 43982,
OrderDate: '2024-05-29',
SaleAmount: 6050,
Terms: '30 Days',
TotalAmount: 6250,
CustomerStoreState: 'Utah',
CustomerStoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
},
{
ID: 29,
OrderNumber: 56272,
OrderDate: '2024-02-06',
SaleAmount: 15850,
Terms: '30 Days',
TotalAmount: 16350,
CustomerStoreState: 'Utah',
CustomerStoreCity: 'Salt Lake City',
Employee: 'Clark Morgan',
},
{
ID: 30,
OrderNumber: 57429,
OrderDate: '2023-12-31',
SaleAmount: 11050,
Terms: '30 Days',
TotalAmount: 11400,
CustomerStoreState: 'Arizona',
CustomerStoreCity: 'Phoenix',
Employee: 'Clark Morgan',
},
{
ID: 32,
OrderNumber: 58292,
OrderDate: '2024-05-13',
SaleAmount: 13500,
Terms: '15 Days',
TotalAmount: 13800,
CustomerStoreState: 'California',
CustomerStoreCity: 'Los Angeles',
Employee: 'Harv Mudd',
},
];
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="./bundle.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
<script src="bundles/vendor/react.vendor.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
#gridContainer {
height: 440px;
margin-bottom: 10px;
}
-
Make sure that the remoteOperations.summary, remoteOperations.groupPaging, or remoteOperations property is not set or set to false.
-
Add a summary configuration object to the summary.groupItems or summary.totalItems array.
-
Set the object's summaryType to "custom".
-
Specify the summary's name. It will be used to identify the summary item within the calculateCustomSummary function in the next step.
-
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.