Foreign key column in React Grid component

25 Nov 202324 minutes to read

The Foreign key column in the Syncfusion Grid component allows you to display related data from a foreign key data source in a column within the grid. This feature is particularly useful when you have a column in the grid that represents a foreign key relationship with another data source.

To enable and integrate the foreign key column in the React Grid component, follow these steps:

  1. Inject the ForeignKey in the module.
import { ForeignKey } from '@syncfusion/ej2-react-grids';

function App() {
  return <GridComponent>
    <Inject services={[ForeignKey]} />
  </GridComponent>
};
  1. Define the foreign key column in the grid using the following properties:
  • dataSource: Specifies the foreign data source that contains the related data.

  • foreignKeyField: Maps the column name in the grid to the field in the foreign data source that represents the foreign key relationship.

  • foreignKeyValue: Specifies the field from the foreign data source that should be displayed in the grid as the related data.

    <ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID' dataSource={employeeData} headerText='Employee Name' width='150'></ColumnDirective>

The foreignKeyField property should match the name of the field in the foreign data source that represents the foreign key relationship, and the foreignKeyValue property should specify the field from the foreign data source that should be displayed in the grid as the related data.

Binding local data

The Syncfusion Grid component provides a convenient way to bind local data to a foreign key column. This allows you to display related data from a local data source within the grid. Here’s an example of how to bind local data to a Foreign Key column in Syncfusion Grid:

In this example, data is the local data source for the Grid, and employeeData is the local data source for the foreign key column. The field property of the e-column component is set to EmployeeID which represents the foreign key value in the data. The foreignKeyValue property is set to FirstName which represents the field name in the employeeData that you want to display in the foreign key column.

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='EmployeeID' foreignKeyValue='FirstName' 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='EmployeeID' foreignKeyValue='FirstName' 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 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 = [
    {
        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 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'
}];


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
    }];

Binding remote data

The Foreign key column in Syncfusion Grid allows you to bind remote data for a foreign key column. You can assign the service data as an instance of DataManager to the dataSource property, and provide the endpoint URL as the data source URL.

This example demonstrates how to use the foreign key column with remote data binding using the ODataV4Adaptor in the grid:

import { ColumnDirective, ColumnsDirective, ForeignKey, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import * as React from 'react';

function App() {
  const data = new DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',
    adaptor: new ODataV4Adaptor(),
    crossDomain: true
  });
  const employeeData = new DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees/',
    adaptor: new ODataV4Adaptor(),
    crossDomain: true
  });
  return <GridComponent dataSource={data} height={315}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
      <ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' 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 { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import * as React from 'react';

function App() {
  const data: DataManager = new DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',
    adaptor: new ODataV4Adaptor(),
    crossDomain: true
  });
  const employeeData: DataManager = new DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees/',
    adaptor: new ODataV4Adaptor(),
    crossDomain: true
  });
  return <GridComponent dataSource={data} height={315}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
      <ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' 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 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 = [
    {
        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 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'
}];


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
    }];

Use edit template in foreign key column

The Syncfusion Grid provides support for using an edit template in a foreign key column. By default, a dropdown component is used for editing foreign key column. However, you can render a different component for editing by using the edit property. Here’s an example that demonstrates how to use an edit template in a foreign key column:

In this example, an AutoComplete component is rendered as the edit template for the “EmployeeID” foreign key column. The dataSource property of the AutoComplete component is set to the employees data, and the fields property is configured to display the “FirstName” field as the value.

import { createElement, getValue } from '@syncfusion/ej2-base';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { AutoComplete } from '@syncfusion/ej2-dropdowns';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Edit, ForeignKey, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
    let autoComplete;
    const editOption = { allowEditing: true };
    const toolbar = ['Edit', 'Update', 'Cancel'];
    const edit = {
        create: () => { // to create input element
            return createElement('input');
        },
        destroy: () => { // to destroy the custom component.
            autoComplete.destroy();
        },
        read: () => { // return edited value to update data source
            const value = new DataManager(employeeData).executeLocal(new Query().where('FirstName', 'equal', autoComplete.value));
            return value.length && getValue('EmployeeID', value[0]); // to convert foreign key value to local value.
        },
        write: (args) => { // to show the value for date picker
            autoComplete = new AutoComplete({
                dataSource: new DataManager(employeeData),
                fields: { value: args.column.foreignKeyValue },
                value: args.foreignKeyData[0][args.column.foreignKeyValue]
            });
            autoComplete.appendTo(args.element);
        }
    };
    return <GridComponent dataSource={data} height={280} editSettings={editOption} toolbar={toolbar}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" isPrimaryKey={true}/>
      <ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID' dataSource={employeeData} headerText='Employee Name' width='150' edit={edit}/>
      <ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2' editType='numericedit'/>
      <ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
    </ColumnsDirective>
    <Inject services={[ForeignKey, Edit, Toolbar]}/>
  </GridComponent>;
}
;
export default App;
import { createElement, getValue } from '@syncfusion/ej2-base';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { AutoComplete } from '@syncfusion/ej2-dropdowns';
import { ColumnDirective, ColumnsDirective, EditSettingsModel, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Column, Edit, ForeignKey, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';

function App() {
  let autoComplete: AutoComplete;
  const editOption: EditSettingsModel = { allowEditing: true };
  const toolbar: ToolbarItems[] = ['Edit', 'Update', 'Cancel'];
  const edit = {
    create: () => { // to create input element
      return createElement('input');
    },
    destroy: () => { // to destroy the custom component.
      autoComplete.destroy();
    },
    read: () => { // return edited value to update data source
      const value: object[] = new DataManager(employeeData).executeLocal(new Query().where('FirstName', 'equal', autoComplete.value));
      return value.length && getValue('EmployeeID', value[0]); // to convert foreign key value to local value.
    },
    write: (args: { rowData: object, column: Column, foreignKeyData: object, element: HTMLElement }) => { // to show the value for date picker
      autoComplete = new AutoComplete({
        dataSource: new DataManager(employeeData),
        fields: { value: args.column.foreignKeyValue },
        value: args.foreignKeyData[0][args.column.foreignKeyValue]
      });
      autoComplete.appendTo(args.element);
    }
  };
  return <GridComponent dataSource={data} height={280} editSettings={editOption}
    toolbar={toolbar}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" isPrimaryKey={true} />
      <ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID'
        dataSource={employeeData} headerText='Employee Name' width='150' edit={edit} />
      <ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2' editType='numericedit' />
      <ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
    </ColumnsDirective>
    <Inject services={[ForeignKey, Edit, Toolbar]} />
  </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
    },
    {
        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 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
    },
    {
        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 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'
}];

Customize filter UI of foreign key column

The Syncfusion Grid allows you to customize the filtering user interface (UI) for foreign key columns by using the filter property. By default, a dropdown component is used for filtering foreign key columns. However, you can create your own custom filtering UI by specifying a template function for the filter property. Here’s an example that demonstrates how to create a custom filtering UI in a foreign key column:

In this example, a DropDownList component is rendered as the filter UI for the “EmployeeID” foreign key column. The dataSource property of the DropDownList component is set to the employees data, and the fields property is configured to display the FirstName field as the text and EmployeeID field as the value. The value property is set to the current filter value of the column.

import { createElement } from '@syncfusion/ej2-base';
import { DataManager } from '@syncfusion/ej2-data';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Filter, ForeignKey } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
    let dropInstance;
    const filterOption = { type: 'Menu' };
    const filter = {
        ui: {
            create: (args) => {
                const flValInput = createElement('input', { className: 'flm-input' });
                args.target.appendChild(flValInput);
                dropInstance = new DropDownList({
                    dataSource: new DataManager(employeeData),
                    fields: { text: 'FirstName', value: 'EmployeeID' },
                    placeholder: 'Select a value',
                    popupHeight: '200px'
                });
                dropInstance.appendTo(flValInput);
            },
            read: (args) => {
                args.fltrObj.filterByColumn(args.column.field, args.operator, dropInstance.text);
            },
            write: (args) => {
                dropInstance.text = (args.filteredValue || '');
            }
        }
    };
    return <GridComponent dataSource={data} height={315} allowFiltering={true} filterSettings={filterOption}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right"/>
      <ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID' dataSource={employeeData} headerText='Employee Name' width='150' filter={filter}/>
      <ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2'/>
      <ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
    </ColumnsDirective>
    <Inject services={[ForeignKey, Filter]}/>
  </GridComponent>;
}
;
export default App;
import { createElement } from '@syncfusion/ej2-base';
import { DataManager } from '@syncfusion/ej2-data';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Column, Filter, FilterSettingsModel, ForeignKey } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';

function App() {
  let dropInstance: DropDownList;
  const filterOption: FilterSettingsModel = { type: 'Menu' };
  const filter = {
    ui: {
      create: (args: { target: Element, column: Column }) => {
        const flValInput: HTMLElement = createElement('input', { className: 'flm-input' });
        args.target.appendChild(flValInput);
        dropInstance = new DropDownList({
          dataSource: new DataManager(employeeData),
          fields: { text: 'FirstName', value: 'EmployeeID' },
          placeholder: 'Select a value',
          popupHeight: '200px'
        });
        dropInstance.appendTo(flValInput);
      },
      read: (args: { target: Element, column: Column, operator: string, fltrObj: Filter }) => {
        args.fltrObj.filterByColumn(args.column.field, args.operator, dropInstance.text);
      },
      write: (args: {
        column: object, target: Element, parent: any,
        filteredValue: string
      }) => {
        dropInstance.text = (args.filteredValue || '');
      }
    }
  };
  return <GridComponent dataSource={data} height={315} allowFiltering={true}
    filterSettings={filterOption}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
      <ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID'
        dataSource={employeeData} headerText='Employee Name' width='150' filter={filter} />
      <ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2' />
      <ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
    </ColumnsDirective>
    <Inject services={[ForeignKey, Filter]} />
  </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
    },
    {
        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 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
    },
    {
        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 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'
}];

