How can I help you?
Column Rendering in React Grid Component
17 Feb 202624 minutes to read
Columns in the Syncfusion® React Grid define the structure and presentation of data. This section outlines manual, automatic, and dynamic rendering approaches to ensure clarity and flexibility in grid design.
Define columns manually
Columns in the Syncfusion® React Grid can be manually defined using the ColumnDirective element. Each column is configured with properties such as field, headerText, type, and width, allowing precise control over the column’s behavior and appearance to meet specific layout and data requirements.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
return <GridComponent dataSource={data}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='150' />
<ColumnDirective field='Freight' width='100' format='C2' textAlign='Right' />
<ColumnDirective field='OrderDate' width='140' format='yMd' textAlign='Right' />
</ColumnsDirective>
</GridComponent >
};
export default App;import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
return <GridComponent dataSource={data}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='150' />
<ColumnDirective field='Freight' width='100' format='C2' textAlign='Right' />
<ColumnDirective field='OrderDate' width='140' format='yMd' textAlign='Right' />
</ColumnsDirective>
</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
}];Auto-generated columns
Columns are automatically created when the columns option is not defined during Grid initialization. In this case, the Grid generates columns based on the fields in the dataSource. Each field in the data source is displayed as a column, and the field name appears in the column header.
import { GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import {data} from './datasource';
function App() {
return <GridComponent dataSource={data}/>;
}
;
export default App;import { GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import {data} from './datasource';
function App() {
return <GridComponent dataSource={data}/>
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38,
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5), Freight: 51.3
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6), Freight: 58.17
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5), Freight: 22.98
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), Freight: 148.33
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), Freight: 13.97
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), Freight: 81.91
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), Freight: 140.51
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5), Freight: 3.25
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), Freight: 55.09
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), Freight: 3.05
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), Freight: 48.29
}];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38,
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5), Freight: 51.3
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6), Freight: 58.17
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5), Freight: 22.98
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), Freight: 148.33
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), Freight: 13.97
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), Freight: 81.91
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), Freight: 140.51
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5), Freight: 3.25
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), Freight: 55.09
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), Freight: 3.05
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), Freight: 48.29
}];
- When the columns are auto-generated, the column
typeis determined from the first record of thedataSource.- Auto-generating columns for large datasets can affect performance. To improve efficiency, columns can be defined manually in the
columnsoption during initialization. Alternatively, the column virtualization feature can be enabled by setting enableColumnVirtualization totrue.
Set primary key for auto-generated columns in editing
Primary key configuration for auto-generated columns is necessary when editing is enabled in the Grid to uniquely identify each row for operations such as updating or deleting data. This can be achieved by setting the isPrimaryKey property to true for the column object through the dataBound event.
import { Edit, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import {data} from './datasource';
function App() {
let grid;
const editOptions = {
allowAdding: true, allowDeleting: true, allowEditing: true
};
const dataBound = () => {
if (grid) {
const column = grid.columns[0];
column.isPrimaryKey = true;
}
};
return <GridComponent dataSource={data} dataBound={dataBound} ref={g => grid = g} editSettings={editOptions}>
<Inject services={[Edit]}/>
</GridComponent>;
}
;
export default App;import { ColumnModel, Edit, EditSettingsModel, Grid, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import {data} from './datasource';
function App() {
let grid: Grid | null;
const editOptions: EditSettingsModel = {
allowAdding: true, allowDeleting: true, allowEditing: true
};
const dataBound = () => {
if (grid) {
const column: ColumnModel = grid.columns[0] as ColumnModel;
column.isPrimaryKey = true;
}
}
return <GridComponent dataSource={data} dataBound={dataBound} ref={g => grid = g}
editSettings={editOptions}>
<Inject services={[Edit]} />
</GridComponent>
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38,
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5), Freight: 51.3
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6), Freight: 58.17
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5), Freight: 22.98
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), Freight: 148.33
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), Freight: 13.97
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), Freight: 81.91
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), Freight: 140.51
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5), Freight: 3.25
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), Freight: 55.09
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), Freight: 3.05
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), Freight: 48.29
}];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38,
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5), Freight: 51.3
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6), Freight: 58.17
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5), Freight: 22.98
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), Freight: 148.33
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), Freight: 13.97
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), Freight: 81.91
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), Freight: 140.51
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5), Freight: 3.25
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), Freight: 55.09
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), Freight: 3.05
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), Freight: 48.29
}];If the column field name is known, the getColumnByField method can be used to retrieve the column object. Then, the isPrimaryKey property can be set to “true” for that column, as demonstrated in the code snippet below:
const dataBound = () => {
if (grid) {
const column: ColumnModel = this.grid.getColumnByField('OrderID');
column.isPrimaryKey = true;
}
}Defining column properties for auto-generated columns
Auto-generated columns can be customized to meet specific requirements by modifying properties such as type, format, and width. These changes are applied within the dataBound event. The event is triggered after data has been loaded into the Grid, ensuring that all columns are created and available. At this point, the necessary options for the auto-generated columns can be configured.
In the below example, width is set for the “OrderID” column, type is set for the “Order Date” column and format is set for the “Freight” and “Order Date” columns.
import { GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const dataBound = () => {
if (grid) {
const columns = grid.columns;
for (const col of columns) {
if (col.field === "OrderID") {
col.width = 120;
}
if (col.field === "OrderDate") {
col.type = 'date';
col.format = 'yMd';
}
if (col.field === 'Freight') {
col.format = "P2";
}
}
grid.refreshColumns();
}
}
return <GridComponent dataSource={data} dataBound={dataBound} ref={g => grid = g} />
};
export default App;import { ColumnModel, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: Grid | null;
const dataBound = () => {
if (grid) {
const columns: ColumnModel[] = grid.columns as ColumnModel[];
for (const col of columns) {
if (col.field === "OrderID") {
col.width = 120;
}
if (col.field === "OrderDate") {
col.type = 'date';
col.format = 'yMd';
}
if (col.field === 'Freight') {
col.format = "P2";
}
}
grid.refreshColumns();
}
}
return <GridComponent dataSource={data} dataBound={dataBound} ref={g => grid = g} />
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38,
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5), Freight: 51.3
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6), Freight: 58.17
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5), Freight: 22.98
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), Freight: 148.33
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), Freight: 13.97
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), Freight: 81.91
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), Freight: 140.51
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5), Freight: 3.25
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), Freight: 55.09
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), Freight: 3.05
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), Freight: 48.29
}];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38,
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5), Freight: 51.3
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6), Freight: 58.17
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5), Freight: 22.98
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), Freight: 148.33
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), Freight: 13.97
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), Freight: 81.91
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), Freight: 140.51
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5), Freight: 3.25
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), Freight: 55.09
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), Freight: 3.05
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), Freight: 48.29
}];Custom cell display text
The Grid allows dynamic customization of cell display text at runtime. This is particularly useful when column values need to be formatted or combined based on specific requirements.
Cell text formatting
In the Grid, the valueAccessor property is used to customize the data displayed in a column. It allows formatting or transforming the cell content without modifying the original data source.
To implement valueAccessor, define a function for the column that returns the desired display value. This function receives two parameters:
-
field: The name of the current column’s field. -
data: The complete data object for the current row.
Example:
- Currency Formatting: A function like “currencyFormatter” can take the “Freight” value from the data object, append a Euro(€) symbol, and return a formatted string such as “€100”.
- Combining Fields: A function such as “concatenateFields” can merge the “Ship City” and “Ship Region” fields into a single string like “Berlin, BE”.
import { getValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data as datasource } from './datasource';
function App() {
const currencyFormatter = (field, data, column) => {
return '€' + getValue('Freight', data);
};
const concatenateFields = (field, data, column) => {
return data[field] + '-' + getValue('ShipRegion', data);
};
return (<div>
<GridComponent dataSource={datasource} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100'/>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" valueAccessor={currencyFormatter}/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' valueAccessor={concatenateFields}/>
</ColumnsDirective>
</GridComponent>
</div>);
}
;
export default App;import { getValue } from '@syncfusion/ej2-base';
import { Column, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data as datasource } from './datasource';
function App() {
const currencyFormatter = (field: string, data: object, column: Column) => {
return '€' + getValue('Freight', data);
}
const concatenateFields = (field: string, data: object, column: Column) => {
return data[field] + '-' + getValue('ShipRegion', data);
}
return (<div>
<GridComponent dataSource={datasource} height={315} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100' />
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='100' textAlign="Right" />
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" valueAccessor={currencyFormatter} />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' valueAccessor={concatenateFields} />
</ColumnsDirective>
</GridComponent>
</div>)
};
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
}];It is recommended to enable the Virtual Scrolling or Paging feature when binding large datasets to the Grid.
Display array type columns
Array of objects binding to a column in the Grid component can be achieved using the valueAccessor property. This allows combining multiple values from an array into a single, readable string for display.
For example, consider a column named “Name” that contains an array of two objects, “FirstName” and “LastName”. The valueAccessor property can be used to join these two objects and bind them to the column.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { stringData } from './datasource';
function App() {
const valueAccess = (field, data, column) => {
return data[field].map((s) => {
return s.LastName || s.FirstName;
}).join(' ');
};
return (<div>
<GridComponent dataSource={stringData} height={315}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign="Right"/>
<ColumnDirective field='Name' headerText='Full Name' width='120' valueAccessor={valueAccess}/>
<ColumnDirective field='Title' headerText='Title' width='160' textAlign="Right"/>
</ColumnsDirective>
</GridComponent>
</div>);
}
;
export default App;import { Column, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { stringData } from './datasource';
function App() {
const valueAccess = (field: string, data: object, column: Column) => {
return data[field].map((s: any) => {
return s.LastName || s.FirstName
}).join(' ');
}
return (<div>
<GridComponent dataSource={stringData} height={315} >
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign="Right" />
<ColumnDirective field='Name' headerText='Full Name' width='120' valueAccessor={valueAccess} />
<ColumnDirective field='Title' headerText='Title' width='160' textAlign="Right" />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;export let stringData = [{
'EmployeeID': 1,
'Name': [{
'FirstName': 'Davolio'
},
{ 'LastName': 'Nancy' }],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'Name': [{
'FirstName': 'Fuller'
},
{ 'LastName': 'Andrew' }],
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'Name': [{
'FirstName': 'Leverling'
},
{ 'LastName': 'Janet' }],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'Name': [{
'FirstName': 'Peacock'
},
{ 'LastName': 'Margaret' }],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'Name': [{
'FirstName': 'Buchanan'
},
{ 'LastName': 'Steven' }],
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'Name': [{
'FirstName': 'Suyama'
},
{ 'LastName': 'Michael' }],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'Name': [{
'FirstName': 'King'
},
{ 'LastName': 'Robert' }],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'Name': [{
'FirstName': 'Callahan'
},
{ 'LastName': 'Laura' }],
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'Name': [{
'FirstName': 'Dodsworth'
},
{ 'LastName': 'Anne' }],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];export let stringData: Object[] = [{
'EmployeeID': 1,
'Name': [{
'FirstName': 'Davolio'},
{'LastName': 'Nancy'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'Name':[{
'FirstName': 'Fuller'},
{'LastName': 'Andrew'}],
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'Name':[{
'FirstName': 'Leverling'},
{'LastName': 'Janet'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'Name':[{
'FirstName': 'Peacock'},
{'LastName': 'Margaret'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'Name':[{
'FirstName': 'Buchanan'},
{'LastName': 'Steven'}],
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'Name':[{
'FirstName': 'Suyama'},
{'LastName': 'Michael'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'Name':[{
'FirstName': 'King'},
{'LastName': 'Robert'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'Name':[{
'FirstName': 'Callahan'},
{'LastName': 'Laura'}],
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'Name': [{
'FirstName': 'Dodsworth'},
{'LastName': 'Anne'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];Expression column
An expression column displays a calculated value based on other fields in the same row. This can be implemented using the valueAccessor property, which allows defining a custom function to compute the value dynamically.
For example, consider an expression column named “Calories Intake”. This column calculates the total calories for each row using values from the “Protein”, “Fat”, and “Carbohydrate” columns. The valueAccessor function can perform the necessary calculation, including formulas or other custom logic.
const Calories = (Protein × 4) + (Fat × 9) + (Carbohydrate × 4);import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { foodInformation } from './datasource';
function App() {
const totalCalories = (field, data, column) => {
return data.Protein * 4 + data.Fat * 9 + data.Carbohydrate * 4;
};
return <GridComponent dataSource={foodInformation} height={315}>
<ColumnsDirective>
<ColumnDirective field='FoodName' width='100'/>
<ColumnDirective field='Protein' width='90' textAlign="Right"/>
<ColumnDirective field='Fat' width='90' textAlign="Right"/>
<ColumnDirective field='Carbohydrate' width='100' textAlign="Right"/>
<ColumnDirective headerText='Calories In Take' width='140' textAlign="Right" valueAccessor={totalCalories}/>
</ColumnsDirective>
</GridComponent>;
}
;
export default App;import { Column, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { foodInformation } from './datasource';
function App() {
const totalCalories = (field: string, data: { Protein: number, Fat: number, Carbohydrate: number }, column: Column): number => {
return data.Protein * 4 + data.Fat * 9 + data.Carbohydrate * 4;
};
return <GridComponent dataSource={foodInformation} height={315}>
<ColumnsDirective>
<ColumnDirective field='FoodName' width='100' />
<ColumnDirective field='Protein' width='90' textAlign="Right" />
<ColumnDirective field='Fat' width='90' textAlign="Right" />
<ColumnDirective field='Carbohydrate' width='100' textAlign="Right" />
<ColumnDirective headerText='Calories In Take' width='140' textAlign="Right" valueAccessor={totalCalories} />
</ColumnsDirective>
</GridComponent>
};
export default App;export let foodInformation = [
{ FoodId: 1, Time: "8:40 AM", FoodName: "CHEESE BURGER", Calorie: 100, Protein: 15, Fat: 15, Carbohydrate: 28 },
{ FoodId: 2, Time: "10:30 AM", FoodName: "PIZZA", Calorie: 100, Protein: 15, Fat: 9, Carbohydrate: 39 },
{ FoodId: 3, Time: "12:45 PM", FoodName: "CHICKEN NOODLE", Calorie: 50, Protein: 4, Fat: 2, Carbohydrate: 9 },
{ FoodId: 4, Time: "5:30 PM", FoodName: "YOGURT", Calorie: 75, Protein: 10, Fat: 2, Carbohydrate: 43 },
{ FoodId: 5, Time: "9:00 PM", FoodName: "BEEF SANDWICH", Calorie: 125, Protein: 22, Fat: 13, Carbohydrate: 34 },
{ FoodId: 6, Time: "11:00 PM", FoodName: "CHICKEN BURGER", Calorie: 100, Protein: 15, Fat: 10, Carbohydrate: 25 },
{ FoodId: 7, Time: "6:30 PM", FoodName: "VEG BURGER", Calorie: 70, Protein: 14, Fat: 5, Carbohydrate: 53 },
{ FoodId: 8, Time: "8:00 PM", FoodName: "VEG SANDWICH", Calorie: 75, Protein: 20, Fat: 15, Carbohydrate: 24 },
{ FoodId: 9, Time: "7:00 PM", FoodName: "EGG BURGER", Calorie: 80, Protein: 25, Fat: 16, Carbohydrate: 35 }
];export let foodInformation: Object[] = [
{FoodId:1,Time:"8:40 AM",FoodName:"CHEESE BURGER",Calorie:100,Protein:15,Fat:15,Carbohydrate:28},
{FoodId:2,Time:"10:30 AM",FoodName:"PIZZA",Calorie:100,Protein:15,Fat:9,Carbohydrate:39},
{FoodId:3,Time:"12:45 PM",FoodName:"CHICKEN NOODLE",Calorie:50,Protein:4,Fat:2,Carbohydrate:9},
{FoodId:4,Time:"5:30 PM",FoodName:"YOGURT",Calorie:75,Protein:10,Fat:2,Carbohydrate:43},
{FoodId:5,Time:"9:00 PM",FoodName:"BEEF SANDWICH",Calorie:125,Protein:22,Fat:13,Carbohydrate:34},
{FoodId:6,Time:"11:00 PM",FoodName:"CHICKEN BURGER",Calorie:100,Protein:15,Fat:10,Carbohydrate:25},
{FoodId:7,Time:"6:30 PM",FoodName:"VEG BURGER",Calorie:70,Protein:14,Fat:5,Carbohydrate:53},
{FoodId:8,Time:"8:00 PM",FoodName:"VEG SANDWICH",Calorie:75,Protein:20,Fat:15,Carbohydrate:24},
{FoodId:9,Time:"7:00 PM",FoodName:"EGG BURGER",Calorie:80,Protein:25,Fat:16,Carbohydrate:35}];Display serial number
Serial number display in the Grid for every row can be achieved using the rowDataBound event. The rowDataBound event is triggered for each row in the Grid when the data is bound to the Grid. Inside the rowDataBound event handler, a serial number can be calculated using the current page number, page size, and the row’s index on that page. These values are available from the Grid’s pageSettings property:
-
pageSize: Number of rows shown per page. -
currentPage: The current page number. -
rowIndex: The index of the row within the current page.
This formula ensures that serial numbers continue correctly across pages. Once calculated, the serial number can be set as the content of the desired cell in the row using innerHTML.
import { ColumnDirective, ColumnsDirective, Grid, GridComponent, Toolbar, Inject, Page, } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
var pageSettings = { pageSize: 8 };
var rowDataBound = ((args) => {
var rowIndex = parseInt(args.row.getAttribute('aria-rowIndex'));
var currentPageNumber = grid.pageSettings.currentPage;
var pageSize = grid.pageSettings.pageSize;
var startIndex = (currentPageNumber - 1) * pageSize;
args.row.querySelector('.e-rowcell').innerHTML = (startIndex + rowIndex).toString();
})
return (
<div>
<GridComponent dataSource={data} height={310} ref={g => grid = g} allowPaging={true} pageSettings={pageSettings} rowDataBound={rowDataBound}>
<ColumnsDirective>
<ColumnDirective field='S.No' headerText='S.No' width='90' textAlign='Center' />
<ColumnDirective field='OrderID' headerText='Order ID' width='90' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C2' width='90' textAlign='Right' />
<ColumnDirective field='OrderDate' headerText='Order Date' format='yMd' width='120' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Toolbar, Page]} />
</GridComponent></div>
)
}
export default App;import { ColumnDirective, ColumnsDirective, Grid, GridComponent, Toolbar, Inject, Page, PageSettingsModel, RowDataBoundEventArgs } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: Grid | null;
const pageSettings: PageSettingsModel = { pageSize: 8 };
const rowDataBound = ((args: RowDataBoundEventArgs) => {
const rowIndex: any = parseInt((args as any).row.getAttribute('aria-rowIndex'));
const currentPageNumber: any = (grid as GridComponent).pageSettings.currentPage;
const pageSize: any = (grid as GridComponent).pageSettings.pageSize;
const startIndex: any = ((currentPageNumber as number) - 1) * (pageSize as number);
(args as any).row.querySelector('.e-rowcell').innerHTML = (startIndex + rowIndex).toString();
})
return (
<div>
<GridComponent dataSource={data} height={310} ref={g => grid = g} allowPaging={true} pageSettings={pageSettings} rowDataBound={rowDataBound}>
<ColumnsDirective>
<ColumnDirective field='S.No' headerText='S.No' width='90' textAlign='Center' />
<ColumnDirective field='OrderID' headerText='Order ID' width='90' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C2' width='90' textAlign='Right' />
<ColumnDirective field='OrderDate' headerText='Order Date' format='yMd' width='120' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Toolbar, Page]} />
</GridComponent></div>
)
}
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
}];Complex data binding
Complex data binding in the Syncfusion® React Grid component can be achieved using the dot (.) operator in the field property. This feature is particularly useful when dealing with nested or complex data structures.
Using local data
When binding local data that contains nested objects, the dot (.) operator in the column’s field property allows access to specific properties within those nested objects.
In the below example, the nested “Employee” object’s “FirstName” and “LastName” properties are bound using the dot (.) operator.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { complexData } from './datasource';
function App() {
return (<div>
<GridComponent dataSource={complexData} height={315}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign="Right"/>
<ColumnDirective field='Name.FirstName' headerText='First Name' width='120'/>
<ColumnDirective field='Name.LastName' headerText='Last Name' width='120'/>
<ColumnDirective field='Title' headerText='Title' width='150'/>
</ColumnsDirective>
</GridComponent>
</div>);
}
;
export default App;import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { complexData } from './datasource';
function App() {
return (<div>
<GridComponent dataSource={complexData} height={315}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign="Right" />
<ColumnDirective field='Name.FirstName' headerText='First Name' width='120' />
<ColumnDirective field='Name.LastName' headerText='Last Name' width='120' />
<ColumnDirective field='Title' headerText='Title' width='150' />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;export let complexData = [{
'EmployeeID': 1,
'Name': {
'LastName': 'Davolio',
'FirstName': 'Nancy'
},
'Names': [{
'LastName': 'Davolio',
'FirstName': 'Nancy'
}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'Name': {
'LastName': 'Fuller',
'FirstName': 'Andrew'
},
'Names': [{
'LastName': 'Fuller',
'FirstName': 'Andrew'
}],
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'Name': {
'LastName': 'Leverling',
'FirstName': 'Janet'
},
'Names': [{
'LastName': 'Leverling',
'FirstName': 'Janet'
}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'Name': {
'LastName': 'Peacock',
'FirstName': 'Margaret'
},
'Names': [{
'LastName': 'Peacock',
'FirstName': 'Margaret'
}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'Name': {
'LastName': 'Buchanan',
'FirstName': 'Steven'
},
'Names': [{
'LastName': 'Buchanan',
'FirstName': 'Steven'
}],
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'Name': {
'LastName': 'Suyama',
'FirstName': 'Michael'
},
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'Name': {
'LastName': 'King',
'FirstName': 'Robert'
},
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'Name': {
'LastName': 'Callahan',
'FirstName': 'Laura'
},
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'Name': {
'LastName': 'Dodsworth',
'FirstName': 'Anne'
},
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];export let complexData: Object[] = [{
'EmployeeID': 1,
'Name': {
'LastName': 'Davolio',
'FirstName': 'Nancy'},
'Names': [{
'LastName' : 'Davolio',
'FirstName': 'Nancy'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'Name':{
'LastName': 'Fuller',
'FirstName': 'Andrew'},
'Names': [{
'LastName': 'Fuller',
'FirstName': 'Andrew'}],
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'Name':{
'LastName': 'Leverling',
'FirstName': 'Janet'},
'Names': [{
'LastName': 'Leverling',
'FirstName': 'Janet'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'Name':{
'LastName': 'Peacock',
'FirstName': 'Margaret'},
'Names': [{
'LastName': 'Peacock',
'FirstName': 'Margaret'}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'Name':{
'LastName': 'Buchanan',
'FirstName': 'Steven'},
'Names': [{
'LastName': 'Buchanan',
'FirstName': 'Steven'}],
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'Name':{
'LastName': 'Suyama',
'FirstName': 'Michael'},
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'Name':{
'LastName': 'King',
'FirstName': 'Robert'},
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'Name': {
'LastName': 'Callahan',
'FirstName': 'Laura'},
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'Name': {
'LastName': 'Dodsworth',
'FirstName': 'Anne'},
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];Using remote data
To enable complex data binding in the Grid component using remote data, add the expand query to the Grid’s query property. This ensures that related or nested data is eagerly loaded from the server, allowing direct access to complex fields using dot (.) notation in the column definitions.
In the below example, the expand query loads the nested “Employee” object’s “City” property using the dot (.) operator.
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
function App() {
const data = new DataManager({
adaptor: new ODataV4Adaptor(),
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/'
});
const query = new Query().expand('Employee');
return <GridComponent dataSource={data} query={query} height={310} allowPaging={true}>
<Inject services={[Page]} />
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right" />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='Employee.City' headerText='City' width='150' />
</ColumnsDirective>
</GridComponent>
};
export default App;import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
function App() {
const data: DataManager = new DataManager({
adaptor: new ODataV4Adaptor(),
crossDomain: true,
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/'
});
const query = new Query().expand('Employee');
return <GridComponent dataSource={data} query={query} height={310} allowPaging={true}>
<Inject services={[Page]} />
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right" />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
<ColumnDirective field='Employee.City' headerText='City' width='150' />
</ColumnsDirective>
</GridComponent>
};
export default App;Complex data binding with list of array of objects
Complex data binding with lists of arrays of objects is supported in the Grid. This feature allows binding complex data with multiple levels of nested objects and arrays to the Grid.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { complexData } from './datasource';
function App() {
return (<div>
<GridComponent dataSource={complexData} height={315}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign="Right"/>
<ColumnDirective field='Names.0.FirstName' headerText='First Name' width='120'/>
<ColumnDirective field='Names.0.LastName' headerText='Last Name' width='120'/>
<ColumnDirective field='Region' headerText='Region' width='120'/>
<ColumnDirective field='City' headerText='City' width='150'/>
</ColumnsDirective>
</GridComponent>
</div>);
}
;
export default App;import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { complexData } from './datasource';
function App() {
return (<div>
<GridComponent dataSource={complexData} height={315}>
<ColumnsDirective>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='120' textAlign="Right" />
<ColumnDirective field='Names.0.FirstName' headerText='First Name' width='120'/>
<ColumnDirective field='Names.0.LastName' headerText='Last Name' width='120' />
<ColumnDirective field='Region' headerText='Region' width='120' />
<ColumnDirective field='City' headerText='City' width='150' />
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;export let complexData = [{
'EmployeeID': 1,
'Name': {
'LastName': 'Davolio',
'FirstName': 'Nancy'
},
'Names': [{
'LastName': 'Davolio',
'FirstName': 'Nancy'
}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'Name': {
'LastName': 'Fuller',
'FirstName': 'Andrew'
},
'Names': [{
'LastName': 'Fuller',
'FirstName': 'Andrew'
}],
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'Name': {
'LastName': 'Leverling',
'FirstName': 'Janet'
},
'Names': [{
'LastName': 'Leverling',
'FirstName': 'Janet'
}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'Name': {
'LastName': 'Peacock',
'FirstName': 'Margaret'
},
'Names': [{
'LastName': 'Peacock',
'FirstName': 'Margaret'
}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'Name': {
'LastName': 'Buchanan',
'FirstName': 'Steven'
},
'Names': [{
'LastName': 'Buchanan',
'FirstName': 'Steven'
}],
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'Name': {
'LastName': 'Suyama',
'FirstName': 'Michael'
},
'Names': [{
'LastName': 'Leverling',
'FirstName': 'Janet'
}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'Name': {
'LastName': 'King',
'FirstName': 'Robert'
},
'Names': [{
'LastName': 'Peacock',
'FirstName': 'Margaret'
}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'Name': {
'LastName': 'Callahan',
'FirstName': 'Laura'
},
'Names': [{
'LastName': 'Fuller',
'FirstName': 'Andrew'
}],
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'Name': {
'LastName': 'Dodsworth',
'FirstName': 'Anne'
},
'Names': [{
'LastName': 'Fuller',
'FirstName': 'Andrew'
}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];export let complexData: Object[] = [{
'EmployeeID': 1,
'Name': {
'LastName': 'Davolio',
'FirstName': 'Nancy'
},
'Names': [{
'LastName': 'Davolio',
'FirstName': 'Nancy'
}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'Name': {
'LastName': 'Fuller',
'FirstName': 'Andrew'
},
'Names': [{
'LastName': 'Fuller',
'FirstName': 'Andrew'
}],
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'Name': {
'LastName': 'Leverling',
'FirstName': 'Janet'
},
'Names': [{
'LastName': 'Leverling',
'FirstName': 'Janet'
}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'Name': {
'LastName': 'Peacock',
'FirstName': 'Margaret'
},
'Names': [{
'LastName': 'Peacock',
'FirstName': 'Margaret'
}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'Name': {
'LastName': 'Buchanan',
'FirstName': 'Steven'
},
'Names': [{
'LastName': 'Buchanan',
'FirstName': 'Steven'
}],
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'Name': {
'LastName': 'Suyama',
'FirstName': 'Michael'
},
'Names': [{
'LastName': 'Leverling',
'FirstName': 'Janet'
}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'Name': {
'LastName': 'King',
'FirstName': 'Robert'
},
'Names': [{
'LastName': 'Peacock',
'FirstName': 'Margaret'
}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'Name': {
'LastName': 'Callahan',
'FirstName': 'Laura'
},
'Names': [{
'LastName': 'Fuller',
'FirstName': 'Andrew'
}],
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'Name': {
'LastName': 'Dodsworth',
'FirstName': 'Anne'
},
'Names': [{
'LastName': 'Fuller',
'FirstName': 'Andrew'
}],
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];Setting a complex column as a foreign key column
The Grid component provides the ability to set complex columns as foreign key columns. This allows related data from a foreign data source to be displayed based on a nested field value.
The following example demonstrates how to set the “Employee.EmployeeID” column as a foreign key column and display the “FirstName” column from the foreign data.
import { ColumnDirective, ColumnsDirective, ForeignKey, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
return <GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right"/>
<ColumnDirective field='Employee.EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID' dataSource={employeeData} headerText='Employee Name' width='150'/>
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2'/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
</ColumnsDirective>
<Inject services={[ForeignKey]}/>
</GridComponent>;
}
export default App;import { ColumnDirective, ColumnsDirective, ForeignKey, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
return <GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
<ColumnDirective field='Employee.EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID'
dataSource={employeeData} headerText='Employee Name' width='150' />
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
</ColumnsDirective>
<Inject services={[ForeignKey]} />
</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,
Employee: {
EmployeeID: 1
},
},
{
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,
Employee: {
EmployeeID: 2
},
},
{
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,
Employee: {
EmployeeID: 3
},
},
{
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,
Employee: {
EmployeeID: 4
},
},
{
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,
Employee: {
EmployeeID: 5
}
},
{
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
, Employee: {
EmployeeID: 6
}
},
{
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
, Employee: {
EmployeeID: 7
}
},
{
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
, Employee: {
EmployeeID: 8
}
},
{
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
, Employee: {
EmployeeID: 9
}
},
{
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
, Employee: {
EmployeeID: 9
}
},
{
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
, Employee: {
EmployeeID: 6
}
},
{
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
, Employee: {
EmployeeID: 2
}
},
{
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
, Employee: {
EmployeeID: 3
}
},
{
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
, Employee: {
EmployeeID: 4
}
},
{
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
, Employee: {
EmployeeID: 3
}
}];
export let employeeData = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];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,
Employee: {
EmployeeID: 1
},
},
{
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,
Employee: {
EmployeeID: 2
},
},
{
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,
Employee: {
EmployeeID: 3
},
},
{
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,
Employee: {
EmployeeID: 4
},
},
{
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,
Employee: {
EmployeeID: 5
}
},
{
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
, Employee: {
EmployeeID: 6
}
},
{
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
, Employee: {
EmployeeID: 7
}
},
{
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
, Employee: {
EmployeeID: 8
}
},
{
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
, Employee: {
EmployeeID: 9
}
},
{
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
, Employee: {
EmployeeID: 9
}
},
{
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
, Employee: {
EmployeeID: 6
}
},
{
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
, Employee: {
EmployeeID: 2
}
},
{
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
, Employee: {
EmployeeID: 3
}
},
{
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
, Employee: {
EmployeeID: 4
}
},
{
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
, Employee: {
EmployeeID: 3
}
}];
export let employeeData: Object[] = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];