Aggregates in React Grid component
27 Mar 202424 minutes to read
The Aggregates feature in the Syncfusion React Grid component allows you to display aggregate values in the footer, group footer, and group caption of the grid. With this feature, you can easily perform calculations on specific columns and show summary information. This feature can be configured using the e-aggregates directive. To represent an aggregate column, you need to specify the minimum required properties, such as field and type.
To use aggregate feature, you need to inject the Aggregate module into the grid.
Displaying aggregate values
By default, the aggregate values are displayed in the footer, group, and caption cells of the grid. However, you can choose to display the aggregate value in any of these cells by using the following properties:
-
footerTemplate: Use this property to display the aggregate value in the footer cell. You can define a custom template to format the aggregate value as per your requirements.
-
groupFooterTemplate: Use this property to display the aggregate value in the group footer cell. Similar to the footerTemplate, you can provide a custom template to format the aggregate value.
-
groupCaptionTemplate: Use this property to display the aggregate value in the group caption cell. You can define a custom template to format the aggregate value.
import { AggregateColumnDirective, ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { AggregateColumnsDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Aggregate, Group, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const groupOptions = {
columns: ['ShipCountry'],
showDropArea: false
};
const footerSum = (props) => {
return (<span>Sum: {props.Sum}</span>);
};
const footerMax = (props) => {
return (<span>Max: {props.Max}</span>);
};
return (<GridComponent dataSource={data} allowPaging={true} allowGrouping={true} groupSettings={groupOptions} height={268}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='OrderDate' headerText='OrderDate' format='yMd' width='150' />
<ColumnDirective field='Freight' headerText='Freight' format='C2' textAlign='Right' width='150' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective>
<AggregateColumnsDirective>
<AggregateColumnDirective field='Freight' type='Sum' format='C2' groupFooterTemplate={footerSum} />
</AggregateColumnsDirective>
</AggregateDirective>
<AggregateDirective>
<AggregateColumnsDirective>
<AggregateColumnDirective field='Freight' type='Max' format='C2' groupCaptionTemplate={footerMax} />
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Page, Aggregate, Group]} />
</GridComponent>);
}
export default App;
import { AggregateColumnDirective, ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { AggregateColumnsDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Aggregate, Group, GroupSettingsModel, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const groupOptions: GroupSettingsModel = {
columns: ['ShipCountry'],
showDropArea: false
};
const footerSum = (props) => {
return (<span>Sum: {props.Sum}</span>)
}
const footerMax = (props) => {
return (<span>Max: {props.Max}</span>)
}
return (<GridComponent dataSource={data} allowPaging={true} allowGrouping={true}
groupSettings={groupOptions} height={268}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='OrderDate' headerText='OrderDate' format='yMd' width='150' />
<ColumnDirective field='Freight' headerText='Freight' format='C2' textAlign='Right' width='150' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective>
<AggregateColumnsDirective>
<AggregateColumnDirective field='Freight' type='Sum' format='C2' groupFooterTemplate={footerSum} />
</AggregateColumnsDirective>
</AggregateDirective>
<AggregateDirective>
<AggregateColumnsDirective>
<AggregateColumnDirective field='Freight' type='Max' format='C2' groupCaptionTemplate={footerMax} />
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Page, Aggregate, Group]} />
</GridComponent>)
}
export default App;
export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];
export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];
- When using local data, the total summary is calculated based on the entire dataset available in the grid. The aggregate values will reflect calculations across all the rows in the grid.
- When working with remote data, the total summary is calculated based on the current page records. This means that if you have enabled pagination and are displaying data in pages, the aggregate values in the footer will represent calculations only for the visible page.
Built-in aggregate types
The Syncfusion React Grid component provides several built-in aggregate types that can be specified in the type property to configure an aggregate column.
The available built-in aggregate types are:
- Sum: Calculates the sum of the values in the column.
- Average: Calculates the average of the values in the column.
- Min: Finds the minimum value in the column.
- Max: Finds the maximum value in the column.
- Count: Counts the number of values in the column.
- TrueCount: Counts the number of true values in the column.
- FalseCount: Counts the number of false values in the column.
Here is an example that demonstrates how to use built-in aggregates types in the Syncfusion Grid:
import { AggregateColumnDirective, ColumnDirective, ColumnsDirective, GridComponent, Group, Inject } from '@syncfusion/ej2-react-grids';
import { AggregateColumnsDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Aggregate } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const groupSettings = { showDropArea: false, columns: ['ShipCountry'] };
const freightTemplate = (props) => {
return (<span>Max: {props.Max}</span>)
}
const shippedDateTemplate = (props) => {
return (<span>Max: {(new Date(props.Max)).toLocaleDateString()}</span>)
}
const orderDateTemplate = (props) => {
return (<span>Min:{(new Date(props.Min)).toLocaleDateString()}</span>)
}
const verifiedTemplate = (props) => {
return (<span>TrueCount: {props.TrueCount}</span>)
}
return (<GridComponent dataSource={data} height={315} allowGrouping={true} groupSettings={groupSettings}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='OrderDate' headerText='Order Date' type='date' width='150' format='yMd' />
<ColumnDirective field='ShippedDate' headerText='ShippedDate' type='date' width='150' format='yMd' />
<ColumnDirective field='Freight' headerText='Freight' width='150' format='C2' />
<ColumnDirective field='isVerified' headerText='Verified' width='150' type='boolean' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective>
<AggregateColumnsDirective>
<AggregateColumnDirective field='Freight' type='Max' format='C2' footerTemplate={freightTemplate} />
<AggregateColumnDirective field='ShippedDate' type='Max' footerTemplate={shippedDateTemplate} />
<AggregateColumnDirective field='OrderDate' type='Min' footerTemplate={orderDateTemplate} />
<AggregateColumnDirective field='isVerified' type='TrueCount' footerTemplate={verifiedTemplate} />
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Aggregate, Group]} />
</GridComponent>)
}
export default App;
import { AggregateColumnDirective, ColumnDirective, ColumnsDirective, GridComponent, Group, GroupSettingsModel, Inject } from '@syncfusion/ej2-react-grids';
import { AggregateColumnsDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Aggregate } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const groupSettings: GroupSettingsModel = { showDropArea: false, columns: ['ShipCountry'] };
const freightTemplate = (props) => {
return (<span>Max: {props.Max}</span>)
}
const shippedDateTemplate = (props) => {
return (<span>Max: {(new Date(props.Max)).toLocaleDateString()}</span>)
}
const orderDateTemplate = (props) => {
return (<span>Min:{(new Date(props.Min)).toLocaleDateString()}</span>)
}
const verifiedTemplate = (props) => {
return (<span>TrueCount: {props.TrueCount}</span>)
}
return (<GridComponent dataSource={data} height={315} allowGrouping={true} groupSettings={groupSettings}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='OrderDate' headerText='Order Date' type='date' width='150' format='yMd' />
<ColumnDirective field='ShippedDate' headerText='ShippedDate' type='date' width='150' format='yMd' />
<ColumnDirective field='Freight' headerText='Freight' width='150' format='C2' />
<ColumnDirective field='isVerified' headerText='Verified' width='150' type='boolean' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective>
<AggregateColumnsDirective>
<AggregateColumnDirective field='Freight' type='Max' format='C2' footerTemplate={freightTemplate} />
<AggregateColumnDirective field='ShippedDate' type='Max' footerTemplate={shippedDateTemplate} />
<AggregateColumnDirective field='OrderDate' type='Min' footerTemplate={orderDateTemplate} />
<AggregateColumnDirective field='isVerified' type='TrueCount' footerTemplate={verifiedTemplate} />
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[Aggregate, Group]} />
</GridComponent>)
}
export default App;
export let data = [
{
OrderID: 10248,
CustomerID: 'VINET',
OrderDate: '1996-07-04T00:00:00.000Z',
ShippedDate: '1996-07-16T00:00:00.000Z',
Freight: 32.38,
ShipName: 'Vins et alcools Chevalier',
ShipAddress: "59 rue de l'Abbaye",
ShipCity: 'Reims',
ShipRegion: null,
isVerified:true,
ShipCountry: 'France',
},
{
OrderID: 10249,
CustomerID: 'TOMSP',
OrderDate: '1996-07-05T00:00:00.000Z',
ShippedDate: '1996-07-10T00:00:00.000Z',
Freight: 11.61,
ShipName: 'Toms Spezialitäten',
ShipAddress: 'Luisenstr. 48',
ShipCity: 'Münster',
ShipRegion: null,
isVerified:false,
ShipCountry: 'Germany',
},
{
OrderID: 10250,
CustomerID: 'HANAR',
OrderDate: '1996-07-08T00:00:00.000Z',
ShippedDate: '1996-07-12T00:00:00.000Z',
Freight: 65.83,
ShipName: 'Hanari Carnes',
ShipAddress: 'Rua do Paço, 67',
ShipCity: 'Rio de Janeiro',
ShipRegion: 'RJ',
isVerified:true,
ShipCountry: 'Brazil',
},
{
OrderID: 10251,
CustomerID: 'VICTE',
OrderDate: '1996-07-08T00:00:00.000Z',
ShippedDate: '1996-07-15T00:00:00.000Z',
Freight: 41.34,
ShipName: 'Victuailles en stock',
ShipAddress: '2, rue du Commerce',
ShipCity: 'Lyon',
ShipRegion: null,
isVerified:true,
ShipCountry: 'France',
},
{
OrderID: 10252,
CustomerID: 'SUPRD',
OrderDate: '1996-07-09T00:00:00.000Z',
ShippedDate: '1996-07-11T00:00:00.000Z',
Freight: 51.3,
ShipName: 'Suprêmes délices',
ShipAddress: 'Boulevard Tirou, 255',
ShipCity: 'Charleroi',
isVerified:true,
ShipRegion: null,
ShipCountry: 'Belgium',
},
{
OrderID: 10253,
CustomerID: 'HANAR',
OrderDate: '1996-07-10T00:00:00.000Z',
ShippedDate: '1996-07-16T00:00:00.000Z',
Freight: 58.17,
ShipName: 'Hanari Carnes',
ShipAddress: 'Rua do Paço, 67',
ShipCity: 'Rio de Janeiro',
ShipRegion: 'RJ',
isVerified:true,
ShipCountry: 'Brazil',
},
{
OrderID: 10254,
CustomerID: 'CHOPS',
OrderDate: '1996-07-11T00:00:00.000Z',
ShippedDate: '1996-07-23T00:00:00.000Z',
Freight: 22.98,
ShipName: 'Chop-suey Chinese',
ShipAddress: 'Hauptstr. 31',
ShipCity: 'Bern',
ShipRegion: null,
isVerified:false,
ShipCountry: 'Switzerland',
},
{
OrderID: 10255,
CustomerID: 'RICSU',
OrderDate: '1996-07-12T00:00:00.000Z',
ShippedDate: '1996-07-15T00:00:00.000Z',
Freight: 148.33,
ShipName: 'Richter Supermarkt',
ShipAddress: 'Starenweg 5',
ShipCity: 'Genève',
ShipRegion: null,
isVerified:true,
ShipCountry: 'Switzerland',
},
{
OrderID: 10256,
CustomerID: 'WELLI',
OrderDate: '1996-07-15T00:00:00.000Z',
ShippedDate: '1996-07-17T00:00:00.000Z',
Freight: 13.97,
ShipName: 'Wellington Importadora',
ShipAddress: 'Rua do Mercado, 12',
ShipCity: 'Resende',
ShipRegion: 'SP',
isVerified:true,
ShipCountry: 'Brazil',
},
{
OrderID: 10257,
CustomerID: 'HILAA',
OrderDate: '1996-07-16T00:00:00.000Z',
ShippedDate: '1996-07-22T00:00:00.000Z',
Freight: 81.91,
isVerified:true,
ShipName: 'HILARION-Abastos',
ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipCity: 'San Cristóbal',
ShipRegion: 'Táchira',
ShipCountry: 'Venezuela',
},
{
OrderID: 10258,
CustomerID: 'ERNSH',
OrderDate: '1996-07-17T00:00:00.000Z',
ShippedDate: '1996-07-23T00:00:00.000Z',
Freight: 140.51,
ShipName: 'Ernst Handel',
ShipAddress: 'Kirchgasse 6',
ShipCity: 'Graz',
ShipRegion: null,
isVerified:false,
ShipCountry: 'Austria',
},
{
OrderID: 10259,
CustomerID: 'CENTC',
OrderDate: '1996-07-18T00:00:00.000Z',
ShippedDate: '1996-07-25T00:00:00.000Z',
Freight: 3.25,
ShipName: 'Centro comercial Moctezuma',
ShipAddress: 'Sierras de Granada 9993',
ShipCity: 'México D.F.',
ShipRegion: null,
isVerified:true,
ShipCountry: 'Mexico',
},
{
OrderID: 10260,
CustomerID: 'OTTIK',
OrderDate: '1996-07-19T00:00:00.000Z',
ShippedDate: '1996-07-29T00:00:00.000Z',
Freight: 55.09,
ShipName: 'Ottilies Käseladen',
ShipAddress: 'Mehrheimerstr. 369',
ShipCity: 'Köln',
ShipRegion: null,
isVerified:false,
ShipCountry: 'Germany',
},
{
OrderID: 10261,
CustomerID: 'QUEDE',
OrderDate: '1996-07-19T00:00:00.000Z',
ShippedDate: '1996-07-30T00:00:00.000Z',
Freight: 3.05,
ShipName: 'Que Delícia',
ShipAddress: 'Rua da Panificadora, 12',
ShipCity: 'Rio de Janeiro',
ShipRegion: 'RJ',
isVerified:true,
ShipCountry: 'Brazil',
},
{
OrderID: 10262,
CustomerID: 'RATTC',
OrderDate: '1996-07-22T00:00:00.000Z',
ShippedDate: '1996-07-25T00:00:00.000Z',
Freight: 48.29,
isVerified:true,
ShipName: 'Rattlesnake Canyon Grocery',
ShipAddress: '2817 Milton Dr.',
ShipCity: 'Albuquerque',
ShipRegion: 'NM',
ShipCountry: 'USA',
},
];
export let data: Object[] = [
{
OrderID: 10248,
CustomerID: 'VINET',
OrderDate: '1996-07-04T00:00:00.000Z',
ShippedDate: '1996-07-16T00:00:00.000Z',
Freight: 32.38,
ShipName: 'Vins et alcools Chevalier',
ShipAddress: "59 rue de l'Abbaye",
ShipCity: 'Reims',
ShipRegion: null,
isVerified:true,
ShipCountry: 'France',
},
{
OrderID: 10249,
CustomerID: 'TOMSP',
OrderDate: '1996-07-05T00:00:00.000Z',
ShippedDate: '1996-07-10T00:00:00.000Z',
Freight: 11.61,
ShipName: 'Toms Spezialitäten',
ShipAddress: 'Luisenstr. 48',
ShipCity: 'Münster',
ShipRegion: null,
isVerified:false,
ShipCountry: 'Germany',
},
{
OrderID: 10250,
CustomerID: 'HANAR',
OrderDate: '1996-07-08T00:00:00.000Z',
ShippedDate: '1996-07-12T00:00:00.000Z',
Freight: 65.83,
ShipName: 'Hanari Carnes',
ShipAddress: 'Rua do Paço, 67',
ShipCity: 'Rio de Janeiro',
ShipRegion: 'RJ',
isVerified:true,
ShipCountry: 'Brazil',
},
{
OrderID: 10251,
CustomerID: 'VICTE',
OrderDate: '1996-07-08T00:00:00.000Z',
ShippedDate: '1996-07-15T00:00:00.000Z',
Freight: 41.34,
ShipName: 'Victuailles en stock',
ShipAddress: '2, rue du Commerce',
ShipCity: 'Lyon',
ShipRegion: null,
isVerified:true,
ShipCountry: 'France',
},
{
OrderID: 10252,
CustomerID: 'SUPRD',
OrderDate: '1996-07-09T00:00:00.000Z',
ShippedDate: '1996-07-11T00:00:00.000Z',
Freight: 51.3,
ShipName: 'Suprêmes délices',
ShipAddress: 'Boulevard Tirou, 255',
ShipCity: 'Charleroi',
isVerified:true,
ShipRegion: null,
ShipCountry: 'Belgium',
},
{
OrderID: 10253,
CustomerID: 'HANAR',
OrderDate: '1996-07-10T00:00:00.000Z',
ShippedDate: '1996-07-16T00:00:00.000Z',
Freight: 58.17,
ShipName: 'Hanari Carnes',
ShipAddress: 'Rua do Paço, 67',
ShipCity: 'Rio de Janeiro',
ShipRegion: 'RJ',
isVerified:true,
ShipCountry: 'Brazil',
},
{
OrderID: 10254,
CustomerID: 'CHOPS',
OrderDate: '1996-07-11T00:00:00.000Z',
ShippedDate: '1996-07-23T00:00:00.000Z',
Freight: 22.98,
ShipName: 'Chop-suey Chinese',
ShipAddress: 'Hauptstr. 31',
ShipCity: 'Bern',
ShipRegion: null,
isVerified:false,
ShipCountry: 'Switzerland',
},
{
OrderID: 10255,
CustomerID: 'RICSU',
OrderDate: '1996-07-12T00:00:00.000Z',
ShippedDate: '1996-07-15T00:00:00.000Z',
Freight: 148.33,
ShipName: 'Richter Supermarkt',
ShipAddress: 'Starenweg 5',
ShipCity: 'Genève',
ShipRegion: null,
isVerified:true,
ShipCountry: 'Switzerland',
},
{
OrderID: 10256,
CustomerID: 'WELLI',
OrderDate: '1996-07-15T00:00:00.000Z',
ShippedDate: '1996-07-17T00:00:00.000Z',
Freight: 13.97,
ShipName: 'Wellington Importadora',
ShipAddress: 'Rua do Mercado, 12',
ShipCity: 'Resende',
ShipRegion: 'SP',
isVerified:true,
ShipCountry: 'Brazil',
},
{
OrderID: 10257,
CustomerID: 'HILAA',
OrderDate: '1996-07-16T00:00:00.000Z',
ShippedDate: '1996-07-22T00:00:00.000Z',
Freight: 81.91,
isVerified:true,
ShipName: 'HILARION-Abastos',
ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipCity: 'San Cristóbal',
ShipRegion: 'Táchira',
ShipCountry: 'Venezuela',
},
{
OrderID: 10258,
CustomerID: 'ERNSH',
OrderDate: '1996-07-17T00:00:00.000Z',
ShippedDate: '1996-07-23T00:00:00.000Z',
Freight: 140.51,
ShipName: 'Ernst Handel',
ShipAddress: 'Kirchgasse 6',
ShipCity: 'Graz',
ShipRegion: null,
isVerified:false,
ShipCountry: 'Austria',
},
{
OrderID: 10259,
CustomerID: 'CENTC',
OrderDate: '1996-07-18T00:00:00.000Z',
ShippedDate: '1996-07-25T00:00:00.000Z',
Freight: 3.25,
ShipName: 'Centro comercial Moctezuma',
ShipAddress: 'Sierras de Granada 9993',
ShipCity: 'México D.F.',
ShipRegion: null,
isVerified:true,
ShipCountry: 'Mexico',
},
{
OrderID: 10260,
CustomerID: 'OTTIK',
OrderDate: '1996-07-19T00:00:00.000Z',
ShippedDate: '1996-07-29T00:00:00.000Z',
Freight: 55.09,
ShipName: 'Ottilies Käseladen',
ShipAddress: 'Mehrheimerstr. 369',
ShipCity: 'Köln',
ShipRegion: null,
isVerified:false,
ShipCountry: 'Germany',
},
{
OrderID: 10261,
CustomerID: 'QUEDE',
OrderDate: '1996-07-19T00:00:00.000Z',
ShippedDate: '1996-07-30T00:00:00.000Z',
Freight: 3.05,
ShipName: 'Que Delícia',
ShipAddress: 'Rua da Panificadora, 12',
ShipCity: 'Rio de Janeiro',
ShipRegion: 'RJ',
isVerified:true,
ShipCountry: 'Brazil',
},
{
OrderID: 10262,
CustomerID: 'RATTC',
OrderDate: '1996-07-22T00:00:00.000Z',
ShippedDate: '1996-07-25T00:00:00.000Z',
Freight: 48.29,
isVerified:true,
ShipName: 'Rattlesnake Canyon Grocery',
ShipAddress: '2817 Milton Dr.',
ShipCity: 'Albuquerque',
ShipRegion: 'NM',
ShipCountry: 'USA',
},
];
Multiple aggregates for a column
Multiple aggregates for a column allows you to calculate and display different summary values simultaneously for a single column in a grid. Normally, a column is associated with a single aggregate function, such as sum, average, count and etc., which provides a single summary value for the entire column.
However, in scenarios where you need to display multiple summary values for the same column, multiple aggregates come into play. This feature enables you to calculate and display various aggregate values, such as sum, average, minimum, maximum, or custom calculations, concurrently for a specific column.
You can use multiple aggregates for a single column in the Syncfusion React Grid by specifying the aggregate type as an array.
Here’s an example of how to use multiple aggregates in the Syncfusion React Grid:
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Aggregate, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const aggregate = [{
columns: [
{
type: ['Sum', 'Max', 'Min'],
field: 'Freight',
columnName: 'Freight',
format: 'C2',
footerTemplate: 'Sum: ${Sum}, Min:${Min}, Max:${Max}',
},
],
},]
return (<GridComponent dataSource={data} allowPaging={true} height={315} aggregates={aggregate}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='Freight' headerText='Freight' width='150' format='C2' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
</ColumnsDirective>
<Inject services={[Page, Aggregate]} />
</GridComponent>)
}
export default App;
import { AggregateRowModel, ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Aggregate, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const aggregate: AggregateRowModel[] = [{
columns: [
{
type: ['Sum', 'Max', 'Min'],
field: 'Freight',
columnName: 'Freight',
format: 'C2',
footerTemplate: 'Sum: ${Sum}, Min:${Min}, Max:${Max}',
},
],
},]
return (<GridComponent dataSource={data} allowPaging={true} height={315} aggregates={aggregate}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='Freight' headerText='Freight' width='150' format='C2' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
</ColumnsDirective>
<Inject services={[Page, Aggregate]} />
</GridComponent>)
}
export default App;
export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];
export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];