var order = JSON.stringify([
    {
        'OrderID': 10248,
        'CustomerID': 'VINET',
        'CustomerName': 'Maria ',
        'OrderDate': '1996-07-04T00:00:00.000Z',
        'ShippedDate': '1996-07-16T00:00:00.000Z',
        'Freight': 32.38,
        'ShipName': 'Vins et alcools Chevalier',
        'ShipAddress': '59 rue de l Abbaye',
        'ShipCity': 'Reims',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 3
    },
    {
        'OrderID': 10249,
        'CustomerID': 'TOMSP',
        'CustomerName': 'Ana Trujillo',
        'OrderDate': '1996-07-05T00:00:00.000Z',
        'ShippedDate': '1996-07-10T00:00:00.000Z',
        'Freight': 11.61,
        'ShipName': 'Toms Spezialitäten',
        'ShipAddress': 'Luisenstr. 48',
        'ShipCity': 'Münster',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 5
    },
    {
        'OrderID': 10250,
        'CustomerID': 'HANAR',
        'CustomerName': 'Antonio Moreno',
        'OrderDate': '1996-07-08T00:00:00.000Z',
        'ShippedDate': '1996-07-12T00:00:00.000Z',
        'Freight': 65.83,
        'ShipName': 'Hanari Carnes',
        'ShipAddress': 'Rua do Paço, 67',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 1
    },
    {
        'OrderID': 10251,
        'CustomerID': 'VICTE',
        'CustomerName': 'Thomas Hardy',
        'OrderDate': '1996-07-08T00:00:00.000Z',
        'ShippedDate': '1996-07-15T00:00:00.000Z',
        'Freight': 41.34,
        'ShipName': 'Victuailles en stock',
        'ShipAddress': '2, rue du Commerce',
        'ShipCity': 'Lyon',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 6
    },
    {
        'OrderID': 10252,
        'CustomerID': 'SUPRD',
        'CustomerName': 'Christina Berglund',
        'OrderDate': '1996-07-09T00:00:00.000Z',
        'ShippedDate': '1996-07-11T00:00:00.000Z',
        'Freight': 51.3,
        'ShipName': 'Suprêmes délices',
        'ShipAddress': 'Boulevard Tirou, 255',
        'ShipCity': 'Charleroi',
        'ShipRegion': null,
        'ShipCountry': 'Belgium',
        'EmployeeID': 2
    },
    {
        'OrderID': 10253,
        'CustomerID': 'HANAR',
        'CustomerName': 'Hanna Moos',
        'OrderDate': '1996-07-10T00:00:00.000Z',
        'ShippedDate': '1996-07-16T00:00:00.000Z',
        'Freight': 58.17,
        'ShipName': 'Hanari Carnes',
        'ShipAddress': 'Rua do Paço, 67',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 4
    },
    {
        'OrderID': 10254,
        'CustomerID': 'CHOPS',
        'CustomerName': 'Frédérique Citeaux',
        'OrderDate': '1996-07-11T00:00:00.000Z',
        'ShippedDate': '1996-07-23T00:00:00.000Z',
        'Freight': 22.98,
        'ShipName': 'Chop-suey Chinese',
        'ShipAddress': 'Hauptstr. 31',
        'ShipCity': 'Bern',
        'ShipRegion': null,
        'ShipCountry': 'Switzerland',
        'EmployeeID': 9
    },
    {
        'OrderID': 10255,
        'CustomerID': 'RICSU',
        'CustomerName': 'Martín Sommer',
        'OrderDate': '1996-07-12T00:00:00.000Z',
        'ShippedDate': '1996-07-15T00:00:00.000Z',
        'Freight': 148.33,
        'ShipName': 'Richter Supermarkt',
        'ShipAddress': 'Starenweg 5',
        'ShipCity': 'Genève',
        'ShipRegion': null,
        'ShipCountry': 'Switzerland',
        'EmployeeID': 7
    },
    {
        'OrderID': 10256,
        'CustomerID': 'WELLI',
        'CustomerName': 'Laurence Lebihan',
        'OrderDate': '1996-07-15T00:00:00.000Z',
        'ShippedDate': '1996-07-17T00:00:00.000Z',
        'Freight': 13.97,
        'ShipName': 'Wellington Importadora',
        'ShipAddress': 'Rua do Mercado, 12',
        'ShipCity': 'Resende',
        'ShipRegion': 'SP',
        'ShipCountry': 'Brazil',
        'EmployeeID': 8
    },
    {
        'OrderID': 10257,
        'CustomerID': 'HILAA',
        'CustomerName': 'Elizabeth Lincoln',
        'OrderDate': '1996-07-16T00:00:00.000Z',
        'ShippedDate': '1996-07-22T00:00:00.000Z',
        'Freight': 81.91,
        'ShipName': 'HILARION-Abastos',
        'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
        'ShipCity': 'San Cristóbal',
        'ShipRegion': 'Táchira',
        'ShipCountry': 'Venezuela',
        'EmployeeID': 5
    },
    {
        'OrderID': 10258,
        'CustomerID': 'ERNSH',
        'CustomerName': 'Victoria Ashworth',
        'OrderDate': '1996-07-17T00:00:00.000Z',
        'ShippedDate': '1996-07-23T00:00:00.000Z',
        'Freight': 140.51,
        'ShipName': 'Ernst Handel',
        'ShipAddress': 'Kirchgasse 6',
        'ShipCity': 'Graz',
        'ShipRegion': null,
        'ShipCountry': 'Austria',
        'EmployeeID': 1
    },
    {
        'OrderID': 10259,
        'CustomerID': 'CENTC',
        'CustomerName': 'Patricio Simpson',
        'OrderDate': '1996-07-18T00:00:00.000Z',
        'ShippedDate': '1996-07-25T00:00:00.000Z',
        'Freight': 3.25,
        'ShipName': 'Centro comercial Moctezuma',
        'ShipAddress': 'Sierras de Granada 9993',
        'ShipCity': 'México D.F.',
        'ShipRegion': null,
        'ShipCountry': 'Mexico',
        'EmployeeID': 6
    },
    {
        'OrderID': 10260,
        'CustomerID': 'OTTIK',
        'CustomerName': 'Francisco Chang',
        'OrderDate': '1996-07-19T00:00:00.000Z',
        'ShippedDate': '1996-07-29T00:00:00.000Z',
        'Freight': 55.09,
        'ShipName': 'Ottilies Käseladen',
        'ShipAddress': 'Mehrheimerstr. 369',
        'ShipCity': 'Köln',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 2
    },
    {
        'OrderID': 10261,
        'CustomerID': 'QUEDE',
        'CustomerName': 'Yang Wang',
        'OrderDate': '1996-07-19T00:00:00.000Z',
        'ShippedDate': '1996-07-30T00:00:00.000Z',
        'Freight': 3.05,
        'ShipName': 'Que Delícia',
        'ShipAddress': 'Rua da Panificadora, 12',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 7
    },
    {
        'OrderID': 10262,
        'CustomerID': 'RATTC',
        'CustomerName': 'Pedro Afonso',
        'OrderDate': '1996-07-22T00:00:00.000Z',
        'ShippedDate': '1996-07-25T00:00:00.000Z',
        'Freight': 48.29,
        'ShipName': 'Rattlesnake Canyon Grocery',
        'ShipAddress': '2817 Milton Dr.',
        'ShipCity': 'Albuquerque',
        'ShipRegion': 'NM',
        'ShipCountry': 'USA',
        'EmployeeID': 4
    },
    {
        'OrderID': 10263,
        'CustomerID': 'ERNSH',
        'CustomerName': 'Elizabeth Brown',
        'OrderDate': '1996-07-23T00:00:00.000Z',
        'ShippedDate': '1996-07-31T00:00:00.000Z',
        'Freight': 146.06,
        'ShipName': 'Ernst Handel',
        'ShipAddress': 'Kirchgasse 6',
        'ShipCity': 'Graz',
        'ShipRegion': null,
        'ShipCountry': 'Austria',
        'EmployeeID': 3
    },
    {
        'OrderID': 10264,
        'CustomerID': 'FOLKO',
        'CustomerName': 'Sven Ottlieb',
        'OrderDate': '1996-07-24T00:00:00.000Z',
        'ShippedDate': '1996-08-23T00:00:00.000Z',
        'Freight': 3.67,
        'ShipName': 'Folk och fä HB',
        'ShipAddress': 'Åkergatan 24',
        'ShipCity': 'Bräcke',
        'ShipRegion': null,
        'ShipCountry': 'Sweden',
        'EmployeeID': 8
    },
    {
        'OrderID': 10265,
        'CustomerID': 'BLONP',
        'CustomerName': 'Ann Devon',
        'OrderDate': '1996-07-25T00:00:00.000Z',
        'ShippedDate': '1996-08-12T00:00:00.000Z',
        'Freight': 55.28,
        'ShipName': 'Blondel père et fils',
        'ShipAddress': '24, place Kléber',
        'ShipCity': 'Strasbourg',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 3
    },
    {
        'OrderID': 10266,
        'CustomerID': 'WARTH',
        'CustomerName': 'Roland Mendel',
        'OrderDate': '1996-07-26T00:00:00.000Z',
        'ShippedDate': '1996-07-31T00:00:00.000Z',
        'Freight': 25.73,
        'ShipName': 'Wartian Herkku',
        'ShipAddress': 'Torikatu 38',
        'ShipCity': 'Oulu',
        'ShipRegion': null,
        'ShipCountry': 'Finland',
        'EmployeeID': 2
    },
    {
        'OrderID': 10267,
        'CustomerID': 'FRANK',
        'CustomerName': 'Aria Cruz',
        'OrderDate': '1996-07-29T00:00:00.000Z',
        'ShippedDate': '1996-08-06T00:00:00.000Z',
        'Freight': 208.58,
        'ShipName': 'Frankenversand',
        'ShipAddress': 'Berliner Platz 43',
        'ShipCity': 'München',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 4
    },
    {
        'OrderID': 10268,
        'CustomerID': 'GROSR',
        'CustomerName': 'Diego Roel',
        'OrderDate': '1996-07-30T00:00:00.000Z',
        'ShippedDate': '1996-08-02T00:00:00.000Z',
        'Freight': 66.29,
        'ShipName': 'GROSELLA-Restaurante',
        'ShipAddress': '5ª Ave. Los Palos Grandes',
        'ShipCity': 'Caracas',
        'ShipRegion': 'DF',
        'ShipCountry': 'Venezuela',
        'EmployeeID': 2
    },
    {
        'OrderID': 10269,
        'CustomerID': 'WHITC',
        'CustomerName': 'Martine Rancé',
        'OrderDate': '1996-07-31T00:00:00.000Z',
        'ShippedDate': '1996-08-09T00:00:00.000Z',
        'Freight': 4.56,
        'ShipName': 'White Clover Markets',
        'ShipAddress': '1029 - 12th Ave. S.',
        'ShipCity': 'Seattle',
        'ShipRegion': 'WA',
        'ShipCountry': 'USA',
        'EmployeeID': 1
    },
    {
        'OrderID': 10270,
        'CustomerID': 'WARTH',
        'CustomerName': 'Maria Larsson',
        'OrderDate': '1996-08-01T00:00:00.000Z',
        'ShippedDate': '1996-08-02T00:00:00.000Z',
        'Freight': 136.54,
        'ShipName': 'Wartian Herkku',
        'ShipAddress': 'Torikatu 38',
        'ShipCity': 'Oulu',
        'ShipRegion': null,
        'ShipCountry': 'Finland',
        'EmployeeID': 4
    },
    {
        'OrderID': 10271,
        'CustomerID': 'SPLIR',
        'CustomerName': 'Peter Franken',
        'OrderDate': '1996-08-01T00:00:00.000Z',
        'ShippedDate': '1996-08-30T00:00:00.000Z',
        'Freight': 4.54,
        'ShipName': 'Split Rail Beer & Ale',
        'ShipAddress': 'P.O. Box 555',
        'ShipCity': 'Lander',
        'ShipRegion': 'WY',
        'ShipCountry': 'USA',
        'EmployeeID': 5
    },
    {
        'OrderID': 10272,
        'CustomerID': 'RATTC',
        'CustomerName': 'Carine Schmitt',
        'OrderDate': '1996-08-02T00:00:00.000Z',
        'ShippedDate': '1996-08-06T00:00:00.000Z',
        'Freight': 98.03,
        'ShipName': 'Rattlesnake Canyon Grocery',
        'ShipAddress': '2817 Milton Dr.',
        'ShipCity': 'Albuquerque',
        'ShipRegion': 'NM',
        'ShipCountry': 'USA',
        'EmployeeID': 3
    },
    {
        'OrderID': 10273,
        'CustomerID': 'QUICK',
        'CustomerName': 'Paolo Accorti',
        'OrderDate': '1996-08-05T00:00:00.000Z',
        'ShippedDate': '1996-08-12T00:00:00.000Z',
        'Freight': 76.07,
        'ShipName': 'QUICK-Stop',
        'ShipAddress': 'Taucherstraße 10',
        'ShipCity': 'Cunewalde',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 6
    },
    {
        'OrderID': 10274,
        'CustomerID': 'VINET',
        'CustomerName': 'Lino Rodriguez',
        'OrderDate': '1996-08-06T00:00:00.000Z',
        'ShippedDate': '1996-08-16T00:00:00.000Z',
        'Freight': 6.01,
        'ShipName': 'Vins et alcools Chevalier',
        'ShipAddress': '59 rue de l Abbaye',
        'ShipCity': 'Reims',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 1
    },
    {
        'OrderID': 10275,
        'CustomerID': 'MAGAA',
        'CustomerName': 'Eduardo Saavedra',
        'OrderDate': '1996-08-07T00:00:00.000Z',
        'ShippedDate': '1996-08-09T00:00:00.000Z',
        'Freight': 26.93,
        'ShipName': 'Magazzini Alimentari Riuniti',
        'ShipAddress': 'Via Ludovico il Moro 22',
        'ShipCity': 'Bergamo',
        'ShipRegion': null,
        'ShipCountry': 'Italy',
        'EmployeeID': 3
    },
    {
        'OrderID': 10276,
        'CustomerID': 'TORTU',
        'CustomerName': 'José Pedro Freyre',
        'OrderDate': '1996-08-08T00:00:00.000Z',
        'ShippedDate': '1996-08-14T00:00:00.000Z',
        'Freight': 13.84,
        'ShipName': 'Tortuga Restaurante',
        'ShipAddress': 'Avda. Azteca 123',
        'ShipCity': 'México D.F.',
        'ShipRegion': null,
        'ShipCountry': 'Mexico',
        'EmployeeID': 5
    },
    {
        'OrderID': 10277,
        'CustomerID': 'MORGK',
        'CustomerName': 'André Fonseca',
        'OrderDate': '1996-08-09T00:00:00.000Z',
        'ShippedDate': '1996-08-13T00:00:00.000Z',
        'Freight': 125.77,
        'ShipName': 'Morgenstern Gesundkost',
        'ShipAddress': 'Heerstr. 22',
        'ShipCity': 'Leipzig',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 7
    },
    {
        'OrderID': 10278,
        'CustomerID': 'BERGS',
        'CustomerName': 'Howard Snyder',
        'OrderDate': '1996-08-12T00:00:00.000Z',
        'ShippedDate': '1996-08-16T00:00:00.000Z',
        'Freight': 92.69,
        'ShipName': 'Berglunds snabbköp',
        'ShipAddress': 'Berguvsvägen  8',
        'ShipCity': 'Luleå',
        'ShipRegion': null,
        'ShipCountry': 'Sweden',
        'EmployeeID': 9
    },
    {
        'OrderID': 10279,
        'CustomerID': 'LEHMS',
        'CustomerName': 'Manuel Pereira',
        'OrderDate': '1996-08-13T00:00:00.000Z',
        'ShippedDate': '1996-08-16T00:00:00.000Z',
        'Freight': 25.83,
        'ShipName': 'Lehmanns Marktstand',
        'ShipAddress': 'Magazinweg 7',
        'ShipCity': 'Frankfurt a.M.',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 2
    },
    {
        'OrderID': 10280,
        'CustomerID': 'BERGS',
        'CustomerName': 'Mario Pontes',
        'OrderDate': '1996-08-14T00:00:00.000Z',
        'ShippedDate': '1996-09-12T00:00:00.000Z',
        'Freight': 8.98,
        'ShipName': 'Berglunds snabbköp',
        'ShipAddress': 'Berguvsvägen  8',
        'ShipCity': 'Luleå',
        'ShipRegion': null,
        'ShipCountry': 'Sweden',
        'EmployeeID': 4
    },
    {
        'OrderID': 10281,
        'CustomerID': 'ROMEY',
        'CustomerName': 'Carlos Hernández',
        'OrderDate': '1996-08-14T00:00:00.000Z',
        'ShippedDate': '1996-08-21T00:00:00.000Z',
        'Freight': 2.94,
        'ShipName': 'Romero y tomillo',
        'ShipAddress': 'Gran Vía, 1',
        'ShipCity': 'Madrid',
        'ShipRegion': null,
        'ShipCountry': 'Spain',
        'EmployeeID': 6
    },
    {
        'OrderID': 10282,
        'CustomerID': 'ROMEY',
        'CustomerName': 'Yoshi Latimer',
        'OrderDate': '1996-08-15T00:00:00.000Z',
        'ShippedDate': '1996-08-21T00:00:00.000Z',
        'Freight': 12.69,
        'ShipName': 'Romero y tomillo',
        'ShipAddress': 'Gran Vía, 1',
        'ShipCity': 'Madrid',
        'ShipRegion': null,
        'ShipCountry': 'Spain',
        'EmployeeID': 8
    },
    {
        'OrderID': 10283,
        'CustomerID': 'LILAS',
        'CustomerName': 'Patricia McKenna',
        'OrderDate': '1996-08-16T00:00:00.000Z',
        'ShippedDate': '1996-08-23T00:00:00.000Z',
        'Freight': 84.81,
        'ShipName': 'LILA-Supermercado',
        'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
        'ShipCity': 'Barquisimeto',
        'ShipRegion': 'Lara',
        'ShipCountry': 'Venezuela',
        'EmployeeID': 9
    },
    {
        'OrderID': 10284,
        'CustomerID': 'LEHMS',
        'CustomerName': 'Helen Bennett',
        'OrderDate': '1996-08-19T00:00:00.000Z',
        'ShippedDate': '1996-08-27T00:00:00.000Z',
        'Freight': 76.56,
        'ShipName': 'Lehmanns Marktstand',
        'ShipAddress': 'Magazinweg 7',
        'ShipCity': 'Frankfurt a.M.',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 6
    },
    {
        'OrderID': 10285,
        'CustomerID': 'QUICK',
        'CustomerName': 'Philip Cramer',
        'OrderDate': '1996-08-20T00:00:00.000Z',
        'ShippedDate': '1996-08-26T00:00:00.000Z',
        'Freight': 76.83,
        'ShipName': 'QUICK-Stop',
        'ShipAddress': 'Taucherstraße 10',
        'ShipCity': 'Cunewalde',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 3
    },
    {
        'OrderID': 10286,
        'CustomerID': 'QUICK',
        'CustomerName': 'Daniel Tonini',
        'OrderDate': '1996-08-21T00:00:00.000Z',
        'ShippedDate': '1996-08-30T00:00:00.000Z',
        'Freight': 229.24,
        'ShipName': 'QUICK-Stop',
        'ShipAddress': 'Taucherstraße 10',
        'ShipCity': 'Cunewalde',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 1
    },
    {
        'OrderID': 10287,
        'CustomerID': 'RICAR',
        'CustomerName': 'Annette Roulet',
        'OrderDate': '1996-08-22T00:00:00.000Z',
        'ShippedDate': '1996-08-28T00:00:00.000Z',
        'Freight': 12.76,
        'ShipName': 'Ricardo Adocicados',
        'ShipAddress': 'Av. Copacabana, 267',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 8
    },
    {
        'OrderID': 10288,
        'CustomerID': 'REGGC',
        'CustomerName': 'Yoshi Tannamuri',
        'OrderDate': '1996-08-23T00:00:00.000Z',
        'ShippedDate': '1996-09-03T00:00:00.000Z',
        'Freight': 7.45,
        'ShipName': 'Reggiani Caseifici',
        'ShipAddress': 'Strada Provinciale 124',
        'ShipCity': 'Reggio Emilia',
        'ShipRegion': null,
        'ShipCountry': 'Italy',
        'EmployeeID': 4
    },
    {
        'OrderID': 10289,
        'CustomerID': 'BSBEV',
        'CustomerName': 'John Steel',
        'OrderDate': '1996-08-26T00:00:00.000Z',
        'ShippedDate': '1996-08-28T00:00:00.000Z',
        'Freight': 22.77,
        'ShipName': 'B s Beverages',
        'ShipAddress': 'Fauntleroy Circus',
        'ShipCity': 'London',
        'ShipRegion': null,
        'ShipCountry': 'UK',
        'EmployeeID': 2
    },
    {
        'OrderID': 10290,
        'CustomerID': 'COMMI',
        'CustomerNames': 'Renate Messner',
        'OrderDate': '1996-08-27T00:00:00.000Z',
        'ShippedDate': '1996-09-03T00:00:00.000Z',
        'Freight': 79.7,
        'ShipName': 'Comércio Mineiro',
        'ShipAddress': 'Av. dos Lusíadas, 23',
        'ShipCity': 'Sao Paulo',
        'ShipRegion': 'SP',
        'ShipCountry': 'Brazil',
        'EmployeeID': 5
    },
    {
        'OrderID': 10291,
        'CustomerID': 'QUEDE',
        'CustomerName': 'Jaime Yorres',
        'OrderDate': '1996-08-27T00:00:00.000Z',
        'ShippedDate': '1996-09-04T00:00:00.000Z',
        'Freight': 6.4,
        'ShipName': 'Que Delícia',
        'ShipAddress': 'Rua da Panificadora, 12',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 7
    },
    {
        'OrderID': 10292,
        'CustomerID': 'TRADH',
        'CustomerName': 'Carlos González',
        'OrderDate': '1996-08-28T00:00:00.000Z',
        'ShippedDate': '1996-09-02T00:00:00.000Z',
        'Freight': 1.35,
        'ShipName': 'Tradiçao Hipermercados',
        'ShipAddress': 'Av. Inês de Castro, 414',
        'ShipCity': 'Sao Paulo',
        'ShipRegion': 'SP',
        'ShipCountry': 'Brazil',
        'EmployeeID': 3
    },
    {
        'OrderID': 10293,
        'CustomerID': 'TORTU',
        'CustomerName': 'Felipe Izquierdo',
        'OrderDate': '1996-08-29T00:00:00.000Z',
        'ShippedDate': '1996-09-11T00:00:00.000Z',
        'Freight': 21.18,
        'ShipName': 'Tortuga Restaurante',
        'ShipAddress': 'Avda. Azteca 123',
        'ShipCity': 'México D.F.',
        'ShipRegion': null,
        'ShipCountry': 'Mexico',
        'EmployeeID': 1
    },
    {
        'OrderID': 10294,
        'CustomerID': 'RATTC',
        'CustomerName': 'Fran Wilson',
        'OrderDate': '1996-08-30T00:00:00.000Z',
        'ShippedDate': '1996-09-05T00:00:00.000Z',
        'Freight': 147.26,
        'ShipName': 'Rattlesnake Canyon Grocery',
        'ShipAddress': '2817 Milton Dr.',
        'ShipCity': 'Albuquerque',
        'ShipRegion': 'NM',
        'ShipCountry': 'USA',
        'EmployeeID': 2
    },
    {
        'OrderID': 10295,
        'CustomerID': 'VINET',
        'CustomerName': 'Giovanni Rovelli',
        'OrderDate': '1996-09-02T00:00:00.000Z',
        'ShippedDate': '1996-09-10T00:00:00.000Z',
        'Freight': 1.15,
        'ShipName': 'Vins et alcools Chevalier',
        'ShipAddress': '59 rue de l Abbaye',
        'ShipCity': 'Reims',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 3
    },
    {
        'OrderID': 10296,
        'CustomerID': 'LILAS',
        'CustomerName': 'Catherine Dewey',
        'OrderDate': '1996-09-03T00:00:00.000Z',
        'ShippedDate': '1996-09-11T00:00:00.000Z',
        'Freight': 0.12,
        'ShipName': 'LILA-Supermercado',
        'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
        'ShipCity': 'Barquisimeto',
        'ShipRegion': 'Lara',
        'ShipCountry': 'Venezuela',
        'EmployeeID': 4
    },
    {
        'OrderID': 10297,
        'CustomerID': 'BLONP',
        'CustomerName': 'Jean Fresnière',
        'OrderDate': '1996-09-04T00:00:00.000Z',
        'ShippedDate': '1996-09-10T00:00:00.000Z',
        'Freight': 5.74,
        'ShipName': 'Blondel père et fils',
        'ShipAddress': '24, place Kléber',
        'ShipCity': 'Strasbourg',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 5
    },
    {
        'OrderID': 10298,
        'CustomerID': 'HUNGO',
        'CustomerName': 'Alexander Feuer',
        'OrderDate': '1996-09-05T00:00:00.000Z',
        'ShippedDate': '1996-09-11T00:00:00.000Z',
        'Freight': 168.22,
        'ShipName': 'Hungry Owl All-Night Grocers',
        'ShipAddress': '8 Johnstown Road',
        'ShipCity': 'Cork',
        'ShipRegion': 'Co. Cork',
        'ShipCountry': 'Ireland',
        'EmployeeID': 6
    },
    {
        'OrderID': 10299,
        'CustomerID': 'RICAR',
        'CustomerName': 'Simon Crowther',
        'OrderDate': '1996-09-06T00:00:00.000Z',
        'ShippedDate': '1996-09-13T00:00:00.000Z',
        'Freight': 29.76,
        'ShipName': 'Ricardo Adocicados',
        'ShipAddress': 'Av. Copacabana, 267',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 7
    },
    {
        'OrderID': 10300,
        'CustomerID': 'MAGAA',
        'CustomerNames': 'Yvonne Moncada',
        'OrderDate': '1996-09-09T00:00:00.000Z',
        'ShippedDate': '1996-09-18T00:00:00.000Z',
        'Freight': 17.68,
        'ShipName': 'Magazzini Alimentari Riuniti',
        'ShipAddress': 'Via Ludovico il Moro 22',
        'ShipCity': 'Bergamo',
        'ShipRegion': null,
        'ShipCountry': 'Italy',
        'EmployeeID': 8
    },
    {
        'OrderID': 10301,
        'CustomerID': 'WANDK',
        'CustomerName': 'Rene Phillips',
        'OrderDate': '1996-09-09T00:00:00.000Z',
        'ShippedDate': '1996-09-17T00:00:00.000Z',
        'Freight': 45.08,
        'ShipName': 'Die Wandernde Kuh',
        'ShipAddress': 'Adenauerallee 900',
        'ShipCity': 'Stuttgart',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 9
    },
    {
        'OrderID': 10302,
        'CustomerID': 'SUPRD',
        'CustomerName': 'Pirkko Koskitalo',
        'OrderDate': '1996-09-10T00:00:00.000Z',
        'ShippedDate': '1996-10-09T00:00:00.000Z',
        'Freight': 6.27,
        'ShipName': 'Suprêmes délices',
        'ShipAddress': 'Boulevard Tirou, 255',
        'ShipCity': 'Charleroi',
        'ShipRegion': null,
        'ShipCountry': 'Belgium',
        'EmployeeID': 2
    },
    {
        'OrderID': 10303,
        'CustomerID': 'GODOS',
        'CustomerName': 'Paula Parente',
        'OrderDate': '1996-09-11T00:00:00.000Z',
        'ShippedDate': '1996-09-18T00:00:00.000Z',
        'Freight': 107.83,
        'ShipName': 'Godos Cocina Típica',
        'ShipAddress': 'C/ Romero, 33',
        'ShipCity': 'Sevilla',
        'ShipRegion': null,
        'ShipCountry': 'Spain',
        'EmployeeID': 4
    },
    {
        'OrderID': 10304,
        'CustomerID': 'TORTU',
        'CustomerName': 'Karl Jablonski',
        'OrderDate': '1996-09-12T00:00:00.000Z',
        'ShippedDate': '1996-09-17T00:00:00.000Z',
        'Freight': 63.79,
        'ShipName': 'Tortuga Restaurante',
        'ShipAddress': 'Avda. Azteca 123',
        'ShipCity': 'México D.F.',
        'ShipRegion': null,
        'ShipCountry': 'Mexico',
        'EmployeeID': 8
    },
    {
        'OrderID': 10305,
        'CustomerID': 'OLDWO',
        'CustomerName': 'Matti Karttunen',
        'OrderDate': '1996-09-13T00:00:00.000Z',
        'ShippedDate': '1996-10-09T00:00:00.000Z',
        'Freight': 257.62,
        'ShipName': 'Old World Delicatessen',
        'ShipAddress': '2743 Bering St.',
        'ShipCity': 'Anchorage',
        'ShipRegion': 'AK',
        'ShipCountry': 'USA',
        'EmployeeID': 6
    },
    {
        'OrderID': 10306,
        'CustomerID': 'ROMEY',
        'CustomerName': 'Zbyszek Piestrzeniewicz',
        'OrderDate': '1996-09-16T00:00:00.000Z',
        'ShippedDate': '1996-09-23T00:00:00.000Z',
        'Freight': 7.56,
        'ShipName': 'Romero y tomillo',
        'ShipAddress': 'Gran Vía, 1',
        'ShipCity': 'Madrid',
        'ShipRegion': null,
        'ShipCountry': 'Spain',
        'EmployeeID': 3
    },
    {
        'OrderID': 10307,
        'CustomerID': 'LONEP',
        'CustomerName': 'Zbyszek Piestrzeniewicz',
        'OrderDate': '1996-09-17T00:00:00.000Z',
        'ShippedDate': '1996-09-25T00:00:00.000Z',
        'Freight': 0.56,
        'ShipName': 'Lonesome Pine Restaurant',
        'ShipAddress': '89 Chiaroscuro Rd.',
        'ShipCity': 'Portland',
        'ShipRegion': 'OR',
        'ShipCountry': 'USA',
        'EmployeeID': 1
    }
]);
export let orderDetails: object[] = JSON.parse(order, function (field, value) {
    var dupValue = value;
    if (typeof value === 'string' && /^(\d{4}\-\d\d\-\d\d([tT][\d:\.]*){1})([zZ]|([+\-])(\d\d):?(\d\d))?$/.test(value)) {
        var arr = dupValue.split(/[^0-9]/);
        value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5], 10));
    }
    return value;
});

export let customerData: object[] = [
    {
        'CustomerID': 'ALFKI',
        'ContactName': 'Maria ',
        'CompanyName': 'Alfreds Futterkiste',
        'Address': 'Obere Str. 57',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'ANATR',
        'ContactName': 'Ana Trujillo',
        'CompanyName': 'Ana Trujillo Emparedados y helados',
        'Address': 'Avda. de la Constitución 2222',
        'Country': 'Mexico'
    },
    {
        'CustomerID': 'ANTON',
        'ContactName': 'Antonio Moreno',
        'CompanyName': 'Antonio Moreno Taquería',
        'Address': 'Mataderos  2312',
        'Country': 'Mexico'
    },
    {
        'CustomerID': 'AROUT',
        'ContactName': 'Thomas Hardy',
        'CompanyName': 'Around the Horn',
        'Address': '120 Hanover Sq.',
        'Country': 'UK'
    },
    {
        'CustomerID': 'BERGS',
        'ContactName': 'Christina Berglund',
        'CompanyName': 'Berglunds snabbköp',
        'Address': 'Berguvsvägen  8',
        'Country': 'Sweden'
    },
    {
        'CustomerID': 'BLAUS',
        'ContactName': 'Hanna Moos',
        'CompanyName': 'Blauer See Delikatessen',
        'Address': 'Forsterstr. 57',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'BLONP',
        'ContactName': 'Frédérique Citeaux',
        'CompanyName': 'Blondesddsl père et fils',
        'Address': '24, place Kléber',
        'Country': 'France'
    },
    {
        'CustomerID': 'BOLID',
        'ContactName': 'Martín Sommer',
        'CompanyName': 'Bólido Comidas preparadas',
        'Address': 'C/ Araquil, 67',
        'Country': 'Spain'
    },
    {
        'CustomerID': 'BONAP',
        'ContactName': 'Laurence Lebihan',
        'CompanyName': 'Bon app',
        'Address': '12, rue des Bouchers',
        'Country': 'France'
    },
    {
        'CustomerID': 'BOTTM',
        'ContactName': 'Elizabeth Lincoln',
        'CompanyName': 'Bottom-Dollar Markets',
        'Address': '23 Tsawassen Blvd.',
        'Country': 'Canada'
    },
    {
        'CustomerID': 'BSBEV',
        'ContactName': 'Victoria Ashworth',
        'CompanyName': 'B\'s Beverages',
        'Address': 'Fauntleroy Circus',
        'Country': 'UK'
    },
    {
        'CustomerID': 'CACTU',
        'ContactName': 'Patricio Simpson',
        'CompanyName': 'Cactus Comidas para llevar',
        'Address': 'Cerrito 333',
        'Country': 'Argentina'
    },
    {
        'CustomerID': 'CENTC',
        'ContactName': 'Francisco Chang',
        'CompanyName': 'Centro comercial Moctezuma',
        'Address': 'Sierras de Granada 9993',
        'Country': 'Mexico'
    },
    {
        'CustomerID': 'CHOPS',
        'ContactName': 'Yang Wang',
        'CompanyName': 'Chop-suey Chinese',
        'Address': 'Hauptstr. 29',
        'Country': 'Switzerland'
    },
    {
        'CustomerID': 'COMMI',
        'ContactName': 'Pedro Afonso',
        'CompanyName': 'Comércio Mineiro',
        'Address': 'Av. dos Lusíadas, 23',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'CONSH',
        'ContactName': 'Elizabeth Brown',
        'CompanyName': 'Consolidated Holdings',
        'Address': 'Berkeley Gardens 12  Brewery',
        'Country': 'UK'
    },
    {
        'CustomerID': 'DRACD',
        'ContactName': 'Sven Ottlieb',
        'CompanyName': 'Drachenblut Delikatessen',
        'Address': 'Walserweg 21',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'DUMON',
        'ContactName': 'Janine Labrune',
        'CompanyName': 'Du monde entier',
        'Address': '67, rue des Cinquante Otages',
        'Country': 'France'
    },
    {
        'CustomerID': 'EASTC',
        'ContactName': 'Ann Devon',
        'CompanyName': 'Eastern Connection',
        'Address': '35 King George',
        'Country': 'UK'
    },
    {
        'CustomerID': 'ERNSH',
        'ContactName': 'Roland Mendel',
        'CompanyName': 'Ernst Handel',
        'Address': 'Kirchgasse 6',
        'Country': 'Austria'
    },
    {
        'CustomerID': 'FAMIA',
        'ContactName': 'Aria Cruz',
        'CompanyName': 'Familia Arquibaldo',
        'Address': 'Rua Orós, 92',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'FISSA',
        'ContactName': 'Diego Roel',
        'CompanyName': 'FISSA Fabrica Inter. Salchichas S.A.',
        'Address': 'C/ Moralzarzal, 86',
        'Country': 'Spain'
    },
    {
        'CustomerID': 'FOLIG',
        'ContactName': 'Martine Rancé',
        'CompanyName': 'Folies gourmandes',
        'Address': '184, chaussée de Tournai',
        'Country': 'France'
    },
    {
        'CustomerID': 'FOLKO',
        'ContactName': 'Maria Larsson',
        'CompanyName': 'Folk och fä HB',
        'Address': 'Åkergatan 24',
        'Country': 'Sweden'
    },
    {
        'CustomerID': 'FRANK',
        'ContactName': 'Peter Franken',
        'CompanyName': 'Frankenversand',
        'Address': 'Berliner Platz 43',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'FRANR',
        'ContactName': 'Carine Schmitt',
        'CompanyName': 'France restauration',
        'Address': '54, rue Royale',
        'Country': 'France'
    },
    {
        'CustomerID': 'FRANS',
        'ContactName': 'Paolo Accorti',
        'CompanyName': 'Franchi S.p.A.',
        'Address': 'Via Monte Bianco 34',
        'Country': 'Italy'
    },
    {
        'CustomerID': 'FURIB',
        'ContactName': 'Lino Rodriguez',
        'CompanyName': 'Furia Bacalhau e Frutos do Mar',
        'Address': 'Jardim das rosas n. 32',
        'Country': 'Portugal'
    },
    {
        'CustomerID': 'GALED',
        'ContactName': 'Eduardo Saavedra',
        'CompanyName': 'Galería del gastrónomo',
        'Address': 'Rambla de Cataluña, 23',
        'Country': 'Spain'
    },
    {
        'CustomerID': 'GODOS',
        'ContactName': 'José Pedro Freyre',
        'CompanyName': 'Godos Cocina Típica',
        'Address': 'C/ Romero, 33',
        'Country': 'Spain'
    },
    {
        'CustomerID': 'GOURL',
        'ContactName': 'André Fonseca',
        'CompanyName': 'Gourmet Lanchonetes',
        'Address': 'Av. Brasil, 442',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'GREAL',
        'ContactName': 'Howard Snyder',
        'CompanyName': 'Great Lakes Food Market',
        'Address': '2732 Baker Blvd.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'GROSR',
        'ContactName': 'Manuel Pereira',
        'CompanyName': 'GROSELLA-Restaurante',
        'Address': '5ª Ave. Los Palos Grandes',
        'Country': 'Venezuela'
    },
    {
        'CustomerID': 'HANAR',
        'ContactName': 'Mario Pontes',
        'CompanyName': 'Hanari Carnes',
        'Address': 'Rua do Paço, 67',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'HILAA',
        'ContactName': 'Carlos Hernández',
        'CompanyName': 'HILARION-Abastos',
        'Address': 'Carrera 22 con Ave. Carlos Soublette #8-35',
        'Country': 'Venezuela'
    },
    {
        'CustomerID': 'HUNGC',
        'ContactName': 'Yoshi Latimer',
        'CompanyName': 'Hungry Coyote Import Store',
        'Address': 'City Center Plaza 516 Main St.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'HUNGO',
        'ContactName': 'Patricia McKenna',
        'CompanyName': 'Hungry Owl All-Night Grocers',
        'Address': '8 Johnstown Road',
        'Country': 'Ireland'
    },
    {
        'CustomerID': 'ISLAT',
        'ContactName': 'Helen Bennett',
        'CompanyName': 'Island Trading',
        'Address': 'Garden House Crowther Way',
        'Country': 'UK'
    },
    {
        'CustomerID': 'KOENE',
        'ContactName': 'Philip Cramer',
        'CompanyName': 'Königlich Essen',
        'Address': 'Maubelstr. 90',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'LACOR',
        'ContactName': 'Daniel Tonini',
        'CompanyName': 'La corne d\'abondance',
        'Address': '67, avenue de l\'Europe',
        'Country': 'France'
    },
    {
        'CustomerID': 'LAMAI',
        'ContactName': 'Annette Roulet',
        'CompanyName': 'La maison d\'Asie',
        'Address': '1 rue Alsace-Lorraine',
        'Country': 'France'
    },
    {
        'CustomerID': 'LAUGB',
        'ContactName': 'Yoshi Tannamuri',
        'CompanyName': 'Laughing Bacchus Wine Cellars',
        'Address': '1900 Oak St.',
        'Country': 'Canada'
    },
    {
        'CustomerID': 'LAZYK',
        'ContactName': 'John Steel',
        'CompanyName': 'Lazy K Kountry Store',
        'Address': '12 Orchestra Terrace',
        'Country': 'USA'
    },
    {
        'CustomerID': 'LEHMS',
        'ContactName': 'Renate Messner',
        'CompanyName': 'Lehmanns Marktstand',
        'Address': 'Magazinweg 7',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'LETSS',
        'ContactName': 'Jaime Yorres',
        'CompanyName': 'Let\'s Stop N Shop',
        'Address': '87 Polk St. Suite 5',
        'Country': 'USA'
    },
    {
        'CustomerID': 'LILAS',
        'ContactName': 'Carlos González',
        'CompanyName': 'LILA-Supermercado',
        'Address': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
        'Country': 'Venezuela'
    },
    {
        'CustomerID': 'LINOD',
        'ContactName': 'Felipe Izquierdo',
        'CompanyName': 'LINO-Delicateses',
        'Address': 'Ave. 5 de Mayo Porlamar',
        'Country': 'Venezuela'
    },
    {
        'CustomerID': 'LONEP',
        'ContactName': 'Fran Wilson',
        'CompanyName': 'Lonesome Pine Restaurant',
        'Address': '89 Chiaroscuro Rd.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'MAGAA',
        'ContactName': 'Giovanni Rovelli',
        'CompanyName': 'Magazzini Alimentari Riuniti',
        'Address': 'Via Ludovico il Moro 22',
        'Country': 'Italy'
    },
    {
        'CustomerID': 'MAISD',
        'ContactName': 'Catherine Dewey',
        'CompanyName': 'Maison Dewey',
        'Address': 'Rue Joseph-Bens 532',
        'Country': 'Belgium'
    },
    {
        'CustomerID': 'MEREP',
        'ContactName': 'Jean Fresnière',
        'CompanyName': 'Mère Paillarde',
        'Address': '43 rue St. Laurent',
        'Country': 'Canada'
    },
    {
        'CustomerID': 'MORGK',
        'ContactName': 'Alexander Feuer',
        'CompanyName': 'Morgenstern Gesundkost',
        'Address': 'Heerstr. 22',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'NORTS',
        'ContactName': 'Simon Crowther',
        'CompanyName': 'North/South',
        'Address': 'South House 300 Queensbridge',
        'Country': 'UK'
    },
    {
        'CustomerID': 'OCEAN',
        'ContactName': 'Yvonne Moncada',
        'CompanyName': 'Océano Atlántico Ltda.',
        'Address': 'Ing. Gustavo Moncada 8585 Piso 20-A',
        'Country': 'Argentina'
    },
    {
        'CustomerID': 'OLDWO',
        'ContactName': 'Rene Phillips',
        'CompanyName': 'Old World Delicatessen',
        'Address': '2743 Bering St.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'OTTIK',
        'ContactName': 'Henriette Pfalzheim',
        'CompanyName': 'Ottilies Käseladen',
        'Address': 'Mehrheimerstr. 369',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'PARIS',
        'ContactName': 'Marie Bertrand',
        'CompanyName': 'Paris spécialités',
        'Address': '265, boulevard Charonne',
        'Country': 'France'
    },
    {
        'CustomerID': 'PERIC',
        'ContactName': 'Guillermo Fernández',
        'CompanyName': 'Pericles Comidas clásicas',
        'Address': 'Calle Dr. Jorge Cash 321',
        'Country': 'Mexico'
    },
    {
        'CustomerID': 'PICCO',
        'ContactName': 'Georg Pipps',
        'CompanyName': 'Piccolo und mehr',
        'Address': 'Geislweg 14',
        'Country': 'Austria'
    },
    {
        'CustomerID': 'PRINI',
        'ContactName': 'Isabel de Castro',
        'CompanyName': 'Princesa Isabel Vinhos',
        'Address': 'Estrada da saúde n. 58',
        'Country': 'Portugal'
    },
    {
        'CustomerID': 'QUEDE',
        'ContactName': 'Bernardo Batista',
        'CompanyName': 'Que Delícia',
        'Address': 'Rua da Panificadora, 12',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'QUEEN',
        'ContactName': 'Lúcia Carvalho',
        'CompanyName': 'Queen Cozinha',
        'Address': 'Alameda dos Canàrios, 891',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'QUICK',
        'ContactName': 'Horst Kloss',
        'CompanyName': 'QUICK-Stop',
        'Address': 'Taucherstraße 10',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'RANCH',
        'ContactName': 'Sergio Gutiérrez',
        'CompanyName': 'Rancho grande',
        'Address': 'Av. del Libertador 900',
        'Country': 'Argentina'
    },
    {
        'CustomerID': 'RATTC',
        'ContactName': 'Paula Wilson',
        'CompanyName': 'Rattlesnake Canyon Grocery',
        'Address': '2817 Milton Dr.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'REGGC',
        'ContactName': 'Maurizio Moroni',
        'CompanyName': 'Reggiani Caseifici',
        'Address': 'Strada Provinciale 124',
        'Country': 'Italy'
    },
    {
        'CustomerID': 'RICAR',
        'ContactName': 'Janete Limeira',
        'CompanyName': 'Ricardo Adocicados',
        'Address': 'Av. Copacabana, 267',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'RICSU',
        'ContactName': 'Michael Holz',
        'CompanyName': 'Richter Supermarkt',
        'Address': 'Grenzacherweg 237',
        'Country': 'Switzerland'
    },
    {
        'CustomerID': 'ROMEY',
        'ContactName': 'Alejandra Camino',
        'CompanyName': 'Romero y tomillo',
        'Address': 'Gran Vía, 1',
        'Country': 'Spain'
    },
    {
        'CustomerID': 'SANTG',
        'ContactName': 'Jonas Bergulfsen',
        'CompanyName': 'Santé Gourmet',
        'Address': 'Erling Skakkes gate 78',
        'Country': 'Norway'
    },
    {
        'CustomerID': 'SAVEA',
        'ContactName': 'Jose Pavarotti',
        'CompanyName': 'Save-a-lot Markets',
        'Address': '187 Suffolk Ln.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'SEVES',
        'ContactName': 'Hari Kumar',
        'CompanyName': 'Seven Seas Imports',
        'Address': '90 Wadhurst Rd.',
        'Country': 'UK'
    },
    {
        'CustomerID': 'SIMOB',
        'ContactName': 'Jytte Petersen',
        'CompanyName': 'Simons bistro',
        'Address': 'Vinbæltet 34',
        'Country': 'Denmark'
    },
    {
        'CustomerID': 'SPECD',
        'ContactName': 'Dominique Perrier',
        'CompanyName': 'Spécialités du monde',
        'Address': '25, rue Lauriston',
        'Country': 'France'
    },
    {
        'CustomerID': 'SPLIR',
        'ContactName': 'Art Braunschweiger',
        'CompanyName': 'Split Rail Beer & Ale',
        'Address': 'P.O. Box 555',
        'Country': 'USA'
    },
    {
        'CustomerID': 'SUPRD',
        'ContactName': 'Pascale Cartrain',
        'CompanyName': 'Suprêmes délices',
        'Address': 'Boulevard Tirou, 255',
        'Country': 'Belgium'
    },
    {
        'CustomerID': 'THEBI',
        'ContactName': 'Liz Nixon',
        'CompanyName': 'The Big Cheese',
        'Address': '89 Jefferson Way Suite 2',
        'Country': 'USA'
    },
    {
        'CustomerID': 'THECR',
        'ContactName': 'Liu Wong',
        'CompanyName': 'The Cracker Box',
        'Address': '55 Grizzly Peak Rd.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'TOMSP',
        'ContactName': 'Karin Josephs',
        'CompanyName': 'Toms Spezialitäten',
        'Address': 'Luisenstr. 48',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'TORTU',
        'ContactName': 'Miguel Angel Paolino',
        'CompanyName': 'Tortuga Restaurante',
        'Address': 'Avda. Azteca 123',
        'Country': 'Mexico'
    },
    {
        'CustomerID': 'TRADH',
        'ContactName': 'Anabela Domingues',
        'CompanyName': 'Tradição Hipermercados',
        'Address': 'Av. Inês de Castro, 414',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'TRAIH',
        'ContactName': 'Helvetius Nagy',
        'CompanyName': 'Trail\'s Head Gourmet Provisioners',
        'Address': '722 DaVinci Blvd.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'VAFFE',
        'ContactName': 'Palle Ibsen',
        'CompanyName': 'Vaffeljernet',
        'Address': 'Smagsloget 45',
        'Country': 'Denmark'
    },
    {
        'CustomerID': 'VICTE',
        'ContactName': 'Mary Saveley',
        'CompanyName': 'Victuailles en stock',
        'Address': '2, rue du Commerce',
        'Country': 'France'
    },
    {
        'CustomerID': 'VINET',
        'ContactName': 'Paul Henriot',
        'CompanyName': 'Vins et alcools Chevalier',
        'Address': '59 rue de l\'Abbaye',
        'Country': 'France'
    },
    {
        'CustomerID': 'WANDK',
        'ContactName': 'Rita Müller',
        'CompanyName': 'Die Wandernde Kuh',
        'Address': 'Adenauerallee 900',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'WARTH',
        'ContactName': 'Pirkko Koskitalo',
        'CompanyName': 'Wartian Herkku',
        'Address': 'Torikatu 38',
        'Country': 'Finland'
    },
    {
        'CustomerID': 'WELLI',
        'ContactName': 'Paula Parente',
        'CompanyName': 'Wellington Importadora',
        'Address': 'Rua do Mercado, 12',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'WHITC',
        'ContactName': 'Karl Jablonski',
        'CompanyName': 'White Clover Markets',
        'Address': '305 - 14th Ave. S. Suite 3B',
        'Country': 'USA'
    },
    {
        'CustomerID': 'WILMK',
        'ContactName': 'Matti Karttunen',
        'CompanyName': 'Wilman Kala',
        'Address': 'Keskuskatu 45',
        'Country': 'Finland'
    },
    {
        'CustomerID': 'WOLZA',
        'ContactName': 'Zbyszek Piestrzeniewicz',
        'CompanyName': 'Wolski  Zajazd',
        'Address': 'ul. Filtrowa 68',
        'Country': 'Poland'
    }
];

Use filter bar template in foreign key column

You can use the filter bar template in a foreign key column in Grid by defining the filterBarTemplate property. This allows you to customize the filter bar for the foreign key column with a custom component or HTML template. Here’s an example that demonstrates how to use a filter bar template in a foreign key column:

In this example, the “EmployeeID” column is a foreign key column, and the filter function is used as the filter bar template for this column. The filter function can be defined in your component code and should return the desired component or HTML template for the filter bar. The column header shows the custom filter bar template and you can select filter value by using the DropDown options.

import { createElement } from '@syncfusion/ej2-base';
import { DataManager } from '@syncfusion/ej2-data';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Filter, ForeignKey } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
    let grid;
    const filterBarTemplate = {
        create: (args) => {
            return createElement('input', { className: 'flm-input' });
        },
        write: (args) => {
            employeeData.splice(0, 0, { 'FirstName': 'All' }); // for clear filtering
            const dropInstance = new DropDownList({
                change: (arg) => {
                    if (grid) {
                        if (arg.value !== 'All') {
                            grid.filterByColumn('EmployeeID', 'equal', arg.value);
                        }
                        else {
                            grid.removeFilteredColsByField('EmployeeID');
                        }
                    }
                },
                dataSource: new DataManager(employeeData),
                fields: { text: 'FirstName' },
                index: 0,
                placeholder: 'Select a value',
                popupHeight: '200px'
            });
            dropInstance.appendTo(args.element);
        }
    };
    return <GridComponent dataSource={data} height={280} allowFiltering={true} ref={g => grid = g}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right"/>
      <ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID' dataSource={employeeData} headerText='Employee Name' width='150' filterBarTemplate={filterBarTemplate}/>
      <ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2'/>
      <ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
    </ColumnsDirective>
    <Inject services={[ForeignKey, Filter]}/>
  </GridComponent>;
}
;
export default App;
import { createElement } from '@syncfusion/ej2-base';
import { DataManager } from '@syncfusion/ej2-data';
import { ChangeEventArgs, DropDownList } from '@syncfusion/ej2-dropdowns';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Column, Filter, ForeignKey, Grid } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';

function App() {
  let grid: Grid | null;
  const filterBarTemplate = {
    create: (args: { element: Element, column: Column }) => {
      return createElement('input', { className: 'flm-input' });
    },
    write: (args: { element: Element, column: Column }) => {
      employeeData.splice(0, 0, { 'FirstName': 'All' }); // for clear filtering
      const dropInstance: DropDownList = new DropDownList({
        change: (arg: ChangeEventArgs) => {
          if (grid) {
            if (arg.value !== 'All') {
              grid.filterByColumn('EmployeeID', 'equal', arg.value);
            }
            else {
              grid.removeFilteredColsByField('EmployeeID');
            }
          }
        },
        dataSource: new DataManager(employeeData),
        fields: { text: 'FirstName' },
        index: 0,
        placeholder: 'Select a value',
        popupHeight: '200px'
      });
      dropInstance.appendTo(args.element as HTMLElement);
    }
  };
  return <GridComponent dataSource={data} height={280} allowFiltering={true} ref={g => grid = g}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
      <ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID'
        dataSource={employeeData} headerText='Employee Name' width='150' filterBarTemplate={filterBarTemplate} />
      <ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2' />
      <ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
    </ColumnsDirective>
    <Inject services={[ForeignKey, Filter]} />
  </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
    },
    {
        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 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
    },
    {
        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 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'
}];

Perform aggregation in foreign key column

By default, aggregations are not supported in a foreign key column in the Syncfusion Grid. However, you can achieve aggregation for a foreign key column by using customAggregate.

To perform aggregation in a foreign key column, follow these steps:

1.Define a foreign key column in the Grid.
2.Implement a custom aggregate function to calculate the aggregation for the foreign key column.
3.Set the customAggregate property of the column to the custom aggregate function.

Here’s an example that demonstrates how to perform aggregation in a foreign key column:

In the provided example, the customAggregateFn function is used to filter the data based on the FirstName field of the foreign key column, using the getForeignData internal function. The function then counts the occurrences of Margaret. The result is displayed in the grid’s footer template using the template with the #footerTemplate reference.

import { getValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Aggregate, ForeignKey, getForeignData } from '@syncfusion/ej2-react-grids';
import { AggregateColumnDirective, AggregateColumnsDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
    let grid;
    const custom = (props) => {
        return (<span>Count of Margaret: {props.Custom}</span>);
    };
    // Custom Aggregate function for foreign column
    const customAggregateFn = (args, column) => {
        const proxy = grid;
        return args.result.filter((dObj) => {
            return getValue('FirstName', getForeignData(proxy.getColumnByField(column.field), dObj)[0]) === 'Margaret';
        }).length;
    };
    return <GridComponent dataSource={data} height={280} ref={g => grid = g}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign='Right'/>
      <ColumnDirective field='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>
    <AggregatesDirective>
      <AggregateDirective>
        <AggregateColumnsDirective>
          <AggregateColumnDirective field='EmployeeID' type='Custom' customAggregate={customAggregateFn} footerTemplate={custom}/>
        </AggregateColumnsDirective>
      </AggregateDirective>
    </AggregatesDirective>
    <Inject services={[ForeignKey, Aggregate]}/>
  </GridComponent>;
}
;
export default App;
import { getValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Aggregate, Column, ForeignKey, getForeignData, Grid } from '@syncfusion/ej2-react-grids';
import { AggregateColumnDirective, AggregateColumnsDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';

function App() {
  let grid: Grid | null;
  const custom = (props: any): any => {
    return (<span>Count of Margaret: {props.Custom}</span>)
  }
  // Custom Aggregate function for foreign column
  const customAggregateFn = (args: any, column: Column) => {
    const proxy: Grid = grid as Grid;
    return args.result.filter((dObj: object) => {
      return getValue('FirstName',
        getForeignData(proxy.getColumnByField(column.field), dObj)[0]) === 'Margaret';
    }).length;
  };
  return <GridComponent dataSource={data} height={280} ref={g => grid = g}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign='Right' />
      <ColumnDirective field='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>
    <AggregatesDirective>
      <AggregateDirective>
        <AggregateColumnsDirective>
          <AggregateColumnDirective field='EmployeeID' type='Custom'
            customAggregate={customAggregateFn} footerTemplate={custom} />
        </AggregateColumnsDirective>
      </AggregateDirective>
    </AggregatesDirective>
    <Inject services={[ForeignKey, Aggregate]} />
  </GridComponent>
};
export default App;
export let data = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0,
        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
    },
    {
        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 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
    },
    {
        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 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'
}];

Enable multiple foreign key columns

The Syncfusion Grid component supports the feature of enabling multiple foreign key columns with editing options. This allows users to display columns from foreign data sources in the Grid component.

In the following example, Customer Name and Ship City are foreign key columns that display the ContactName and City columns from foreign data.

import { ColumnDirective, ColumnsDirective, ForeignKey, GridComponent } from '@syncfusion/ej2-react-grids';
import { Edit, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { orderDetails, employeeData, customerData } from './datasource';
function App() {
    const editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true };
    const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    const validationRules = { required: true };
    return <GridComponent dataSource={orderDetails} editSettings={editOptions} toolbar={toolbarOptions} height={315}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='100' isPrimaryKey={true} textAlign="Right"/>
      <ColumnDirective field='CustomerID' foreignKeyValue='ContactName' foreignKeyField='CustomerID' dataSource={customerData} headerText='Customer Name' width='150' validationRules={validationRules}/>
      <ColumnDirective field='Freight' headerText='Freight' width='120' editType='numericedit' textAlign="Right" format='C2'/>
      <ColumnDirective field='EmployeeID' foreignKeyValue='City' foreignKeyField='EmployeeID' dataSource={employeeData} headerText='Ship City' width='140' validationRules={validationRules}/>
      <ColumnDirective field='ShipCountry' headerText='Ship Country' editType='dropdownedit' width='150'/>
    </ColumnsDirective>
    <Inject services={[ForeignKey, Edit, Toolbar]}/>
  </GridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, ForeignKey, GridComponent } from '@syncfusion/ej2-react-grids';
import { Edit, EditSettingsModel, Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { orderDetails, employeeData, customerData } from './datasource';

function App() {
  const editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true };
  const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
  const validationRules = { required: true };
  return <GridComponent dataSource={orderDetails} editSettings={editOptions} toolbar={toolbarOptions} height={315}>
    <ColumnsDirective>
      <ColumnDirective field='OrderID' headerText='Order ID' width='100' isPrimaryKey={true} textAlign="Right" />
      <ColumnDirective field='CustomerID' foreignKeyValue='ContactName' foreignKeyField='CustomerID' dataSource={customerData} headerText='Customer Name' width='150' validationRules={validationRules} />
      <ColumnDirective field='Freight' headerText='Freight' width='120' editType='numericedit' textAlign="Right" format='C2' />
      <ColumnDirective field='EmployeeID' foreignKeyValue='City' foreignKeyField='EmployeeID' dataSource={employeeData} headerText='Ship City' width='140' validationRules={validationRules} />
      <ColumnDirective field='ShipCountry' headerText='Ship Country' editType='dropdownedit' width='150' />
    </ColumnsDirective>
    <Inject services={[ForeignKey, Edit, Toolbar]} />
  </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
    },
    {
        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 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'
    }];
var order = JSON.stringify([
    {
        'OrderID': 10248,
        'CustomerID': 'VINET',
        'CustomerName': 'Maria ',
        'OrderDate': '1996-07-04T00:00:00.000Z',
        'ShippedDate': '1996-07-16T00:00:00.000Z',
        'Freight': 32.38,
        'ShipName': 'Vins et alcools Chevalier',
        'ShipAddress': '59 rue de l Abbaye',
        'ShipCity': 'Reims',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 3
    },
    {
        'OrderID': 10249,
        'CustomerID': 'TOMSP',
        'CustomerName': 'Ana Trujillo',
        'OrderDate': '1996-07-05T00:00:00.000Z',
        'ShippedDate': '1996-07-10T00:00:00.000Z',
        'Freight': 11.61,
        'ShipName': 'Toms Spezialitäten',
        'ShipAddress': 'Luisenstr. 48',
        'ShipCity': 'Münster',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 5
    },
    {
        'OrderID': 10250,
        'CustomerID': 'HANAR',
        'CustomerName': 'Antonio Moreno',
        'OrderDate': '1996-07-08T00:00:00.000Z',
        'ShippedDate': '1996-07-12T00:00:00.000Z',
        'Freight': 65.83,
        'ShipName': 'Hanari Carnes',
        'ShipAddress': 'Rua do Paço, 67',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 1
    },
    {
        'OrderID': 10251,
        'CustomerID': 'VICTE',
        'CustomerName': 'Thomas Hardy',
        'OrderDate': '1996-07-08T00:00:00.000Z',
        'ShippedDate': '1996-07-15T00:00:00.000Z',
        'Freight': 41.34,
        'ShipName': 'Victuailles en stock',
        'ShipAddress': '2, rue du Commerce',
        'ShipCity': 'Lyon',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 6
    },
    {
        'OrderID': 10252,
        'CustomerID': 'SUPRD',
        'CustomerName': 'Christina Berglund',
        'OrderDate': '1996-07-09T00:00:00.000Z',
        'ShippedDate': '1996-07-11T00:00:00.000Z',
        'Freight': 51.3,
        'ShipName': 'Suprêmes délices',
        'ShipAddress': 'Boulevard Tirou, 255',
        'ShipCity': 'Charleroi',
        'ShipRegion': null,
        'ShipCountry': 'Belgium',
        'EmployeeID': 2
    },
    {
        'OrderID': 10253,
        'CustomerID': 'HANAR',
        'CustomerName': 'Hanna Moos',
        'OrderDate': '1996-07-10T00:00:00.000Z',
        'ShippedDate': '1996-07-16T00:00:00.000Z',
        'Freight': 58.17,
        'ShipName': 'Hanari Carnes',
        'ShipAddress': 'Rua do Paço, 67',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 4
    },
    {
        'OrderID': 10254,
        'CustomerID': 'CHOPS',
        'CustomerName': 'Frédérique Citeaux',
        'OrderDate': '1996-07-11T00:00:00.000Z',
        'ShippedDate': '1996-07-23T00:00:00.000Z',
        'Freight': 22.98,
        'ShipName': 'Chop-suey Chinese',
        'ShipAddress': 'Hauptstr. 31',
        'ShipCity': 'Bern',
        'ShipRegion': null,
        'ShipCountry': 'Switzerland',
        'EmployeeID': 9
    },
    {
        'OrderID': 10255,
        'CustomerID': 'RICSU',
        'CustomerName': 'Martín Sommer',
        'OrderDate': '1996-07-12T00:00:00.000Z',
        'ShippedDate': '1996-07-15T00:00:00.000Z',
        'Freight': 148.33,
        'ShipName': 'Richter Supermarkt',
        'ShipAddress': 'Starenweg 5',
        'ShipCity': 'Genève',
        'ShipRegion': null,
        'ShipCountry': 'Switzerland',
        'EmployeeID': 7
    },
    {
        'OrderID': 10256,
        'CustomerID': 'WELLI',
        'CustomerName': 'Laurence Lebihan',
        'OrderDate': '1996-07-15T00:00:00.000Z',
        'ShippedDate': '1996-07-17T00:00:00.000Z',
        'Freight': 13.97,
        'ShipName': 'Wellington Importadora',
        'ShipAddress': 'Rua do Mercado, 12',
        'ShipCity': 'Resende',
        'ShipRegion': 'SP',
        'ShipCountry': 'Brazil',
        'EmployeeID': 8
    },
    {
        'OrderID': 10257,
        'CustomerID': 'HILAA',
        'CustomerName': 'Elizabeth Lincoln',
        'OrderDate': '1996-07-16T00:00:00.000Z',
        'ShippedDate': '1996-07-22T00:00:00.000Z',
        'Freight': 81.91,
        'ShipName': 'HILARION-Abastos',
        'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
        'ShipCity': 'San Cristóbal',
        'ShipRegion': 'Táchira',
        'ShipCountry': 'Venezuela',
        'EmployeeID': 5
    },
    {
        'OrderID': 10258,
        'CustomerID': 'ERNSH',
        'CustomerName': 'Victoria Ashworth',
        'OrderDate': '1996-07-17T00:00:00.000Z',
        'ShippedDate': '1996-07-23T00:00:00.000Z',
        'Freight': 140.51,
        'ShipName': 'Ernst Handel',
        'ShipAddress': 'Kirchgasse 6',
        'ShipCity': 'Graz',
        'ShipRegion': null,
        'ShipCountry': 'Austria',
        'EmployeeID': 1
    },
    {
        'OrderID': 10259,
        'CustomerID': 'CENTC',
        'CustomerName': 'Patricio Simpson',
        'OrderDate': '1996-07-18T00:00:00.000Z',
        'ShippedDate': '1996-07-25T00:00:00.000Z',
        'Freight': 3.25,
        'ShipName': 'Centro comercial Moctezuma',
        'ShipAddress': 'Sierras de Granada 9993',
        'ShipCity': 'México D.F.',
        'ShipRegion': null,
        'ShipCountry': 'Mexico',
        'EmployeeID': 6
    },
    {
        'OrderID': 10260,
        'CustomerID': 'OTTIK',
        'CustomerName': 'Francisco Chang',
        'OrderDate': '1996-07-19T00:00:00.000Z',
        'ShippedDate': '1996-07-29T00:00:00.000Z',
        'Freight': 55.09,
        'ShipName': 'Ottilies Käseladen',
        'ShipAddress': 'Mehrheimerstr. 369',
        'ShipCity': 'Köln',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 2
    },
    {
        'OrderID': 10261,
        'CustomerID': 'QUEDE',
        'CustomerName': 'Yang Wang',
        'OrderDate': '1996-07-19T00:00:00.000Z',
        'ShippedDate': '1996-07-30T00:00:00.000Z',
        'Freight': 3.05,
        'ShipName': 'Que Delícia',
        'ShipAddress': 'Rua da Panificadora, 12',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 7
    },
    {
        'OrderID': 10262,
        'CustomerID': 'RATTC',
        'CustomerName': 'Pedro Afonso',
        'OrderDate': '1996-07-22T00:00:00.000Z',
        'ShippedDate': '1996-07-25T00:00:00.000Z',
        'Freight': 48.29,
        'ShipName': 'Rattlesnake Canyon Grocery',
        'ShipAddress': '2817 Milton Dr.',
        'ShipCity': 'Albuquerque',
        'ShipRegion': 'NM',
        'ShipCountry': 'USA',
        'EmployeeID': 4
    },
    {
        'OrderID': 10263,
        'CustomerID': 'ERNSH',
        'CustomerName': 'Elizabeth Brown',
        'OrderDate': '1996-07-23T00:00:00.000Z',
        'ShippedDate': '1996-07-31T00:00:00.000Z',
        'Freight': 146.06,
        'ShipName': 'Ernst Handel',
        'ShipAddress': 'Kirchgasse 6',
        'ShipCity': 'Graz',
        'ShipRegion': null,
        'ShipCountry': 'Austria',
        'EmployeeID': 3
    },
    {
        'OrderID': 10264,
        'CustomerID': 'FOLKO',
        'CustomerName': 'Sven Ottlieb',
        'OrderDate': '1996-07-24T00:00:00.000Z',
        'ShippedDate': '1996-08-23T00:00:00.000Z',
        'Freight': 3.67,
        'ShipName': 'Folk och fä HB',
        'ShipAddress': 'Åkergatan 24',
        'ShipCity': 'Bräcke',
        'ShipRegion': null,
        'ShipCountry': 'Sweden',
        'EmployeeID': 8
    },
    {
        'OrderID': 10265,
        'CustomerID': 'BLONP',
        'CustomerName': 'Ann Devon',
        'OrderDate': '1996-07-25T00:00:00.000Z',
        'ShippedDate': '1996-08-12T00:00:00.000Z',
        'Freight': 55.28,
        'ShipName': 'Blondel père et fils',
        'ShipAddress': '24, place Kléber',
        'ShipCity': 'Strasbourg',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 3
    },
    {
        'OrderID': 10266,
        'CustomerID': 'WARTH',
        'CustomerName': 'Roland Mendel',
        'OrderDate': '1996-07-26T00:00:00.000Z',
        'ShippedDate': '1996-07-31T00:00:00.000Z',
        'Freight': 25.73,
        'ShipName': 'Wartian Herkku',
        'ShipAddress': 'Torikatu 38',
        'ShipCity': 'Oulu',
        'ShipRegion': null,
        'ShipCountry': 'Finland',
        'EmployeeID': 2
    },
    {
        'OrderID': 10267,
        'CustomerID': 'FRANK',
        'CustomerName': 'Aria Cruz',
        'OrderDate': '1996-07-29T00:00:00.000Z',
        'ShippedDate': '1996-08-06T00:00:00.000Z',
        'Freight': 208.58,
        'ShipName': 'Frankenversand',
        'ShipAddress': 'Berliner Platz 43',
        'ShipCity': 'München',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 4
    },
    {
        'OrderID': 10268,
        'CustomerID': 'GROSR',
        'CustomerName': 'Diego Roel',
        'OrderDate': '1996-07-30T00:00:00.000Z',
        'ShippedDate': '1996-08-02T00:00:00.000Z',
        'Freight': 66.29,
        'ShipName': 'GROSELLA-Restaurante',
        'ShipAddress': '5ª Ave. Los Palos Grandes',
        'ShipCity': 'Caracas',
        'ShipRegion': 'DF',
        'ShipCountry': 'Venezuela',
        'EmployeeID': 2
    },
    {
        'OrderID': 10269,
        'CustomerID': 'WHITC',
        'CustomerName': 'Martine Rancé',
        'OrderDate': '1996-07-31T00:00:00.000Z',
        'ShippedDate': '1996-08-09T00:00:00.000Z',
        'Freight': 4.56,
        'ShipName': 'White Clover Markets',
        'ShipAddress': '1029 - 12th Ave. S.',
        'ShipCity': 'Seattle',
        'ShipRegion': 'WA',
        'ShipCountry': 'USA',
        'EmployeeID': 1
    },
    {
        'OrderID': 10270,
        'CustomerID': 'WARTH',
        'CustomerName': 'Maria Larsson',
        'OrderDate': '1996-08-01T00:00:00.000Z',
        'ShippedDate': '1996-08-02T00:00:00.000Z',
        'Freight': 136.54,
        'ShipName': 'Wartian Herkku',
        'ShipAddress': 'Torikatu 38',
        'ShipCity': 'Oulu',
        'ShipRegion': null,
        'ShipCountry': 'Finland',
        'EmployeeID': 4
    },
    {
        'OrderID': 10271,
        'CustomerID': 'SPLIR',
        'CustomerName': 'Peter Franken',
        'OrderDate': '1996-08-01T00:00:00.000Z',
        'ShippedDate': '1996-08-30T00:00:00.000Z',
        'Freight': 4.54,
        'ShipName': 'Split Rail Beer & Ale',
        'ShipAddress': 'P.O. Box 555',
        'ShipCity': 'Lander',
        'ShipRegion': 'WY',
        'ShipCountry': 'USA',
        'EmployeeID': 5
    },
    {
        'OrderID': 10272,
        'CustomerID': 'RATTC',
        'CustomerName': 'Carine Schmitt',
        'OrderDate': '1996-08-02T00:00:00.000Z',
        'ShippedDate': '1996-08-06T00:00:00.000Z',
        'Freight': 98.03,
        'ShipName': 'Rattlesnake Canyon Grocery',
        'ShipAddress': '2817 Milton Dr.',
        'ShipCity': 'Albuquerque',
        'ShipRegion': 'NM',
        'ShipCountry': 'USA',
        'EmployeeID': 3
    },
    {
        'OrderID': 10273,
        'CustomerID': 'QUICK',
        'CustomerName': 'Paolo Accorti',
        'OrderDate': '1996-08-05T00:00:00.000Z',
        'ShippedDate': '1996-08-12T00:00:00.000Z',
        'Freight': 76.07,
        'ShipName': 'QUICK-Stop',
        'ShipAddress': 'Taucherstraße 10',
        'ShipCity': 'Cunewalde',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 6
    },
    {
        'OrderID': 10274,
        'CustomerID': 'VINET',
        'CustomerName': 'Lino Rodriguez',
        'OrderDate': '1996-08-06T00:00:00.000Z',
        'ShippedDate': '1996-08-16T00:00:00.000Z',
        'Freight': 6.01,
        'ShipName': 'Vins et alcools Chevalier',
        'ShipAddress': '59 rue de l Abbaye',
        'ShipCity': 'Reims',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 1
    },
    {
        'OrderID': 10275,
        'CustomerID': 'MAGAA',
        'CustomerName': 'Eduardo Saavedra',
        'OrderDate': '1996-08-07T00:00:00.000Z',
        'ShippedDate': '1996-08-09T00:00:00.000Z',
        'Freight': 26.93,
        'ShipName': 'Magazzini Alimentari Riuniti',
        'ShipAddress': 'Via Ludovico il Moro 22',
        'ShipCity': 'Bergamo',
        'ShipRegion': null,
        'ShipCountry': 'Italy',
        'EmployeeID': 3
    },
    {
        'OrderID': 10276,
        'CustomerID': 'TORTU',
        'CustomerName': 'José Pedro Freyre',
        'OrderDate': '1996-08-08T00:00:00.000Z',
        'ShippedDate': '1996-08-14T00:00:00.000Z',
        'Freight': 13.84,
        'ShipName': 'Tortuga Restaurante',
        'ShipAddress': 'Avda. Azteca 123',
        'ShipCity': 'México D.F.',
        'ShipRegion': null,
        'ShipCountry': 'Mexico',
        'EmployeeID': 5
    },
    {
        'OrderID': 10277,
        'CustomerID': 'MORGK',
        'CustomerName': 'André Fonseca',
        'OrderDate': '1996-08-09T00:00:00.000Z',
        'ShippedDate': '1996-08-13T00:00:00.000Z',
        'Freight': 125.77,
        'ShipName': 'Morgenstern Gesundkost',
        'ShipAddress': 'Heerstr. 22',
        'ShipCity': 'Leipzig',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 7
    },
    {
        'OrderID': 10278,
        'CustomerID': 'BERGS',
        'CustomerName': 'Howard Snyder',
        'OrderDate': '1996-08-12T00:00:00.000Z',
        'ShippedDate': '1996-08-16T00:00:00.000Z',
        'Freight': 92.69,
        'ShipName': 'Berglunds snabbköp',
        'ShipAddress': 'Berguvsvägen  8',
        'ShipCity': 'Luleå',
        'ShipRegion': null,
        'ShipCountry': 'Sweden',
        'EmployeeID': 9
    },
    {
        'OrderID': 10279,
        'CustomerID': 'LEHMS',
        'CustomerName': 'Manuel Pereira',
        'OrderDate': '1996-08-13T00:00:00.000Z',
        'ShippedDate': '1996-08-16T00:00:00.000Z',
        'Freight': 25.83,
        'ShipName': 'Lehmanns Marktstand',
        'ShipAddress': 'Magazinweg 7',
        'ShipCity': 'Frankfurt a.M.',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 2
    },
    {
        'OrderID': 10280,
        'CustomerID': 'BERGS',
        'CustomerName': 'Mario Pontes',
        'OrderDate': '1996-08-14T00:00:00.000Z',
        'ShippedDate': '1996-09-12T00:00:00.000Z',
        'Freight': 8.98,
        'ShipName': 'Berglunds snabbköp',
        'ShipAddress': 'Berguvsvägen  8',
        'ShipCity': 'Luleå',
        'ShipRegion': null,
        'ShipCountry': 'Sweden',
        'EmployeeID': 4
    },
    {
        'OrderID': 10281,
        'CustomerID': 'ROMEY',
        'CustomerName': 'Carlos Hernández',
        'OrderDate': '1996-08-14T00:00:00.000Z',
        'ShippedDate': '1996-08-21T00:00:00.000Z',
        'Freight': 2.94,
        'ShipName': 'Romero y tomillo',
        'ShipAddress': 'Gran Vía, 1',
        'ShipCity': 'Madrid',
        'ShipRegion': null,
        'ShipCountry': 'Spain',
        'EmployeeID': 6
    },
    {
        'OrderID': 10282,
        'CustomerID': 'ROMEY',
        'CustomerName': 'Yoshi Latimer',
        'OrderDate': '1996-08-15T00:00:00.000Z',
        'ShippedDate': '1996-08-21T00:00:00.000Z',
        'Freight': 12.69,
        'ShipName': 'Romero y tomillo',
        'ShipAddress': 'Gran Vía, 1',
        'ShipCity': 'Madrid',
        'ShipRegion': null,
        'ShipCountry': 'Spain',
        'EmployeeID': 8
    },
    {
        'OrderID': 10283,
        'CustomerID': 'LILAS',
        'CustomerName': 'Patricia McKenna',
        'OrderDate': '1996-08-16T00:00:00.000Z',
        'ShippedDate': '1996-08-23T00:00:00.000Z',
        'Freight': 84.81,
        'ShipName': 'LILA-Supermercado',
        'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
        'ShipCity': 'Barquisimeto',
        'ShipRegion': 'Lara',
        'ShipCountry': 'Venezuela',
        'EmployeeID': 9
    },
    {
        'OrderID': 10284,
        'CustomerID': 'LEHMS',
        'CustomerName': 'Helen Bennett',
        'OrderDate': '1996-08-19T00:00:00.000Z',
        'ShippedDate': '1996-08-27T00:00:00.000Z',
        'Freight': 76.56,
        'ShipName': 'Lehmanns Marktstand',
        'ShipAddress': 'Magazinweg 7',
        'ShipCity': 'Frankfurt a.M.',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 6
    },
    {
        'OrderID': 10285,
        'CustomerID': 'QUICK',
        'CustomerName': 'Philip Cramer',
        'OrderDate': '1996-08-20T00:00:00.000Z',
        'ShippedDate': '1996-08-26T00:00:00.000Z',
        'Freight': 76.83,
        'ShipName': 'QUICK-Stop',
        'ShipAddress': 'Taucherstraße 10',
        'ShipCity': 'Cunewalde',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 3
    },
    {
        'OrderID': 10286,
        'CustomerID': 'QUICK',
        'CustomerName': 'Daniel Tonini',
        'OrderDate': '1996-08-21T00:00:00.000Z',
        'ShippedDate': '1996-08-30T00:00:00.000Z',
        'Freight': 229.24,
        'ShipName': 'QUICK-Stop',
        'ShipAddress': 'Taucherstraße 10',
        'ShipCity': 'Cunewalde',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 1
    },
    {
        'OrderID': 10287,
        'CustomerID': 'RICAR',
        'CustomerName': 'Annette Roulet',
        'OrderDate': '1996-08-22T00:00:00.000Z',
        'ShippedDate': '1996-08-28T00:00:00.000Z',
        'Freight': 12.76,
        'ShipName': 'Ricardo Adocicados',
        'ShipAddress': 'Av. Copacabana, 267',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 8
    },
    {
        'OrderID': 10288,
        'CustomerID': 'REGGC',
        'CustomerName': 'Yoshi Tannamuri',
        'OrderDate': '1996-08-23T00:00:00.000Z',
        'ShippedDate': '1996-09-03T00:00:00.000Z',
        'Freight': 7.45,
        'ShipName': 'Reggiani Caseifici',
        'ShipAddress': 'Strada Provinciale 124',
        'ShipCity': 'Reggio Emilia',
        'ShipRegion': null,
        'ShipCountry': 'Italy',
        'EmployeeID': 4
    },
    {
        'OrderID': 10289,
        'CustomerID': 'BSBEV',
        'CustomerName': 'John Steel',
        'OrderDate': '1996-08-26T00:00:00.000Z',
        'ShippedDate': '1996-08-28T00:00:00.000Z',
        'Freight': 22.77,
        'ShipName': 'B s Beverages',
        'ShipAddress': 'Fauntleroy Circus',
        'ShipCity': 'London',
        'ShipRegion': null,
        'ShipCountry': 'UK',
        'EmployeeID': 2
    },
    {
        'OrderID': 10290,
        'CustomerID': 'COMMI',
        'CustomerNames': 'Renate Messner',
        'OrderDate': '1996-08-27T00:00:00.000Z',
        'ShippedDate': '1996-09-03T00:00:00.000Z',
        'Freight': 79.7,
        'ShipName': 'Comércio Mineiro',
        'ShipAddress': 'Av. dos Lusíadas, 23',
        'ShipCity': 'Sao Paulo',
        'ShipRegion': 'SP',
        'ShipCountry': 'Brazil',
        'EmployeeID': 5
    },
    {
        'OrderID': 10291,
        'CustomerID': 'QUEDE',
        'CustomerName': 'Jaime Yorres',
        'OrderDate': '1996-08-27T00:00:00.000Z',
        'ShippedDate': '1996-09-04T00:00:00.000Z',
        'Freight': 6.4,
        'ShipName': 'Que Delícia',
        'ShipAddress': 'Rua da Panificadora, 12',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 7
    },
    {
        'OrderID': 10292,
        'CustomerID': 'TRADH',
        'CustomerName': 'Carlos González',
        'OrderDate': '1996-08-28T00:00:00.000Z',
        'ShippedDate': '1996-09-02T00:00:00.000Z',
        'Freight': 1.35,
        'ShipName': 'Tradiçao Hipermercados',
        'ShipAddress': 'Av. Inês de Castro, 414',
        'ShipCity': 'Sao Paulo',
        'ShipRegion': 'SP',
        'ShipCountry': 'Brazil',
        'EmployeeID': 3
    },
    {
        'OrderID': 10293,
        'CustomerID': 'TORTU',
        'CustomerName': 'Felipe Izquierdo',
        'OrderDate': '1996-08-29T00:00:00.000Z',
        'ShippedDate': '1996-09-11T00:00:00.000Z',
        'Freight': 21.18,
        'ShipName': 'Tortuga Restaurante',
        'ShipAddress': 'Avda. Azteca 123',
        'ShipCity': 'México D.F.',
        'ShipRegion': null,
        'ShipCountry': 'Mexico',
        'EmployeeID': 1
    },
    {
        'OrderID': 10294,
        'CustomerID': 'RATTC',
        'CustomerName': 'Fran Wilson',
        'OrderDate': '1996-08-30T00:00:00.000Z',
        'ShippedDate': '1996-09-05T00:00:00.000Z',
        'Freight': 147.26,
        'ShipName': 'Rattlesnake Canyon Grocery',
        'ShipAddress': '2817 Milton Dr.',
        'ShipCity': 'Albuquerque',
        'ShipRegion': 'NM',
        'ShipCountry': 'USA',
        'EmployeeID': 2
    },
    {
        'OrderID': 10295,
        'CustomerID': 'VINET',
        'CustomerName': 'Giovanni Rovelli',
        'OrderDate': '1996-09-02T00:00:00.000Z',
        'ShippedDate': '1996-09-10T00:00:00.000Z',
        'Freight': 1.15,
        'ShipName': 'Vins et alcools Chevalier',
        'ShipAddress': '59 rue de l Abbaye',
        'ShipCity': 'Reims',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 3
    },
    {
        'OrderID': 10296,
        'CustomerID': 'LILAS',
        'CustomerName': 'Catherine Dewey',
        'OrderDate': '1996-09-03T00:00:00.000Z',
        'ShippedDate': '1996-09-11T00:00:00.000Z',
        'Freight': 0.12,
        'ShipName': 'LILA-Supermercado',
        'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
        'ShipCity': 'Barquisimeto',
        'ShipRegion': 'Lara',
        'ShipCountry': 'Venezuela',
        'EmployeeID': 4
    },
    {
        'OrderID': 10297,
        'CustomerID': 'BLONP',
        'CustomerName': 'Jean Fresnière',
        'OrderDate': '1996-09-04T00:00:00.000Z',
        'ShippedDate': '1996-09-10T00:00:00.000Z',
        'Freight': 5.74,
        'ShipName': 'Blondel père et fils',
        'ShipAddress': '24, place Kléber',
        'ShipCity': 'Strasbourg',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 5
    },
    {
        'OrderID': 10298,
        'CustomerID': 'HUNGO',
        'CustomerName': 'Alexander Feuer',
        'OrderDate': '1996-09-05T00:00:00.000Z',
        'ShippedDate': '1996-09-11T00:00:00.000Z',
        'Freight': 168.22,
        'ShipName': 'Hungry Owl All-Night Grocers',
        'ShipAddress': '8 Johnstown Road',
        'ShipCity': 'Cork',
        'ShipRegion': 'Co. Cork',
        'ShipCountry': 'Ireland',
        'EmployeeID': 6
    },
    {
        'OrderID': 10299,
        'CustomerID': 'RICAR',
        'CustomerName': 'Simon Crowther',
        'OrderDate': '1996-09-06T00:00:00.000Z',
        'ShippedDate': '1996-09-13T00:00:00.000Z',
        'Freight': 29.76,
        'ShipName': 'Ricardo Adocicados',
        'ShipAddress': 'Av. Copacabana, 267',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 7
    },
    {
        'OrderID': 10300,
        'CustomerID': 'MAGAA',
        'CustomerNames': 'Yvonne Moncada',
        'OrderDate': '1996-09-09T00:00:00.000Z',
        'ShippedDate': '1996-09-18T00:00:00.000Z',
        'Freight': 17.68,
        'ShipName': 'Magazzini Alimentari Riuniti',
        'ShipAddress': 'Via Ludovico il Moro 22',
        'ShipCity': 'Bergamo',
        'ShipRegion': null,
        'ShipCountry': 'Italy',
        'EmployeeID': 8
    },
    {
        'OrderID': 10301,
        'CustomerID': 'WANDK',
        'CustomerName': 'Rene Phillips',
        'OrderDate': '1996-09-09T00:00:00.000Z',
        'ShippedDate': '1996-09-17T00:00:00.000Z',
        'Freight': 45.08,
        'ShipName': 'Die Wandernde Kuh',
        'ShipAddress': 'Adenauerallee 900',
        'ShipCity': 'Stuttgart',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 9
    },
    {
        'OrderID': 10302,
        'CustomerID': 'SUPRD',
        'CustomerName': 'Pirkko Koskitalo',
        'OrderDate': '1996-09-10T00:00:00.000Z',
        'ShippedDate': '1996-10-09T00:00:00.000Z',
        'Freight': 6.27,
        'ShipName': 'Suprêmes délices',
        'ShipAddress': 'Boulevard Tirou, 255',
        'ShipCity': 'Charleroi',
        'ShipRegion': null,
        'ShipCountry': 'Belgium',
        'EmployeeID': 2
    },
    {
        'OrderID': 10303,
        'CustomerID': 'GODOS',
        'CustomerName': 'Paula Parente',
        'OrderDate': '1996-09-11T00:00:00.000Z',
        'ShippedDate': '1996-09-18T00:00:00.000Z',
        'Freight': 107.83,
        'ShipName': 'Godos Cocina Típica',
        'ShipAddress': 'C/ Romero, 33',
        'ShipCity': 'Sevilla',
        'ShipRegion': null,
        'ShipCountry': 'Spain',
        'EmployeeID': 4
    },
    {
        'OrderID': 10304,
        'CustomerID': 'TORTU',
        'CustomerName': 'Karl Jablonski',
        'OrderDate': '1996-09-12T00:00:00.000Z',
        'ShippedDate': '1996-09-17T00:00:00.000Z',
        'Freight': 63.79,
        'ShipName': 'Tortuga Restaurante',
        'ShipAddress': 'Avda. Azteca 123',
        'ShipCity': 'México D.F.',
        'ShipRegion': null,
        'ShipCountry': 'Mexico',
        'EmployeeID': 8
    },
    {
        'OrderID': 10305,
        'CustomerID': 'OLDWO',
        'CustomerName': 'Matti Karttunen',
        'OrderDate': '1996-09-13T00:00:00.000Z',
        'ShippedDate': '1996-10-09T00:00:00.000Z',
        'Freight': 257.62,
        'ShipName': 'Old World Delicatessen',
        'ShipAddress': '2743 Bering St.',
        'ShipCity': 'Anchorage',
        'ShipRegion': 'AK',
        'ShipCountry': 'USA',
        'EmployeeID': 6
    },
    {
        'OrderID': 10306,
        'CustomerID': 'ROMEY',
        'CustomerName': 'Zbyszek Piestrzeniewicz',
        'OrderDate': '1996-09-16T00:00:00.000Z',
        'ShippedDate': '1996-09-23T00:00:00.000Z',
        'Freight': 7.56,
        'ShipName': 'Romero y tomillo',
        'ShipAddress': 'Gran Vía, 1',
        'ShipCity': 'Madrid',
        'ShipRegion': null,
        'ShipCountry': 'Spain',
        'EmployeeID': 3
    },
    {
        'OrderID': 10307,
        'CustomerID': 'LONEP',
        'CustomerName': 'Zbyszek Piestrzeniewicz',
        'OrderDate': '1996-09-17T00:00:00.000Z',
        'ShippedDate': '1996-09-25T00:00:00.000Z',
        'Freight': 0.56,
        'ShipName': 'Lonesome Pine Restaurant',
        'ShipAddress': '89 Chiaroscuro Rd.',
        'ShipCity': 'Portland',
        'ShipRegion': 'OR',
        'ShipCountry': 'USA',
        'EmployeeID': 1
    }
]);
export let orderDetails = JSON.parse(order, function (field, value) {
    var dupValue = value;
    if (typeof value === 'string' && /^(\d{4}\-\d\d\-\d\d([tT][\d:\.]*){1})([zZ]|([+\-])(\d\d):?(\d\d))?$/.test(value)) {
        var arr = dupValue.split(/[^0-9]/);
        value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5], 10));
    }
    return value;
});
export let customerData = [
    {
        'CustomerID': 'ALFKI',
        'ContactName': 'Maria ',
        'CompanyName': 'Alfreds Futterkiste',
        'Address': 'Obere Str. 57',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'ANATR',
        'ContactName': 'Ana Trujillo',
        'CompanyName': 'Ana Trujillo Emparedados y helados',
        'Address': 'Avda. de la Constitución 2222',
        'Country': 'Mexico'
    },
    {
        'CustomerID': 'ANTON',
        'ContactName': 'Antonio Moreno',
        'CompanyName': 'Antonio Moreno Taquería',
        'Address': 'Mataderos  2312',
        'Country': 'Mexico'
    },
    {
        'CustomerID': 'AROUT',
        'ContactName': 'Thomas Hardy',
        'CompanyName': 'Around the Horn',
        'Address': '120 Hanover Sq.',
        'Country': 'UK'
    },
    {
        'CustomerID': 'BERGS',
        'ContactName': 'Christina Berglund',
        'CompanyName': 'Berglunds snabbköp',
        'Address': 'Berguvsvägen  8',
        'Country': 'Sweden'
    },
    {
        'CustomerID': 'BLAUS',
        'ContactName': 'Hanna Moos',
        'CompanyName': 'Blauer See Delikatessen',
        'Address': 'Forsterstr. 57',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'BLONP',
        'ContactName': 'Frédérique Citeaux',
        'CompanyName': 'Blondesddsl père et fils',
        'Address': '24, place Kléber',
        'Country': 'France'
    },
    {
        'CustomerID': 'BOLID',
        'ContactName': 'Martín Sommer',
        'CompanyName': 'Bólido Comidas preparadas',
        'Address': 'C/ Araquil, 67',
        'Country': 'Spain'
    },
    {
        'CustomerID': 'BONAP',
        'ContactName': 'Laurence Lebihan',
        'CompanyName': 'Bon app',
        'Address': '12, rue des Bouchers',
        'Country': 'France'
    },
    {
        'CustomerID': 'BOTTM',
        'ContactName': 'Elizabeth Lincoln',
        'CompanyName': 'Bottom-Dollar Markets',
        'Address': '23 Tsawassen Blvd.',
        'Country': 'Canada'
    },
    {
        'CustomerID': 'BSBEV',
        'ContactName': 'Victoria Ashworth',
        'CompanyName': 'B\'s Beverages',
        'Address': 'Fauntleroy Circus',
        'Country': 'UK'
    },
    {
        'CustomerID': 'CACTU',
        'ContactName': 'Patricio Simpson',
        'CompanyName': 'Cactus Comidas para llevar',
        'Address': 'Cerrito 333',
        'Country': 'Argentina'
    },
    {
        'CustomerID': 'CENTC',
        'ContactName': 'Francisco Chang',
        'CompanyName': 'Centro comercial Moctezuma',
        'Address': 'Sierras de Granada 9993',
        'Country': 'Mexico'
    },
    {
        'CustomerID': 'CHOPS',
        'ContactName': 'Yang Wang',
        'CompanyName': 'Chop-suey Chinese',
        'Address': 'Hauptstr. 29',
        'Country': 'Switzerland'
    },
    {
        'CustomerID': 'COMMI',
        'ContactName': 'Pedro Afonso',
        'CompanyName': 'Comércio Mineiro',
        'Address': 'Av. dos Lusíadas, 23',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'CONSH',
        'ContactName': 'Elizabeth Brown',
        'CompanyName': 'Consolidated Holdings',
        'Address': 'Berkeley Gardens 12  Brewery',
        'Country': 'UK'
    },
    {
        'CustomerID': 'DRACD',
        'ContactName': 'Sven Ottlieb',
        'CompanyName': 'Drachenblut Delikatessen',
        'Address': 'Walserweg 21',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'DUMON',
        'ContactName': 'Janine Labrune',
        'CompanyName': 'Du monde entier',
        'Address': '67, rue des Cinquante Otages',
        'Country': 'France'
    },
    {
        'CustomerID': 'EASTC',
        'ContactName': 'Ann Devon',
        'CompanyName': 'Eastern Connection',
        'Address': '35 King George',
        'Country': 'UK'
    },
    {
        'CustomerID': 'ERNSH',
        'ContactName': 'Roland Mendel',
        'CompanyName': 'Ernst Handel',
        'Address': 'Kirchgasse 6',
        'Country': 'Austria'
    },
    {
        'CustomerID': 'FAMIA',
        'ContactName': 'Aria Cruz',
        'CompanyName': 'Familia Arquibaldo',
        'Address': 'Rua Orós, 92',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'FISSA',
        'ContactName': 'Diego Roel',
        'CompanyName': 'FISSA Fabrica Inter. Salchichas S.A.',
        'Address': 'C/ Moralzarzal, 86',
        'Country': 'Spain'
    },
    {
        'CustomerID': 'FOLIG',
        'ContactName': 'Martine Rancé',
        'CompanyName': 'Folies gourmandes',
        'Address': '184, chaussée de Tournai',
        'Country': 'France'
    },
    {
        'CustomerID': 'FOLKO',
        'ContactName': 'Maria Larsson',
        'CompanyName': 'Folk och fä HB',
        'Address': 'Åkergatan 24',
        'Country': 'Sweden'
    },
    {
        'CustomerID': 'FRANK',
        'ContactName': 'Peter Franken',
        'CompanyName': 'Frankenversand',
        'Address': 'Berliner Platz 43',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'FRANR',
        'ContactName': 'Carine Schmitt',
        'CompanyName': 'France restauration',
        'Address': '54, rue Royale',
        'Country': 'France'
    },
    {
        'CustomerID': 'FRANS',
        'ContactName': 'Paolo Accorti',
        'CompanyName': 'Franchi S.p.A.',
        'Address': 'Via Monte Bianco 34',
        'Country': 'Italy'
    },
    {
        'CustomerID': 'FURIB',
        'ContactName': 'Lino Rodriguez',
        'CompanyName': 'Furia Bacalhau e Frutos do Mar',
        'Address': 'Jardim das rosas n. 32',
        'Country': 'Portugal'
    },
    {
        'CustomerID': 'GALED',
        'ContactName': 'Eduardo Saavedra',
        'CompanyName': 'Galería del gastrónomo',
        'Address': 'Rambla de Cataluña, 23',
        'Country': 'Spain'
    },
    {
        'CustomerID': 'GODOS',
        'ContactName': 'José Pedro Freyre',
        'CompanyName': 'Godos Cocina Típica',
        'Address': 'C/ Romero, 33',
        'Country': 'Spain'
    },
    {
        'CustomerID': 'GOURL',
        'ContactName': 'André Fonseca',
        'CompanyName': 'Gourmet Lanchonetes',
        'Address': 'Av. Brasil, 442',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'GREAL',
        'ContactName': 'Howard Snyder',
        'CompanyName': 'Great Lakes Food Market',
        'Address': '2732 Baker Blvd.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'GROSR',
        'ContactName': 'Manuel Pereira',
        'CompanyName': 'GROSELLA-Restaurante',
        'Address': '5ª Ave. Los Palos Grandes',
        'Country': 'Venezuela'
    },
    {
        'CustomerID': 'HANAR',
        'ContactName': 'Mario Pontes',
        'CompanyName': 'Hanari Carnes',
        'Address': 'Rua do Paço, 67',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'HILAA',
        'ContactName': 'Carlos Hernández',
        'CompanyName': 'HILARION-Abastos',
        'Address': 'Carrera 22 con Ave. Carlos Soublette #8-35',
        'Country': 'Venezuela'
    },
    {
        'CustomerID': 'HUNGC',
        'ContactName': 'Yoshi Latimer',
        'CompanyName': 'Hungry Coyote Import Store',
        'Address': 'City Center Plaza 516 Main St.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'HUNGO',
        'ContactName': 'Patricia McKenna',
        'CompanyName': 'Hungry Owl All-Night Grocers',
        'Address': '8 Johnstown Road',
        'Country': 'Ireland'
    },
    {
        'CustomerID': 'ISLAT',
        'ContactName': 'Helen Bennett',
        'CompanyName': 'Island Trading',
        'Address': 'Garden House Crowther Way',
        'Country': 'UK'
    },
    {
        'CustomerID': 'KOENE',
        'ContactName': 'Philip Cramer',
        'CompanyName': 'Königlich Essen',
        'Address': 'Maubelstr. 90',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'LACOR',
        'ContactName': 'Daniel Tonini',
        'CompanyName': 'La corne d\'abondance',
        'Address': '67, avenue de l\'Europe',
        'Country': 'France'
    },
    {
        'CustomerID': 'LAMAI',
        'ContactName': 'Annette Roulet',
        'CompanyName': 'La maison d\'Asie',
        'Address': '1 rue Alsace-Lorraine',
        'Country': 'France'
    },
    {
        'CustomerID': 'LAUGB',
        'ContactName': 'Yoshi Tannamuri',
        'CompanyName': 'Laughing Bacchus Wine Cellars',
        'Address': '1900 Oak St.',
        'Country': 'Canada'
    },
    {
        'CustomerID': 'LAZYK',
        'ContactName': 'John Steel',
        'CompanyName': 'Lazy K Kountry Store',
        'Address': '12 Orchestra Terrace',
        'Country': 'USA'
    },
    {
        'CustomerID': 'LEHMS',
        'ContactName': 'Renate Messner',
        'CompanyName': 'Lehmanns Marktstand',
        'Address': 'Magazinweg 7',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'LETSS',
        'ContactName': 'Jaime Yorres',
        'CompanyName': 'Let\'s Stop N Shop',
        'Address': '87 Polk St. Suite 5',
        'Country': 'USA'
    },
    {
        'CustomerID': 'LILAS',
        'ContactName': 'Carlos González',
        'CompanyName': 'LILA-Supermercado',
        'Address': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
        'Country': 'Venezuela'
    },
    {
        'CustomerID': 'LINOD',
        'ContactName': 'Felipe Izquierdo',
        'CompanyName': 'LINO-Delicateses',
        'Address': 'Ave. 5 de Mayo Porlamar',
        'Country': 'Venezuela'
    },
    {
        'CustomerID': 'LONEP',
        'ContactName': 'Fran Wilson',
        'CompanyName': 'Lonesome Pine Restaurant',
        'Address': '89 Chiaroscuro Rd.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'MAGAA',
        'ContactName': 'Giovanni Rovelli',
        'CompanyName': 'Magazzini Alimentari Riuniti',
        'Address': 'Via Ludovico il Moro 22',
        'Country': 'Italy'
    },
    {
        'CustomerID': 'MAISD',
        'ContactName': 'Catherine Dewey',
        'CompanyName': 'Maison Dewey',
        'Address': 'Rue Joseph-Bens 532',
        'Country': 'Belgium'
    },
    {
        'CustomerID': 'MEREP',
        'ContactName': 'Jean Fresnière',
        'CompanyName': 'Mère Paillarde',
        'Address': '43 rue St. Laurent',
        'Country': 'Canada'
    },
    {
        'CustomerID': 'MORGK',
        'ContactName': 'Alexander Feuer',
        'CompanyName': 'Morgenstern Gesundkost',
        'Address': 'Heerstr. 22',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'NORTS',
        'ContactName': 'Simon Crowther',
        'CompanyName': 'North/South',
        'Address': 'South House 300 Queensbridge',
        'Country': 'UK'
    },
    {
        'CustomerID': 'OCEAN',
        'ContactName': 'Yvonne Moncada',
        'CompanyName': 'Océano Atlántico Ltda.',
        'Address': 'Ing. Gustavo Moncada 8585 Piso 20-A',
        'Country': 'Argentina'
    },
    {
        'CustomerID': 'OLDWO',
        'ContactName': 'Rene Phillips',
        'CompanyName': 'Old World Delicatessen',
        'Address': '2743 Bering St.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'OTTIK',
        'ContactName': 'Henriette Pfalzheim',
        'CompanyName': 'Ottilies Käseladen',
        'Address': 'Mehrheimerstr. 369',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'PARIS',
        'ContactName': 'Marie Bertrand',
        'CompanyName': 'Paris spécialités',
        'Address': '265, boulevard Charonne',
        'Country': 'France'
    },
    {
        'CustomerID': 'PERIC',
        'ContactName': 'Guillermo Fernández',
        'CompanyName': 'Pericles Comidas clásicas',
        'Address': 'Calle Dr. Jorge Cash 321',
        'Country': 'Mexico'
    },
    {
        'CustomerID': 'PICCO',
        'ContactName': 'Georg Pipps',
        'CompanyName': 'Piccolo und mehr',
        'Address': 'Geislweg 14',
        'Country': 'Austria'
    },
    {
        'CustomerID': 'PRINI',
        'ContactName': 'Isabel de Castro',
        'CompanyName': 'Princesa Isabel Vinhos',
        'Address': 'Estrada da saúde n. 58',
        'Country': 'Portugal'
    },
    {
        'CustomerID': 'QUEDE',
        'ContactName': 'Bernardo Batista',
        'CompanyName': 'Que Delícia',
        'Address': 'Rua da Panificadora, 12',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'QUEEN',
        'ContactName': 'Lúcia Carvalho',
        'CompanyName': 'Queen Cozinha',
        'Address': 'Alameda dos Canàrios, 891',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'QUICK',
        'ContactName': 'Horst Kloss',
        'CompanyName': 'QUICK-Stop',
        'Address': 'Taucherstraße 10',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'RANCH',
        'ContactName': 'Sergio Gutiérrez',
        'CompanyName': 'Rancho grande',
        'Address': 'Av. del Libertador 900',
        'Country': 'Argentina'
    },
    {
        'CustomerID': 'RATTC',
        'ContactName': 'Paula Wilson',
        'CompanyName': 'Rattlesnake Canyon Grocery',
        'Address': '2817 Milton Dr.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'REGGC',
        'ContactName': 'Maurizio Moroni',
        'CompanyName': 'Reggiani Caseifici',
        'Address': 'Strada Provinciale 124',
        'Country': 'Italy'
    },
    {
        'CustomerID': 'RICAR',
        'ContactName': 'Janete Limeira',
        'CompanyName': 'Ricardo Adocicados',
        'Address': 'Av. Copacabana, 267',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'RICSU',
        'ContactName': 'Michael Holz',
        'CompanyName': 'Richter Supermarkt',
        'Address': 'Grenzacherweg 237',
        'Country': 'Switzerland'
    },
    {
        'CustomerID': 'ROMEY',
        'ContactName': 'Alejandra Camino',
        'CompanyName': 'Romero y tomillo',
        'Address': 'Gran Vía, 1',
        'Country': 'Spain'
    },
    {
        'CustomerID': 'SANTG',
        'ContactName': 'Jonas Bergulfsen',
        'CompanyName': 'Santé Gourmet',
        'Address': 'Erling Skakkes gate 78',
        'Country': 'Norway'
    },
    {
        'CustomerID': 'SAVEA',
        'ContactName': 'Jose Pavarotti',
        'CompanyName': 'Save-a-lot Markets',
        'Address': '187 Suffolk Ln.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'SEVES',
        'ContactName': 'Hari Kumar',
        'CompanyName': 'Seven Seas Imports',
        'Address': '90 Wadhurst Rd.',
        'Country': 'UK'
    },
    {
        'CustomerID': 'SIMOB',
        'ContactName': 'Jytte Petersen',
        'CompanyName': 'Simons bistro',
        'Address': 'Vinbæltet 34',
        'Country': 'Denmark'
    },
    {
        'CustomerID': 'SPECD',
        'ContactName': 'Dominique Perrier',
        'CompanyName': 'Spécialités du monde',
        'Address': '25, rue Lauriston',
        'Country': 'France'
    },
    {
        'CustomerID': 'SPLIR',
        'ContactName': 'Art Braunschweiger',
        'CompanyName': 'Split Rail Beer & Ale',
        'Address': 'P.O. Box 555',
        'Country': 'USA'
    },
    {
        'CustomerID': 'SUPRD',
        'ContactName': 'Pascale Cartrain',
        'CompanyName': 'Suprêmes délices',
        'Address': 'Boulevard Tirou, 255',
        'Country': 'Belgium'
    },
    {
        'CustomerID': 'THEBI',
        'ContactName': 'Liz Nixon',
        'CompanyName': 'The Big Cheese',
        'Address': '89 Jefferson Way Suite 2',
        'Country': 'USA'
    },
    {
        'CustomerID': 'THECR',
        'ContactName': 'Liu Wong',
        'CompanyName': 'The Cracker Box',
        'Address': '55 Grizzly Peak Rd.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'TOMSP',
        'ContactName': 'Karin Josephs',
        'CompanyName': 'Toms Spezialitäten',
        'Address': 'Luisenstr. 48',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'TORTU',
        'ContactName': 'Miguel Angel Paolino',
        'CompanyName': 'Tortuga Restaurante',
        'Address': 'Avda. Azteca 123',
        'Country': 'Mexico'
    },
    {
        'CustomerID': 'TRADH',
        'ContactName': 'Anabela Domingues',
        'CompanyName': 'Tradição Hipermercados',
        'Address': 'Av. Inês de Castro, 414',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'TRAIH',
        'ContactName': 'Helvetius Nagy',
        'CompanyName': 'Trail\'s Head Gourmet Provisioners',
        'Address': '722 DaVinci Blvd.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'VAFFE',
        'ContactName': 'Palle Ibsen',
        'CompanyName': 'Vaffeljernet',
        'Address': 'Smagsloget 45',
        'Country': 'Denmark'
    },
    {
        'CustomerID': 'VICTE',
        'ContactName': 'Mary Saveley',
        'CompanyName': 'Victuailles en stock',
        'Address': '2, rue du Commerce',
        'Country': 'France'
    },
    {
        'CustomerID': 'VINET',
        'ContactName': 'Paul Henriot',
        'CompanyName': 'Vins et alcools Chevalier',
        'Address': '59 rue de l\'Abbaye',
        'Country': 'France'
    },
    {
        'CustomerID': 'WANDK',
        'ContactName': 'Rita Müller',
        'CompanyName': 'Die Wandernde Kuh',
        'Address': 'Adenauerallee 900',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'WARTH',
        'ContactName': 'Pirkko Koskitalo',
        'CompanyName': 'Wartian Herkku',
        'Address': 'Torikatu 38',
        'Country': 'Finland'
    },
    {
        'CustomerID': 'WELLI',
        'ContactName': 'Paula Parente',
        'CompanyName': 'Wellington Importadora',
        'Address': 'Rua do Mercado, 12',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'WHITC',
        'ContactName': 'Karl Jablonski',
        'CompanyName': 'White Clover Markets',
        'Address': '305 - 14th Ave. S. Suite 3B',
        'Country': 'USA'
    },
    {
        'CustomerID': 'WILMK',
        'ContactName': 'Matti Karttunen',
        'CompanyName': 'Wilman Kala',
        'Address': 'Keskuskatu 45',
        'Country': 'Finland'
    },
    {
        'CustomerID': 'WOLZA',
        'ContactName': 'Zbyszek Piestrzeniewicz',
        'CompanyName': 'Wolski  Zajazd',
        'Address': 'ul. Filtrowa 68',
        'Country': 'Poland'
    }
];
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
    },
    {
        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 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'
}];

var order = JSON.stringify([
    {
        'OrderID': 10248,
        'CustomerID': 'VINET',
        'CustomerName': 'Maria ',
        'OrderDate': '1996-07-04T00:00:00.000Z',
        'ShippedDate': '1996-07-16T00:00:00.000Z',
        'Freight': 32.38,
        'ShipName': 'Vins et alcools Chevalier',
        'ShipAddress': '59 rue de l Abbaye',
        'ShipCity': 'Reims',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 3
    },
    {
        'OrderID': 10249,
        'CustomerID': 'TOMSP',
        'CustomerName': 'Ana Trujillo',
        'OrderDate': '1996-07-05T00:00:00.000Z',
        'ShippedDate': '1996-07-10T00:00:00.000Z',
        'Freight': 11.61,
        'ShipName': 'Toms Spezialitäten',
        'ShipAddress': 'Luisenstr. 48',
        'ShipCity': 'Münster',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 5
    },
    {
        'OrderID': 10250,
        'CustomerID': 'HANAR',
        'CustomerName': 'Antonio Moreno',
        'OrderDate': '1996-07-08T00:00:00.000Z',
        'ShippedDate': '1996-07-12T00:00:00.000Z',
        'Freight': 65.83,
        'ShipName': 'Hanari Carnes',
        'ShipAddress': 'Rua do Paço, 67',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 1
    },
    {
        'OrderID': 10251,
        'CustomerID': 'VICTE',
        'CustomerName': 'Thomas Hardy',
        'OrderDate': '1996-07-08T00:00:00.000Z',
        'ShippedDate': '1996-07-15T00:00:00.000Z',
        'Freight': 41.34,
        'ShipName': 'Victuailles en stock',
        'ShipAddress': '2, rue du Commerce',
        'ShipCity': 'Lyon',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 6
    },
    {
        'OrderID': 10252,
        'CustomerID': 'SUPRD',
        'CustomerName': 'Christina Berglund',
        'OrderDate': '1996-07-09T00:00:00.000Z',
        'ShippedDate': '1996-07-11T00:00:00.000Z',
        'Freight': 51.3,
        'ShipName': 'Suprêmes délices',
        'ShipAddress': 'Boulevard Tirou, 255',
        'ShipCity': 'Charleroi',
        'ShipRegion': null,
        'ShipCountry': 'Belgium',
        'EmployeeID': 2
    },
    {
        'OrderID': 10253,
        'CustomerID': 'HANAR',
        'CustomerName': 'Hanna Moos',
        'OrderDate': '1996-07-10T00:00:00.000Z',
        'ShippedDate': '1996-07-16T00:00:00.000Z',
        'Freight': 58.17,
        'ShipName': 'Hanari Carnes',
        'ShipAddress': 'Rua do Paço, 67',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 4
    },
    {
        'OrderID': 10254,
        'CustomerID': 'CHOPS',
        'CustomerName': 'Frédérique Citeaux',
        'OrderDate': '1996-07-11T00:00:00.000Z',
        'ShippedDate': '1996-07-23T00:00:00.000Z',
        'Freight': 22.98,
        'ShipName': 'Chop-suey Chinese',
        'ShipAddress': 'Hauptstr. 31',
        'ShipCity': 'Bern',
        'ShipRegion': null,
        'ShipCountry': 'Switzerland',
        'EmployeeID': 9
    },
    {
        'OrderID': 10255,
        'CustomerID': 'RICSU',
        'CustomerName': 'Martín Sommer',
        'OrderDate': '1996-07-12T00:00:00.000Z',
        'ShippedDate': '1996-07-15T00:00:00.000Z',
        'Freight': 148.33,
        'ShipName': 'Richter Supermarkt',
        'ShipAddress': 'Starenweg 5',
        'ShipCity': 'Genève',
        'ShipRegion': null,
        'ShipCountry': 'Switzerland',
        'EmployeeID': 7
    },
    {
        'OrderID': 10256,
        'CustomerID': 'WELLI',
        'CustomerName': 'Laurence Lebihan',
        'OrderDate': '1996-07-15T00:00:00.000Z',
        'ShippedDate': '1996-07-17T00:00:00.000Z',
        'Freight': 13.97,
        'ShipName': 'Wellington Importadora',
        'ShipAddress': 'Rua do Mercado, 12',
        'ShipCity': 'Resende',
        'ShipRegion': 'SP',
        'ShipCountry': 'Brazil',
        'EmployeeID': 8
    },
    {
        'OrderID': 10257,
        'CustomerID': 'HILAA',
        'CustomerName': 'Elizabeth Lincoln',
        'OrderDate': '1996-07-16T00:00:00.000Z',
        'ShippedDate': '1996-07-22T00:00:00.000Z',
        'Freight': 81.91,
        'ShipName': 'HILARION-Abastos',
        'ShipAddress': 'Carrera 22 con Ave. Carlos Soublette #8-35',
        'ShipCity': 'San Cristóbal',
        'ShipRegion': 'Táchira',
        'ShipCountry': 'Venezuela',
        'EmployeeID': 5
    },
    {
        'OrderID': 10258,
        'CustomerID': 'ERNSH',
        'CustomerName': 'Victoria Ashworth',
        'OrderDate': '1996-07-17T00:00:00.000Z',
        'ShippedDate': '1996-07-23T00:00:00.000Z',
        'Freight': 140.51,
        'ShipName': 'Ernst Handel',
        'ShipAddress': 'Kirchgasse 6',
        'ShipCity': 'Graz',
        'ShipRegion': null,
        'ShipCountry': 'Austria',
        'EmployeeID': 1
    },
    {
        'OrderID': 10259,
        'CustomerID': 'CENTC',
        'CustomerName': 'Patricio Simpson',
        'OrderDate': '1996-07-18T00:00:00.000Z',
        'ShippedDate': '1996-07-25T00:00:00.000Z',
        'Freight': 3.25,
        'ShipName': 'Centro comercial Moctezuma',
        'ShipAddress': 'Sierras de Granada 9993',
        'ShipCity': 'México D.F.',
        'ShipRegion': null,
        'ShipCountry': 'Mexico',
        'EmployeeID': 6
    },
    {
        'OrderID': 10260,
        'CustomerID': 'OTTIK',
        'CustomerName': 'Francisco Chang',
        'OrderDate': '1996-07-19T00:00:00.000Z',
        'ShippedDate': '1996-07-29T00:00:00.000Z',
        'Freight': 55.09,
        'ShipName': 'Ottilies Käseladen',
        'ShipAddress': 'Mehrheimerstr. 369',
        'ShipCity': 'Köln',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 2
    },
    {
        'OrderID': 10261,
        'CustomerID': 'QUEDE',
        'CustomerName': 'Yang Wang',
        'OrderDate': '1996-07-19T00:00:00.000Z',
        'ShippedDate': '1996-07-30T00:00:00.000Z',
        'Freight': 3.05,
        'ShipName': 'Que Delícia',
        'ShipAddress': 'Rua da Panificadora, 12',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 7
    },
    {
        'OrderID': 10262,
        'CustomerID': 'RATTC',
        'CustomerName': 'Pedro Afonso',
        'OrderDate': '1996-07-22T00:00:00.000Z',
        'ShippedDate': '1996-07-25T00:00:00.000Z',
        'Freight': 48.29,
        'ShipName': 'Rattlesnake Canyon Grocery',
        'ShipAddress': '2817 Milton Dr.',
        'ShipCity': 'Albuquerque',
        'ShipRegion': 'NM',
        'ShipCountry': 'USA',
        'EmployeeID': 4
    },
    {
        'OrderID': 10263,
        'CustomerID': 'ERNSH',
        'CustomerName': 'Elizabeth Brown',
        'OrderDate': '1996-07-23T00:00:00.000Z',
        'ShippedDate': '1996-07-31T00:00:00.000Z',
        'Freight': 146.06,
        'ShipName': 'Ernst Handel',
        'ShipAddress': 'Kirchgasse 6',
        'ShipCity': 'Graz',
        'ShipRegion': null,
        'ShipCountry': 'Austria',
        'EmployeeID': 3
    },
    {
        'OrderID': 10264,
        'CustomerID': 'FOLKO',
        'CustomerName': 'Sven Ottlieb',
        'OrderDate': '1996-07-24T00:00:00.000Z',
        'ShippedDate': '1996-08-23T00:00:00.000Z',
        'Freight': 3.67,
        'ShipName': 'Folk och fä HB',
        'ShipAddress': 'Åkergatan 24',
        'ShipCity': 'Bräcke',
        'ShipRegion': null,
        'ShipCountry': 'Sweden',
        'EmployeeID': 8
    },
    {
        'OrderID': 10265,
        'CustomerID': 'BLONP',
        'CustomerName': 'Ann Devon',
        'OrderDate': '1996-07-25T00:00:00.000Z',
        'ShippedDate': '1996-08-12T00:00:00.000Z',
        'Freight': 55.28,
        'ShipName': 'Blondel père et fils',
        'ShipAddress': '24, place Kléber',
        'ShipCity': 'Strasbourg',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 3
    },
    {
        'OrderID': 10266,
        'CustomerID': 'WARTH',
        'CustomerName': 'Roland Mendel',
        'OrderDate': '1996-07-26T00:00:00.000Z',
        'ShippedDate': '1996-07-31T00:00:00.000Z',
        'Freight': 25.73,
        'ShipName': 'Wartian Herkku',
        'ShipAddress': 'Torikatu 38',
        'ShipCity': 'Oulu',
        'ShipRegion': null,
        'ShipCountry': 'Finland',
        'EmployeeID': 2
    },
    {
        'OrderID': 10267,
        'CustomerID': 'FRANK',
        'CustomerName': 'Aria Cruz',
        'OrderDate': '1996-07-29T00:00:00.000Z',
        'ShippedDate': '1996-08-06T00:00:00.000Z',
        'Freight': 208.58,
        'ShipName': 'Frankenversand',
        'ShipAddress': 'Berliner Platz 43',
        'ShipCity': 'München',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 4
    },
    {
        'OrderID': 10268,
        'CustomerID': 'GROSR',
        'CustomerName': 'Diego Roel',
        'OrderDate': '1996-07-30T00:00:00.000Z',
        'ShippedDate': '1996-08-02T00:00:00.000Z',
        'Freight': 66.29,
        'ShipName': 'GROSELLA-Restaurante',
        'ShipAddress': '5ª Ave. Los Palos Grandes',
        'ShipCity': 'Caracas',
        'ShipRegion': 'DF',
        'ShipCountry': 'Venezuela',
        'EmployeeID': 2
    },
    {
        'OrderID': 10269,
        'CustomerID': 'WHITC',
        'CustomerName': 'Martine Rancé',
        'OrderDate': '1996-07-31T00:00:00.000Z',
        'ShippedDate': '1996-08-09T00:00:00.000Z',
        'Freight': 4.56,
        'ShipName': 'White Clover Markets',
        'ShipAddress': '1029 - 12th Ave. S.',
        'ShipCity': 'Seattle',
        'ShipRegion': 'WA',
        'ShipCountry': 'USA',
        'EmployeeID': 1
    },
    {
        'OrderID': 10270,
        'CustomerID': 'WARTH',
        'CustomerName': 'Maria Larsson',
        'OrderDate': '1996-08-01T00:00:00.000Z',
        'ShippedDate': '1996-08-02T00:00:00.000Z',
        'Freight': 136.54,
        'ShipName': 'Wartian Herkku',
        'ShipAddress': 'Torikatu 38',
        'ShipCity': 'Oulu',
        'ShipRegion': null,
        'ShipCountry': 'Finland',
        'EmployeeID': 4
    },
    {
        'OrderID': 10271,
        'CustomerID': 'SPLIR',
        'CustomerName': 'Peter Franken',
        'OrderDate': '1996-08-01T00:00:00.000Z',
        'ShippedDate': '1996-08-30T00:00:00.000Z',
        'Freight': 4.54,
        'ShipName': 'Split Rail Beer & Ale',
        'ShipAddress': 'P.O. Box 555',
        'ShipCity': 'Lander',
        'ShipRegion': 'WY',
        'ShipCountry': 'USA',
        'EmployeeID': 5
    },
    {
        'OrderID': 10272,
        'CustomerID': 'RATTC',
        'CustomerName': 'Carine Schmitt',
        'OrderDate': '1996-08-02T00:00:00.000Z',
        'ShippedDate': '1996-08-06T00:00:00.000Z',
        'Freight': 98.03,
        'ShipName': 'Rattlesnake Canyon Grocery',
        'ShipAddress': '2817 Milton Dr.',
        'ShipCity': 'Albuquerque',
        'ShipRegion': 'NM',
        'ShipCountry': 'USA',
        'EmployeeID': 3
    },
    {
        'OrderID': 10273,
        'CustomerID': 'QUICK',
        'CustomerName': 'Paolo Accorti',
        'OrderDate': '1996-08-05T00:00:00.000Z',
        'ShippedDate': '1996-08-12T00:00:00.000Z',
        'Freight': 76.07,
        'ShipName': 'QUICK-Stop',
        'ShipAddress': 'Taucherstraße 10',
        'ShipCity': 'Cunewalde',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 6
    },
    {
        'OrderID': 10274,
        'CustomerID': 'VINET',
        'CustomerName': 'Lino Rodriguez',
        'OrderDate': '1996-08-06T00:00:00.000Z',
        'ShippedDate': '1996-08-16T00:00:00.000Z',
        'Freight': 6.01,
        'ShipName': 'Vins et alcools Chevalier',
        'ShipAddress': '59 rue de l Abbaye',
        'ShipCity': 'Reims',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 1
    },
    {
        'OrderID': 10275,
        'CustomerID': 'MAGAA',
        'CustomerName': 'Eduardo Saavedra',
        'OrderDate': '1996-08-07T00:00:00.000Z',
        'ShippedDate': '1996-08-09T00:00:00.000Z',
        'Freight': 26.93,
        'ShipName': 'Magazzini Alimentari Riuniti',
        'ShipAddress': 'Via Ludovico il Moro 22',
        'ShipCity': 'Bergamo',
        'ShipRegion': null,
        'ShipCountry': 'Italy',
        'EmployeeID': 3
    },
    {
        'OrderID': 10276,
        'CustomerID': 'TORTU',
        'CustomerName': 'José Pedro Freyre',
        'OrderDate': '1996-08-08T00:00:00.000Z',
        'ShippedDate': '1996-08-14T00:00:00.000Z',
        'Freight': 13.84,
        'ShipName': 'Tortuga Restaurante',
        'ShipAddress': 'Avda. Azteca 123',
        'ShipCity': 'México D.F.',
        'ShipRegion': null,
        'ShipCountry': 'Mexico',
        'EmployeeID': 5
    },
    {
        'OrderID': 10277,
        'CustomerID': 'MORGK',
        'CustomerName': 'André Fonseca',
        'OrderDate': '1996-08-09T00:00:00.000Z',
        'ShippedDate': '1996-08-13T00:00:00.000Z',
        'Freight': 125.77,
        'ShipName': 'Morgenstern Gesundkost',
        'ShipAddress': 'Heerstr. 22',
        'ShipCity': 'Leipzig',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 7
    },
    {
        'OrderID': 10278,
        'CustomerID': 'BERGS',
        'CustomerName': 'Howard Snyder',
        'OrderDate': '1996-08-12T00:00:00.000Z',
        'ShippedDate': '1996-08-16T00:00:00.000Z',
        'Freight': 92.69,
        'ShipName': 'Berglunds snabbköp',
        'ShipAddress': 'Berguvsvägen  8',
        'ShipCity': 'Luleå',
        'ShipRegion': null,
        'ShipCountry': 'Sweden',
        'EmployeeID': 9
    },
    {
        'OrderID': 10279,
        'CustomerID': 'LEHMS',
        'CustomerName': 'Manuel Pereira',
        'OrderDate': '1996-08-13T00:00:00.000Z',
        'ShippedDate': '1996-08-16T00:00:00.000Z',
        'Freight': 25.83,
        'ShipName': 'Lehmanns Marktstand',
        'ShipAddress': 'Magazinweg 7',
        'ShipCity': 'Frankfurt a.M.',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 2
    },
    {
        'OrderID': 10280,
        'CustomerID': 'BERGS',
        'CustomerName': 'Mario Pontes',
        'OrderDate': '1996-08-14T00:00:00.000Z',
        'ShippedDate': '1996-09-12T00:00:00.000Z',
        'Freight': 8.98,
        'ShipName': 'Berglunds snabbköp',
        'ShipAddress': 'Berguvsvägen  8',
        'ShipCity': 'Luleå',
        'ShipRegion': null,
        'ShipCountry': 'Sweden',
        'EmployeeID': 4
    },
    {
        'OrderID': 10281,
        'CustomerID': 'ROMEY',
        'CustomerName': 'Carlos Hernández',
        'OrderDate': '1996-08-14T00:00:00.000Z',
        'ShippedDate': '1996-08-21T00:00:00.000Z',
        'Freight': 2.94,
        'ShipName': 'Romero y tomillo',
        'ShipAddress': 'Gran Vía, 1',
        'ShipCity': 'Madrid',
        'ShipRegion': null,
        'ShipCountry': 'Spain',
        'EmployeeID': 6
    },
    {
        'OrderID': 10282,
        'CustomerID': 'ROMEY',
        'CustomerName': 'Yoshi Latimer',
        'OrderDate': '1996-08-15T00:00:00.000Z',
        'ShippedDate': '1996-08-21T00:00:00.000Z',
        'Freight': 12.69,
        'ShipName': 'Romero y tomillo',
        'ShipAddress': 'Gran Vía, 1',
        'ShipCity': 'Madrid',
        'ShipRegion': null,
        'ShipCountry': 'Spain',
        'EmployeeID': 8
    },
    {
        'OrderID': 10283,
        'CustomerID': 'LILAS',
        'CustomerName': 'Patricia McKenna',
        'OrderDate': '1996-08-16T00:00:00.000Z',
        'ShippedDate': '1996-08-23T00:00:00.000Z',
        'Freight': 84.81,
        'ShipName': 'LILA-Supermercado',
        'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
        'ShipCity': 'Barquisimeto',
        'ShipRegion': 'Lara',
        'ShipCountry': 'Venezuela',
        'EmployeeID': 9
    },
    {
        'OrderID': 10284,
        'CustomerID': 'LEHMS',
        'CustomerName': 'Helen Bennett',
        'OrderDate': '1996-08-19T00:00:00.000Z',
        'ShippedDate': '1996-08-27T00:00:00.000Z',
        'Freight': 76.56,
        'ShipName': 'Lehmanns Marktstand',
        'ShipAddress': 'Magazinweg 7',
        'ShipCity': 'Frankfurt a.M.',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 6
    },
    {
        'OrderID': 10285,
        'CustomerID': 'QUICK',
        'CustomerName': 'Philip Cramer',
        'OrderDate': '1996-08-20T00:00:00.000Z',
        'ShippedDate': '1996-08-26T00:00:00.000Z',
        'Freight': 76.83,
        'ShipName': 'QUICK-Stop',
        'ShipAddress': 'Taucherstraße 10',
        'ShipCity': 'Cunewalde',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 3
    },
    {
        'OrderID': 10286,
        'CustomerID': 'QUICK',
        'CustomerName': 'Daniel Tonini',
        'OrderDate': '1996-08-21T00:00:00.000Z',
        'ShippedDate': '1996-08-30T00:00:00.000Z',
        'Freight': 229.24,
        'ShipName': 'QUICK-Stop',
        'ShipAddress': 'Taucherstraße 10',
        'ShipCity': 'Cunewalde',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 1
    },
    {
        'OrderID': 10287,
        'CustomerID': 'RICAR',
        'CustomerName': 'Annette Roulet',
        'OrderDate': '1996-08-22T00:00:00.000Z',
        'ShippedDate': '1996-08-28T00:00:00.000Z',
        'Freight': 12.76,
        'ShipName': 'Ricardo Adocicados',
        'ShipAddress': 'Av. Copacabana, 267',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 8
    },
    {
        'OrderID': 10288,
        'CustomerID': 'REGGC',
        'CustomerName': 'Yoshi Tannamuri',
        'OrderDate': '1996-08-23T00:00:00.000Z',
        'ShippedDate': '1996-09-03T00:00:00.000Z',
        'Freight': 7.45,
        'ShipName': 'Reggiani Caseifici',
        'ShipAddress': 'Strada Provinciale 124',
        'ShipCity': 'Reggio Emilia',
        'ShipRegion': null,
        'ShipCountry': 'Italy',
        'EmployeeID': 4
    },
    {
        'OrderID': 10289,
        'CustomerID': 'BSBEV',
        'CustomerName': 'John Steel',
        'OrderDate': '1996-08-26T00:00:00.000Z',
        'ShippedDate': '1996-08-28T00:00:00.000Z',
        'Freight': 22.77,
        'ShipName': 'B s Beverages',
        'ShipAddress': 'Fauntleroy Circus',
        'ShipCity': 'London',
        'ShipRegion': null,
        'ShipCountry': 'UK',
        'EmployeeID': 2
    },
    {
        'OrderID': 10290,
        'CustomerID': 'COMMI',
        'CustomerNames': 'Renate Messner',
        'OrderDate': '1996-08-27T00:00:00.000Z',
        'ShippedDate': '1996-09-03T00:00:00.000Z',
        'Freight': 79.7,
        'ShipName': 'Comércio Mineiro',
        'ShipAddress': 'Av. dos Lusíadas, 23',
        'ShipCity': 'Sao Paulo',
        'ShipRegion': 'SP',
        'ShipCountry': 'Brazil',
        'EmployeeID': 5
    },
    {
        'OrderID': 10291,
        'CustomerID': 'QUEDE',
        'CustomerName': 'Jaime Yorres',
        'OrderDate': '1996-08-27T00:00:00.000Z',
        'ShippedDate': '1996-09-04T00:00:00.000Z',
        'Freight': 6.4,
        'ShipName': 'Que Delícia',
        'ShipAddress': 'Rua da Panificadora, 12',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 7
    },
    {
        'OrderID': 10292,
        'CustomerID': 'TRADH',
        'CustomerName': 'Carlos González',
        'OrderDate': '1996-08-28T00:00:00.000Z',
        'ShippedDate': '1996-09-02T00:00:00.000Z',
        'Freight': 1.35,
        'ShipName': 'Tradiçao Hipermercados',
        'ShipAddress': 'Av. Inês de Castro, 414',
        'ShipCity': 'Sao Paulo',
        'ShipRegion': 'SP',
        'ShipCountry': 'Brazil',
        'EmployeeID': 3
    },
    {
        'OrderID': 10293,
        'CustomerID': 'TORTU',
        'CustomerName': 'Felipe Izquierdo',
        'OrderDate': '1996-08-29T00:00:00.000Z',
        'ShippedDate': '1996-09-11T00:00:00.000Z',
        'Freight': 21.18,
        'ShipName': 'Tortuga Restaurante',
        'ShipAddress': 'Avda. Azteca 123',
        'ShipCity': 'México D.F.',
        'ShipRegion': null,
        'ShipCountry': 'Mexico',
        'EmployeeID': 1
    },
    {
        'OrderID': 10294,
        'CustomerID': 'RATTC',
        'CustomerName': 'Fran Wilson',
        'OrderDate': '1996-08-30T00:00:00.000Z',
        'ShippedDate': '1996-09-05T00:00:00.000Z',
        'Freight': 147.26,
        'ShipName': 'Rattlesnake Canyon Grocery',
        'ShipAddress': '2817 Milton Dr.',
        'ShipCity': 'Albuquerque',
        'ShipRegion': 'NM',
        'ShipCountry': 'USA',
        'EmployeeID': 2
    },
    {
        'OrderID': 10295,
        'CustomerID': 'VINET',
        'CustomerName': 'Giovanni Rovelli',
        'OrderDate': '1996-09-02T00:00:00.000Z',
        'ShippedDate': '1996-09-10T00:00:00.000Z',
        'Freight': 1.15,
        'ShipName': 'Vins et alcools Chevalier',
        'ShipAddress': '59 rue de l Abbaye',
        'ShipCity': 'Reims',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 3
    },
    {
        'OrderID': 10296,
        'CustomerID': 'LILAS',
        'CustomerName': 'Catherine Dewey',
        'OrderDate': '1996-09-03T00:00:00.000Z',
        'ShippedDate': '1996-09-11T00:00:00.000Z',
        'Freight': 0.12,
        'ShipName': 'LILA-Supermercado',
        'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
        'ShipCity': 'Barquisimeto',
        'ShipRegion': 'Lara',
        'ShipCountry': 'Venezuela',
        'EmployeeID': 4
    },
    {
        'OrderID': 10297,
        'CustomerID': 'BLONP',
        'CustomerName': 'Jean Fresnière',
        'OrderDate': '1996-09-04T00:00:00.000Z',
        'ShippedDate': '1996-09-10T00:00:00.000Z',
        'Freight': 5.74,
        'ShipName': 'Blondel père et fils',
        'ShipAddress': '24, place Kléber',
        'ShipCity': 'Strasbourg',
        'ShipRegion': null,
        'ShipCountry': 'France',
        'EmployeeID': 5
    },
    {
        'OrderID': 10298,
        'CustomerID': 'HUNGO',
        'CustomerName': 'Alexander Feuer',
        'OrderDate': '1996-09-05T00:00:00.000Z',
        'ShippedDate': '1996-09-11T00:00:00.000Z',
        'Freight': 168.22,
        'ShipName': 'Hungry Owl All-Night Grocers',
        'ShipAddress': '8 Johnstown Road',
        'ShipCity': 'Cork',
        'ShipRegion': 'Co. Cork',
        'ShipCountry': 'Ireland',
        'EmployeeID': 6
    },
    {
        'OrderID': 10299,
        'CustomerID': 'RICAR',
        'CustomerName': 'Simon Crowther',
        'OrderDate': '1996-09-06T00:00:00.000Z',
        'ShippedDate': '1996-09-13T00:00:00.000Z',
        'Freight': 29.76,
        'ShipName': 'Ricardo Adocicados',
        'ShipAddress': 'Av. Copacabana, 267',
        'ShipCity': 'Rio de Janeiro',
        'ShipRegion': 'RJ',
        'ShipCountry': 'Brazil',
        'EmployeeID': 7
    },
    {
        'OrderID': 10300,
        'CustomerID': 'MAGAA',
        'CustomerNames': 'Yvonne Moncada',
        'OrderDate': '1996-09-09T00:00:00.000Z',
        'ShippedDate': '1996-09-18T00:00:00.000Z',
        'Freight': 17.68,
        'ShipName': 'Magazzini Alimentari Riuniti',
        'ShipAddress': 'Via Ludovico il Moro 22',
        'ShipCity': 'Bergamo',
        'ShipRegion': null,
        'ShipCountry': 'Italy',
        'EmployeeID': 8
    },
    {
        'OrderID': 10301,
        'CustomerID': 'WANDK',
        'CustomerName': 'Rene Phillips',
        'OrderDate': '1996-09-09T00:00:00.000Z',
        'ShippedDate': '1996-09-17T00:00:00.000Z',
        'Freight': 45.08,
        'ShipName': 'Die Wandernde Kuh',
        'ShipAddress': 'Adenauerallee 900',
        'ShipCity': 'Stuttgart',
        'ShipRegion': null,
        'ShipCountry': 'Germany',
        'EmployeeID': 9
    },
    {
        'OrderID': 10302,
        'CustomerID': 'SUPRD',
        'CustomerName': 'Pirkko Koskitalo',
        'OrderDate': '1996-09-10T00:00:00.000Z',
        'ShippedDate': '1996-10-09T00:00:00.000Z',
        'Freight': 6.27,
        'ShipName': 'Suprêmes délices',
        'ShipAddress': 'Boulevard Tirou, 255',
        'ShipCity': 'Charleroi',
        'ShipRegion': null,
        'ShipCountry': 'Belgium',
        'EmployeeID': 2
    },
    {
        'OrderID': 10303,
        'CustomerID': 'GODOS',
        'CustomerName': 'Paula Parente',
        'OrderDate': '1996-09-11T00:00:00.000Z',
        'ShippedDate': '1996-09-18T00:00:00.000Z',
        'Freight': 107.83,
        'ShipName': 'Godos Cocina Típica',
        'ShipAddress': 'C/ Romero, 33',
        'ShipCity': 'Sevilla',
        'ShipRegion': null,
        'ShipCountry': 'Spain',
        'EmployeeID': 4
    },
    {
        'OrderID': 10304,
        'CustomerID': 'TORTU',
        'CustomerName': 'Karl Jablonski',
        'OrderDate': '1996-09-12T00:00:00.000Z',
        'ShippedDate': '1996-09-17T00:00:00.000Z',
        'Freight': 63.79,
        'ShipName': 'Tortuga Restaurante',
        'ShipAddress': 'Avda. Azteca 123',
        'ShipCity': 'México D.F.',
        'ShipRegion': null,
        'ShipCountry': 'Mexico',
        'EmployeeID': 8
    },
    {
        'OrderID': 10305,
        'CustomerID': 'OLDWO',
        'CustomerName': 'Matti Karttunen',
        'OrderDate': '1996-09-13T00:00:00.000Z',
        'ShippedDate': '1996-10-09T00:00:00.000Z',
        'Freight': 257.62,
        'ShipName': 'Old World Delicatessen',
        'ShipAddress': '2743 Bering St.',
        'ShipCity': 'Anchorage',
        'ShipRegion': 'AK',
        'ShipCountry': 'USA',
        'EmployeeID': 6
    },
    {
        'OrderID': 10306,
        'CustomerID': 'ROMEY',
        'CustomerName': 'Zbyszek Piestrzeniewicz',
        'OrderDate': '1996-09-16T00:00:00.000Z',
        'ShippedDate': '1996-09-23T00:00:00.000Z',
        'Freight': 7.56,
        'ShipName': 'Romero y tomillo',
        'ShipAddress': 'Gran Vía, 1',
        'ShipCity': 'Madrid',
        'ShipRegion': null,
        'ShipCountry': 'Spain',
        'EmployeeID': 3
    },
    {
        'OrderID': 10307,
        'CustomerID': 'LONEP',
        'CustomerName': 'Zbyszek Piestrzeniewicz',
        'OrderDate': '1996-09-17T00:00:00.000Z',
        'ShippedDate': '1996-09-25T00:00:00.000Z',
        'Freight': 0.56,
        'ShipName': 'Lonesome Pine Restaurant',
        'ShipAddress': '89 Chiaroscuro Rd.',
        'ShipCity': 'Portland',
        'ShipRegion': 'OR',
        'ShipCountry': 'USA',
        'EmployeeID': 1
    }
]);
export let orderDetails: object[] = JSON.parse(order, function (field, value) {
    var dupValue = value;
    if (typeof value === 'string' && /^(\d{4}\-\d\d\-\d\d([tT][\d:\.]*){1})([zZ]|([+\-])(\d\d):?(\d\d))?$/.test(value)) {
        var arr = dupValue.split(/[^0-9]/);
        value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5], 10));
    }
    return value;
});

export let customerData: object[] = [
    {
        'CustomerID': 'ALFKI',
        'ContactName': 'Maria ',
        'CompanyName': 'Alfreds Futterkiste',
        'Address': 'Obere Str. 57',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'ANATR',
        'ContactName': 'Ana Trujillo',
        'CompanyName': 'Ana Trujillo Emparedados y helados',
        'Address': 'Avda. de la Constitución 2222',
        'Country': 'Mexico'
    },
    {
        'CustomerID': 'ANTON',
        'ContactName': 'Antonio Moreno',
        'CompanyName': 'Antonio Moreno Taquería',
        'Address': 'Mataderos  2312',
        'Country': 'Mexico'
    },
    {
        'CustomerID': 'AROUT',
        'ContactName': 'Thomas Hardy',
        'CompanyName': 'Around the Horn',
        'Address': '120 Hanover Sq.',
        'Country': 'UK'
    },
    {
        'CustomerID': 'BERGS',
        'ContactName': 'Christina Berglund',
        'CompanyName': 'Berglunds snabbköp',
        'Address': 'Berguvsvägen  8',
        'Country': 'Sweden'
    },
    {
        'CustomerID': 'BLAUS',
        'ContactName': 'Hanna Moos',
        'CompanyName': 'Blauer See Delikatessen',
        'Address': 'Forsterstr. 57',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'BLONP',
        'ContactName': 'Frédérique Citeaux',
        'CompanyName': 'Blondesddsl père et fils',
        'Address': '24, place Kléber',
        'Country': 'France'
    },
    {
        'CustomerID': 'BOLID',
        'ContactName': 'Martín Sommer',
        'CompanyName': 'Bólido Comidas preparadas',
        'Address': 'C/ Araquil, 67',
        'Country': 'Spain'
    },
    {
        'CustomerID': 'BONAP',
        'ContactName': 'Laurence Lebihan',
        'CompanyName': 'Bon app',
        'Address': '12, rue des Bouchers',
        'Country': 'France'
    },
    {
        'CustomerID': 'BOTTM',
        'ContactName': 'Elizabeth Lincoln',
        'CompanyName': 'Bottom-Dollar Markets',
        'Address': '23 Tsawassen Blvd.',
        'Country': 'Canada'
    },
    {
        'CustomerID': 'BSBEV',
        'ContactName': 'Victoria Ashworth',
        'CompanyName': 'B\'s Beverages',
        'Address': 'Fauntleroy Circus',
        'Country': 'UK'
    },
    {
        'CustomerID': 'CACTU',
        'ContactName': 'Patricio Simpson',
        'CompanyName': 'Cactus Comidas para llevar',
        'Address': 'Cerrito 333',
        'Country': 'Argentina'
    },
    {
        'CustomerID': 'CENTC',
        'ContactName': 'Francisco Chang',
        'CompanyName': 'Centro comercial Moctezuma',
        'Address': 'Sierras de Granada 9993',
        'Country': 'Mexico'
    },
    {
        'CustomerID': 'CHOPS',
        'ContactName': 'Yang Wang',
        'CompanyName': 'Chop-suey Chinese',
        'Address': 'Hauptstr. 29',
        'Country': 'Switzerland'
    },
    {
        'CustomerID': 'COMMI',
        'ContactName': 'Pedro Afonso',
        'CompanyName': 'Comércio Mineiro',
        'Address': 'Av. dos Lusíadas, 23',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'CONSH',
        'ContactName': 'Elizabeth Brown',
        'CompanyName': 'Consolidated Holdings',
        'Address': 'Berkeley Gardens 12  Brewery',
        'Country': 'UK'
    },
    {
        'CustomerID': 'DRACD',
        'ContactName': 'Sven Ottlieb',
        'CompanyName': 'Drachenblut Delikatessen',
        'Address': 'Walserweg 21',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'DUMON',
        'ContactName': 'Janine Labrune',
        'CompanyName': 'Du monde entier',
        'Address': '67, rue des Cinquante Otages',
        'Country': 'France'
    },
    {
        'CustomerID': 'EASTC',
        'ContactName': 'Ann Devon',
        'CompanyName': 'Eastern Connection',
        'Address': '35 King George',
        'Country': 'UK'
    },
    {
        'CustomerID': 'ERNSH',
        'ContactName': 'Roland Mendel',
        'CompanyName': 'Ernst Handel',
        'Address': 'Kirchgasse 6',
        'Country': 'Austria'
    },
    {
        'CustomerID': 'FAMIA',
        'ContactName': 'Aria Cruz',
        'CompanyName': 'Familia Arquibaldo',
        'Address': 'Rua Orós, 92',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'FISSA',
        'ContactName': 'Diego Roel',
        'CompanyName': 'FISSA Fabrica Inter. Salchichas S.A.',
        'Address': 'C/ Moralzarzal, 86',
        'Country': 'Spain'
    },
    {
        'CustomerID': 'FOLIG',
        'ContactName': 'Martine Rancé',
        'CompanyName': 'Folies gourmandes',
        'Address': '184, chaussée de Tournai',
        'Country': 'France'
    },
    {
        'CustomerID': 'FOLKO',
        'ContactName': 'Maria Larsson',
        'CompanyName': 'Folk och fä HB',
        'Address': 'Åkergatan 24',
        'Country': 'Sweden'
    },
    {
        'CustomerID': 'FRANK',
        'ContactName': 'Peter Franken',
        'CompanyName': 'Frankenversand',
        'Address': 'Berliner Platz 43',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'FRANR',
        'ContactName': 'Carine Schmitt',
        'CompanyName': 'France restauration',
        'Address': '54, rue Royale',
        'Country': 'France'
    },
    {
        'CustomerID': 'FRANS',
        'ContactName': 'Paolo Accorti',
        'CompanyName': 'Franchi S.p.A.',
        'Address': 'Via Monte Bianco 34',
        'Country': 'Italy'
    },
    {
        'CustomerID': 'FURIB',
        'ContactName': 'Lino Rodriguez',
        'CompanyName': 'Furia Bacalhau e Frutos do Mar',
        'Address': 'Jardim das rosas n. 32',
        'Country': 'Portugal'
    },
    {
        'CustomerID': 'GALED',
        'ContactName': 'Eduardo Saavedra',
        'CompanyName': 'Galería del gastrónomo',
        'Address': 'Rambla de Cataluña, 23',
        'Country': 'Spain'
    },
    {
        'CustomerID': 'GODOS',
        'ContactName': 'José Pedro Freyre',
        'CompanyName': 'Godos Cocina Típica',
        'Address': 'C/ Romero, 33',
        'Country': 'Spain'
    },
    {
        'CustomerID': 'GOURL',
        'ContactName': 'André Fonseca',
        'CompanyName': 'Gourmet Lanchonetes',
        'Address': 'Av. Brasil, 442',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'GREAL',
        'ContactName': 'Howard Snyder',
        'CompanyName': 'Great Lakes Food Market',
        'Address': '2732 Baker Blvd.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'GROSR',
        'ContactName': 'Manuel Pereira',
        'CompanyName': 'GROSELLA-Restaurante',
        'Address': '5ª Ave. Los Palos Grandes',
        'Country': 'Venezuela'
    },
    {
        'CustomerID': 'HANAR',
        'ContactName': 'Mario Pontes',
        'CompanyName': 'Hanari Carnes',
        'Address': 'Rua do Paço, 67',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'HILAA',
        'ContactName': 'Carlos Hernández',
        'CompanyName': 'HILARION-Abastos',
        'Address': 'Carrera 22 con Ave. Carlos Soublette #8-35',
        'Country': 'Venezuela'
    },
    {
        'CustomerID': 'HUNGC',
        'ContactName': 'Yoshi Latimer',
        'CompanyName': 'Hungry Coyote Import Store',
        'Address': 'City Center Plaza 516 Main St.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'HUNGO',
        'ContactName': 'Patricia McKenna',
        'CompanyName': 'Hungry Owl All-Night Grocers',
        'Address': '8 Johnstown Road',
        'Country': 'Ireland'
    },
    {
        'CustomerID': 'ISLAT',
        'ContactName': 'Helen Bennett',
        'CompanyName': 'Island Trading',
        'Address': 'Garden House Crowther Way',
        'Country': 'UK'
    },
    {
        'CustomerID': 'KOENE',
        'ContactName': 'Philip Cramer',
        'CompanyName': 'Königlich Essen',
        'Address': 'Maubelstr. 90',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'LACOR',
        'ContactName': 'Daniel Tonini',
        'CompanyName': 'La corne d\'abondance',
        'Address': '67, avenue de l\'Europe',
        'Country': 'France'
    },
    {
        'CustomerID': 'LAMAI',
        'ContactName': 'Annette Roulet',
        'CompanyName': 'La maison d\'Asie',
        'Address': '1 rue Alsace-Lorraine',
        'Country': 'France'
    },
    {
        'CustomerID': 'LAUGB',
        'ContactName': 'Yoshi Tannamuri',
        'CompanyName': 'Laughing Bacchus Wine Cellars',
        'Address': '1900 Oak St.',
        'Country': 'Canada'
    },
    {
        'CustomerID': 'LAZYK',
        'ContactName': 'John Steel',
        'CompanyName': 'Lazy K Kountry Store',
        'Address': '12 Orchestra Terrace',
        'Country': 'USA'
    },
    {
        'CustomerID': 'LEHMS',
        'ContactName': 'Renate Messner',
        'CompanyName': 'Lehmanns Marktstand',
        'Address': 'Magazinweg 7',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'LETSS',
        'ContactName': 'Jaime Yorres',
        'CompanyName': 'Let\'s Stop N Shop',
        'Address': '87 Polk St. Suite 5',
        'Country': 'USA'
    },
    {
        'CustomerID': 'LILAS',
        'ContactName': 'Carlos González',
        'CompanyName': 'LILA-Supermercado',
        'Address': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
        'Country': 'Venezuela'
    },
    {
        'CustomerID': 'LINOD',
        'ContactName': 'Felipe Izquierdo',
        'CompanyName': 'LINO-Delicateses',
        'Address': 'Ave. 5 de Mayo Porlamar',
        'Country': 'Venezuela'
    },
    {
        'CustomerID': 'LONEP',
        'ContactName': 'Fran Wilson',
        'CompanyName': 'Lonesome Pine Restaurant',
        'Address': '89 Chiaroscuro Rd.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'MAGAA',
        'ContactName': 'Giovanni Rovelli',
        'CompanyName': 'Magazzini Alimentari Riuniti',
        'Address': 'Via Ludovico il Moro 22',
        'Country': 'Italy'
    },
    {
        'CustomerID': 'MAISD',
        'ContactName': 'Catherine Dewey',
        'CompanyName': 'Maison Dewey',
        'Address': 'Rue Joseph-Bens 532',
        'Country': 'Belgium'
    },
    {
        'CustomerID': 'MEREP',
        'ContactName': 'Jean Fresnière',
        'CompanyName': 'Mère Paillarde',
        'Address': '43 rue St. Laurent',
        'Country': 'Canada'
    },
    {
        'CustomerID': 'MORGK',
        'ContactName': 'Alexander Feuer',
        'CompanyName': 'Morgenstern Gesundkost',
        'Address': 'Heerstr. 22',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'NORTS',
        'ContactName': 'Simon Crowther',
        'CompanyName': 'North/South',
        'Address': 'South House 300 Queensbridge',
        'Country': 'UK'
    },
    {
        'CustomerID': 'OCEAN',
        'ContactName': 'Yvonne Moncada',
        'CompanyName': 'Océano Atlántico Ltda.',
        'Address': 'Ing. Gustavo Moncada 8585 Piso 20-A',
        'Country': 'Argentina'
    },
    {
        'CustomerID': 'OLDWO',
        'ContactName': 'Rene Phillips',
        'CompanyName': 'Old World Delicatessen',
        'Address': '2743 Bering St.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'OTTIK',
        'ContactName': 'Henriette Pfalzheim',
        'CompanyName': 'Ottilies Käseladen',
        'Address': 'Mehrheimerstr. 369',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'PARIS',
        'ContactName': 'Marie Bertrand',
        'CompanyName': 'Paris spécialités',
        'Address': '265, boulevard Charonne',
        'Country': 'France'
    },
    {
        'CustomerID': 'PERIC',
        'ContactName': 'Guillermo Fernández',
        'CompanyName': 'Pericles Comidas clásicas',
        'Address': 'Calle Dr. Jorge Cash 321',
        'Country': 'Mexico'
    },
    {
        'CustomerID': 'PICCO',
        'ContactName': 'Georg Pipps',
        'CompanyName': 'Piccolo und mehr',
        'Address': 'Geislweg 14',
        'Country': 'Austria'
    },
    {
        'CustomerID': 'PRINI',
        'ContactName': 'Isabel de Castro',
        'CompanyName': 'Princesa Isabel Vinhos',
        'Address': 'Estrada da saúde n. 58',
        'Country': 'Portugal'
    },
    {
        'CustomerID': 'QUEDE',
        'ContactName': 'Bernardo Batista',
        'CompanyName': 'Que Delícia',
        'Address': 'Rua da Panificadora, 12',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'QUEEN',
        'ContactName': 'Lúcia Carvalho',
        'CompanyName': 'Queen Cozinha',
        'Address': 'Alameda dos Canàrios, 891',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'QUICK',
        'ContactName': 'Horst Kloss',
        'CompanyName': 'QUICK-Stop',
        'Address': 'Taucherstraße 10',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'RANCH',
        'ContactName': 'Sergio Gutiérrez',
        'CompanyName': 'Rancho grande',
        'Address': 'Av. del Libertador 900',
        'Country': 'Argentina'
    },
    {
        'CustomerID': 'RATTC',
        'ContactName': 'Paula Wilson',
        'CompanyName': 'Rattlesnake Canyon Grocery',
        'Address': '2817 Milton Dr.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'REGGC',
        'ContactName': 'Maurizio Moroni',
        'CompanyName': 'Reggiani Caseifici',
        'Address': 'Strada Provinciale 124',
        'Country': 'Italy'
    },
    {
        'CustomerID': 'RICAR',
        'ContactName': 'Janete Limeira',
        'CompanyName': 'Ricardo Adocicados',
        'Address': 'Av. Copacabana, 267',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'RICSU',
        'ContactName': 'Michael Holz',
        'CompanyName': 'Richter Supermarkt',
        'Address': 'Grenzacherweg 237',
        'Country': 'Switzerland'
    },
    {
        'CustomerID': 'ROMEY',
        'ContactName': 'Alejandra Camino',
        'CompanyName': 'Romero y tomillo',
        'Address': 'Gran Vía, 1',
        'Country': 'Spain'
    },
    {
        'CustomerID': 'SANTG',
        'ContactName': 'Jonas Bergulfsen',
        'CompanyName': 'Santé Gourmet',
        'Address': 'Erling Skakkes gate 78',
        'Country': 'Norway'
    },
    {
        'CustomerID': 'SAVEA',
        'ContactName': 'Jose Pavarotti',
        'CompanyName': 'Save-a-lot Markets',
        'Address': '187 Suffolk Ln.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'SEVES',
        'ContactName': 'Hari Kumar',
        'CompanyName': 'Seven Seas Imports',
        'Address': '90 Wadhurst Rd.',
        'Country': 'UK'
    },
    {
        'CustomerID': 'SIMOB',
        'ContactName': 'Jytte Petersen',
        'CompanyName': 'Simons bistro',
        'Address': 'Vinbæltet 34',
        'Country': 'Denmark'
    },
    {
        'CustomerID': 'SPECD',
        'ContactName': 'Dominique Perrier',
        'CompanyName': 'Spécialités du monde',
        'Address': '25, rue Lauriston',
        'Country': 'France'
    },
    {
        'CustomerID': 'SPLIR',
        'ContactName': 'Art Braunschweiger',
        'CompanyName': 'Split Rail Beer & Ale',
        'Address': 'P.O. Box 555',
        'Country': 'USA'
    },
    {
        'CustomerID': 'SUPRD',
        'ContactName': 'Pascale Cartrain',
        'CompanyName': 'Suprêmes délices',
        'Address': 'Boulevard Tirou, 255',
        'Country': 'Belgium'
    },
    {
        'CustomerID': 'THEBI',
        'ContactName': 'Liz Nixon',
        'CompanyName': 'The Big Cheese',
        'Address': '89 Jefferson Way Suite 2',
        'Country': 'USA'
    },
    {
        'CustomerID': 'THECR',
        'ContactName': 'Liu Wong',
        'CompanyName': 'The Cracker Box',
        'Address': '55 Grizzly Peak Rd.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'TOMSP',
        'ContactName': 'Karin Josephs',
        'CompanyName': 'Toms Spezialitäten',
        'Address': 'Luisenstr. 48',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'TORTU',
        'ContactName': 'Miguel Angel Paolino',
        'CompanyName': 'Tortuga Restaurante',
        'Address': 'Avda. Azteca 123',
        'Country': 'Mexico'
    },
    {
        'CustomerID': 'TRADH',
        'ContactName': 'Anabela Domingues',
        'CompanyName': 'Tradição Hipermercados',
        'Address': 'Av. Inês de Castro, 414',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'TRAIH',
        'ContactName': 'Helvetius Nagy',
        'CompanyName': 'Trail\'s Head Gourmet Provisioners',
        'Address': '722 DaVinci Blvd.',
        'Country': 'USA'
    },
    {
        'CustomerID': 'VAFFE',
        'ContactName': 'Palle Ibsen',
        'CompanyName': 'Vaffeljernet',
        'Address': 'Smagsloget 45',
        'Country': 'Denmark'
    },
    {
        'CustomerID': 'VICTE',
        'ContactName': 'Mary Saveley',
        'CompanyName': 'Victuailles en stock',
        'Address': '2, rue du Commerce',
        'Country': 'France'
    },
    {
        'CustomerID': 'VINET',
        'ContactName': 'Paul Henriot',
        'CompanyName': 'Vins et alcools Chevalier',
        'Address': '59 rue de l\'Abbaye',
        'Country': 'France'
    },
    {
        'CustomerID': 'WANDK',
        'ContactName': 'Rita Müller',
        'CompanyName': 'Die Wandernde Kuh',
        'Address': 'Adenauerallee 900',
        'Country': 'Germany'
    },
    {
        'CustomerID': 'WARTH',
        'ContactName': 'Pirkko Koskitalo',
        'CompanyName': 'Wartian Herkku',
        'Address': 'Torikatu 38',
        'Country': 'Finland'
    },
    {
        'CustomerID': 'WELLI',
        'ContactName': 'Paula Parente',
        'CompanyName': 'Wellington Importadora',
        'Address': 'Rua do Mercado, 12',
        'Country': 'Brazil'
    },
    {
        'CustomerID': 'WHITC',
        'ContactName': 'Karl Jablonski',
        'CompanyName': 'White Clover Markets',
        'Address': '305 - 14th Ave. S. Suite 3B',
        'Country': 'USA'
    },
    {
        'CustomerID': 'WILMK',
        'ContactName': 'Matti Karttunen',
        'CompanyName': 'Wilman Kala',
        'Address': 'Keskuskatu 45',
        'Country': 'Finland'
    },
    {
        'CustomerID': 'WOLZA',
        'ContactName': 'Zbyszek Piestrzeniewicz',
        'CompanyName': 'Wolski  Zajazd',
        'Address': 'ul. Filtrowa 68',
        'Country': 'Poland'
    }
];