Headers in React Grid component
3 Sep 202424 minutes to read
Header text
By default, the header text of a column in Grid is displayed from the column’s field value. However, you can easily override the default header title and provide a custom header text for the column using the headerText property.
To enable the headerText property, you simply need to define it in the ColumnDirective element. The following example demonstrates how to enable header text for a Grid column.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
return <GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' format='C' textAlign="Right"/>
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' format='yMd' textAlign="Right"/>
</ColumnsDirective>
</GridComponent>;
}
;
export default App;import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
return <GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right" />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='Freight' headerText='Freight' width='150' format='C' textAlign="Right" />
<ColumnDirective field='OrderDate' headerText='Order Date' width='150' format='yMd' textAlign="Right" />
</ColumnsDirective>
</GridComponent>
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];
- The
headerTextproperty is optional, and if it is not defined, then the corresponding column’s field value is set as header text for that column.- You can also use the headerTemplate property to apply custom HTML content to the header cell.
Header template
The headerTemplate property is used to customize the header element of a Grid column. With this property, you can render custom HTML elements or React components to the header element. This feature allows you to add more functionality to the header, such as sorting or filtering.
In this demo, the custom element is rendered for both CustomerID and OrderDate column headers.
import { ColumnDirective, ColumnsDirective, GridComponent} from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import React, {useState} from 'react';
import { data } from './datasource';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
function App() {
const dropDownData = ['Freight', 'Shipment', 'Cargo'];
const [headerText, setHeaderText] = useState('Order Date');
const customerIDTemplate = () => {
return (<div>
<span className="e-icon-userlogin e-icons employee"></span> Customer ID
</div>);
}
const freightTemplate = () => {
return (<div>
<DropDownListComponent dataSource={dropDownData} index={0} width="140" />
</div>);
}
const orderDateTemplate = () => {
return (<div>
<SwitchComponent change={onSwitchToggle} />
<label style={{padding: "0px 0px 0px 20px"}}>{headerText}</label>
</div>);
}
const onSwitchToggle = (args) =>{
setHeaderText(args.checked ? 'Purchase Date' : 'Order Date');
}
return <GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right" />
<ColumnDirective field='CustomerID' headerText='Customer ID' headerTemplate={customerIDTemplate} width='150' />
<ColumnDirective field='Freight' headerText='Freight' width='150' headerTemplate={freightTemplate} />
<ColumnDirective field='OrderDate' headerText='Order Date' width='135' headerTemplate={orderDateTemplate} format='yMd' textAlign='Right' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' />
</ColumnsDirective>
</GridComponent>
};
export default App;import { ColumnDirective, ColumnsDirective, GridComponent} from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import React, {useState} from 'react';
import { data } from './datasource';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
function App() {
const dropDownData: string[] = ['Freight', 'Shipment', 'Cargo'];
const [headerText, setHeaderText] = useState('Order Date');
const customerIDTemplate = () => {
return (<div>
<span className="e-icon-userlogin e-icons employee"></span> Customer ID
</div>);
}
const freightTemplate = () => {
return (<div>
<DropDownListComponent dataSource={dropDownData} index={0} width="140" />
</div>);
}
const orderDateTemplate = () => {
return (<div>
<SwitchComponent change={onSwitchToggle} />
<label style={{padding: "0px 0px 0px 20px"}}>{headerText}</label>
</div>);
}
const onSwitchToggle = (args: any) =>{
setHeaderText(args.checked ? 'Purchase Date' : 'Order Date');
}
return <GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right" />
<ColumnDirective field='CustomerID' headerText='Customer ID' headerTemplate={customerIDTemplate} width='150' />
<ColumnDirective field='Freight' headerText='Freight' width='150' headerTemplate={freightTemplate} />
<ColumnDirective field='OrderDate' headerText='Order Date' width='135' headerTemplate={orderDateTemplate} format='yMd' textAlign='Right' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' />
</ColumnsDirective>
</GridComponent>
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];
- The
headerTemplateproperty is only applicable to Grid columns that have a header element.- You can use any HTML or React component in the header template to add additional functionality to the header element.
Stacked header
In Grid, you can group multiple levels of column headers by stacking the Grid columns. This feature allows you to organize the Grid columns in a more structured and understandable way. This can be achieved by setting the ColumnDirective property. Within this property, you can define an array of column objects to group together as sub-headers under a main header. You can define the headerText property of each sub-header column to set the text for that sub-header.
You can customize the appearance of the stacked header elements by using the headerTemplate property. This property accepts an template reference, which allows you to define custom HTML elements or React components to the header element. Here’s an example of how to use stacked headers with a custom headerTemplate in Syncfusion Grid.
import { ColumnDirective, ColumnsDirective, ForeignKey, Grid, GridComponent, Inject, ColumnModel } from '@syncfusion/ej2-react-grids';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import React, { useState } from 'react';
import { data, employeeData } from './datasource';
import { ButtonComponent, SwitchComponent } from '@syncfusion/ej2-react-buttons';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
function App() {
const dropDownData = ['Order Details', 'Order Information'];
const orderColumns = [{
field: 'OrderDate',
headerText: 'Order Date',
format: 'yMd',
width: 130,
textAlign: 'Right',
minWidth: 10,
},
{
field: 'Freight',
headerText: 'Freight ($)',
width: 120,
format: 'C1',
textAlign: 'Right',
minWidth: 10,
}];
const shipColumns = [
{
field: 'ShipCity',
headerText: 'Ship City',
format: 'yMd',
textAlign: 'Right',
width: 150,
minWidth: 10,
},
{
field: 'ShipCountry',
headerText: 'Ship Country',
width: 150,
minWidth: 10,
}
]
const orderIDTemplate = () => {
return (<div>
<a href="#">OrderID</a>
</div>);
}
const orderDetail = () => {
return (<div>
<DropDownListComponent dataSource={dropDownData} index={0} width="130" />
</div>);
}
const shipDetail = () => {
return (<div>
<span>Ship Details</span>
<span>(<i className="fa fa-truck"></i>)</span>
</div>);
}
return <GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' headerTemplate={orderIDTemplate} textAlign="Center" />
<ColumnDirective headerText='Order Details' columns={orderColumns} headerTemplate={orderDetail} width='150' />
<ColumnDirective headerText='Ship Details' width='150' columns={shipColumns} headerTemplate={shipDetail} />
</ColumnsDirective>
</GridComponent>
};
export default App;import { ColumnDirective, ColumnsDirective, ForeignKey, Grid, GridComponent, Inject, ColumnModel } from '@syncfusion/ej2-react-grids';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import React, { useState } from 'react';
import { data, employeeData } from './datasource';
import { ButtonComponent, SwitchComponent } from '@syncfusion/ej2-react-buttons';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
function App() {
const dropDownData: string[] = ['Order Details', 'Order Information'];
const orderColumns: any = [{
field: 'OrderDate',
headerText: 'Order Date',
format: 'yMd',
width: 130,
textAlign: 'Right',
minWidth: 10,
},
{
field: 'Freight',
headerText: 'Freight ($)',
width: 120,
format: 'C1',
textAlign: 'Right',
minWidth: 10,
}];
const shipColumns: any = [
{
field: 'ShipCity',
headerText: 'Ship City',
format: 'yMd',
textAlign: 'Right',
width: 150,
minWidth: 10,
},
{
field: 'ShipCountry',
headerText: 'Ship Country',
width: 150,
minWidth: 10,
}
]
const orderIDTemplate = () => {
return (<div>
<a href="#">OrderID</a>
</div>);
}
const orderDetail = () => {
return (<div>
<DropDownListComponent dataSource={dropDownData} index={0} width="130" />
</div>);
}
const shipDetail = () => {
return (<div>
<span>Ship Details</span>
<span>(<i className="fa fa-truck"></i>)</span>
</div>);
}
return <GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' headerTemplate={orderIDTemplate} textAlign="Center" />
<ColumnDirective headerText='Order Details' columns={orderColumns} headerTemplate={orderDetail} width='150' />
<ColumnDirective headerText='Ship Details' width='150' columns={shipColumns} headerTemplate={shipDetail} />
</ColumnsDirective>
</GridComponent>
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Align the text of header text
You can horizontally align the text in column headers of the Grid component using the headerTextAlign property. By default, the text is aligned to the left, but you can change the alignment by setting the value of the headerTextAlign property to one of the following options:
- Left: Aligns the text to the left (default).
- Center: Aligns the text to the center.
- Right: Aligns the text to the right.
- Justify: Header text is justified.
Here is an example of using the headerTextAlign property to align the text of a Grid column header:
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const alignmentData = [
{ text: 'Left', value: 'Left' },
{ text: 'Right', value: 'Right' },
{ text: 'Center', value: 'Center' },
{ text: 'Justify', value: 'Justify' },
];
const changeAlignment = ((args) => {
grid.columns.forEach(col => {
col.headerTextAlign = args.value;
});
grid.refreshHeader();
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Align the text for columns :</label>
<DropDownListComponent dataSource={alignmentData} index={0} width="100" change={changeAlignment}></DropDownListComponent>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent dataSource={data} height={315} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100' />
<ColumnDirective field='Freight' headerText='Freight' width='100' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd'/>
</ColumnsDirective>
</GridComponent></div></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: Grid | null;
const alignmentData: any = [
{ text: 'Left', value: 'Left' },
{ text: 'Right', value: 'Right' },
{ text: 'Center', value: 'Center' },
{ text: 'Justify', value: 'Justify' },
];
const changeAlignment = ((args: any) => {
(grid as any).columns.forEach((col: any) => {
col.headerTextAlign = (args as any).value;
});
(grid as any).refreshHeader();
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Align the text for columns :</label>
<DropDownListComponent dataSource={alignmentData} index={0} width="100" change={changeAlignment}></DropDownListComponent>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent dataSource={data} height={315} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100' />
<ColumnDirective field='Freight' headerText='Freight' width='100' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' />
</ColumnsDirective>
</GridComponent></div></div>)
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];
- The
headerTextAlignproperty only changes the alignment of the text in the column header, and not the content of the column. If you want to align both the column header and content, you can use the textAlign property.- You can also use the
headerTextAlignproperty with the stacked header feature in Syncfusion Grid. The property will align the header text in the sub-headers as well.
Autowrap the header text
The autowrap allows the cell content of the grid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Syncfusion Grid, you should set the appropriate width for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically.
To enable autowrap, set the allowTextWrap property to true. You can also configure the auto wrap mode by setting the textWrapSettings.wrapMode property.
Grid provides the below three options for configuring:
- Both: This is the default value for wrapMode. With this option, both the grid header text and content is wrapped.
- Header: With this option, only the grid header text is wrapped.
- Content: With this option, only the grid content is wrapped.
- If a ColumnDirective width is not specified, then the Autowrap of columns will be adjusted with respect to the grid’s width.
- If a ColumnDirective’s header text contains no white space, the text may not be wrapped.
- If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the headerTemplate and template properties of the column to customize the appearance of the header and cell content.
In the example below, the textWrapSettings.wrapMode property is set to Header only the grid header text is wrap to the next line.
import { ColumnDirective, ColumnsDirective, Grid, GridComponent, TextWrapSettingsModel} from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { inventoryData } from './datasource';
function App() {
let grid;
const wrapSettings = { wrapMode: 'Header' };
const dropDownData = [
{ text: 'Header', value: 'Header' },
{ text: 'Both', value: 'Both' },
];
const valueChange = ((args) => {
grid.textWrapSettings.wrapMode = args.value;
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Autowrap for header column :</label>
<DropDownListComponent dataSource={dropDownData} index={0} width="100" change={valueChange}></DropDownListComponent>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent dataSource={inventoryData} height={315} ref={g => grid = g} allowPaging={true} allowTextWrap={true} textWrapSettings={wrapSettings}>
<ColumnsDirective>
<ColumnDirective field='Inventor' headerText='Inventor' width='100' />
<ColumnDirective field='NumberofPatentFamilies' headerText='Number of Patent Families' width='100' />
<ColumnDirective field='Country' headerText='Country' width='100' />
<ColumnDirective field='Mainfieldsofinvention' headerText='Main fields of invention' width='140' />
</ColumnsDirective>
</GridComponent></div></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, Grid, GridComponent, TextWrapSettingsModel } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { inventoryData } from './datasource';
function App() {
let grid: Grid | null;
const wrapSettings: TextWrapSettingsModel = { wrapMode: 'Header' };
const dropDownData: any = [
{ text: 'Header', value: 'Header' },
{ text: 'Both', value: 'Both' },
];
const valueChange = ((args: any) => {
(grid as any).textWrapSettings.wrapMode = args.value;
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Autowrap for header column :</label>
<DropDownListComponent dataSource={dropDownData} index={0} width="100" change={valueChange}></DropDownListComponent>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent dataSource={inventoryData} height={315} ref={g => grid = g} allowPaging={true} allowTextWrap={true} textWrapSettings={wrapSettings}>
<ColumnsDirective>
<ColumnDirective field='Inventor' headerText='Inventor' width='100' />
<ColumnDirective field='NumberofPatentFamilies' headerText='Number of Patent Families' width='100' />
<ColumnDirective field='Country' headerText='Country' width='100' />
<ColumnDirective field='Mainfieldsofinvention' headerText='Main fields of invention' width='140' />
</ColumnsDirective>
</GridComponent></div></div>)
}
export default App;export var inventoryData = [
{
"Inventor": "Kia Silverbrook",
"NumberofPatentFamilies": 4737,
"Country": "Australia",
"Number of INPADOC patents": 9839,
"Active": "1994-2016",
"Mainfieldsofinvention": "Printing, Digital paper, Internet, Electronics,Lab-on-a-chip, MEMS, Mechanical, VLSI",
},
{
"Inventor": "Shunpei Yamazaki",
"NumberofPatentFamilies": 4677,
"Country": "Japan",
"Number of INPADOC patents": "10000+",
"Active": "1976-2016",
"Mainfieldsofinvention": "Thin film transistors, Liquid crystal displays, Solar cells, Flash memory, OLED",
},
{
"Inventor": "Lowell L. Wood, Jr.",
"NumberofPatentFamilies": 1419,
"Country": "USA",
"Number of INPADOC patents": 1332,
"Active": "1977-2016",
"Mainfieldsofinvention": "Mosquito laser, Nuclear weapons",
},
{
"Inventor": "Paul Lapstun",
"NumberofPatentFamilies": 1281,
"Country": "Australia",
"Number of INPADOC patents": 3099,
"Active": "2000-2016",
"Mainfieldsofinvention": "Printing, Digital paper, Internet, Electronics, CGI, VLSI",
},
{
"Inventor": "Gurtej Sandhu",
"NumberofPatentFamilies": 1255,
"Country": "India",
"Number of INPADOC patents": 2038,
"Active": "1991-2016",
"Mainfieldsofinvention": "Thin film processes and materials, VLSI, Semiconductor device fabrication",
},
{
"Inventor": "Jun Koyama",
"NumberofPatentFamilies": 1240,
"Country": "Japan",
"Number of INPADOC patents": 4126,
"Active": "1991-2016",
"Mainfieldsofinvention": "Thin film transistors, Liquid crystal displays, OLED",
},
{
"Inventor": "Roderick A. Hyde",
"NumberofPatentFamilies": 1240,
"Country": "USA",
"Number of INPADOC patents": 3360,
"Active": "2001-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Leonard Forbes",
"NumberofPatentFamilies": 1093,
"Country": "Canada",
"Number of INPADOC patents": 1398,
"Active": "1991-2016",
"Mainfieldsofinvention": "Semiconductor Memories, CCDs, Thin film processes and materials, VLSI",
},
{
"Inventor": "Thomas Edison",
"NumberofPatentFamilies": 1084,
"Country": "USA",
"Number of INPADOC patents": 2332,
"Active": "1847(b)-1931(d)",
"Mainfieldsofinvention": "Electric power, Lighting, Batteries, Phonograph, Cement, Telegraphy, Mining",
},
{
"Inventor": "Donald E. Weder",
"NumberofPatentFamilies": 999,
"Country": "USA",
"Number of INPADOC patents": 1993,
"Active": "1976-2015",
"Mainfieldsofinvention": "Florist supplies",
},
{
"Inventor": "George Albert Lyon",
"NumberofPatentFamilies": 993,
"Country": "Canada",
"Number of INPADOC patents": "NA",
"Active": "1882(b)-1961(d)",
"Mainfieldsofinvention": "Automotive, Stainless steel products",
},
{
"Inventor": "John F. O'Connor",
"NumberofPatentFamilies": 949,
"Country": "USA",
"Number of INPADOC patents": "NA",
"Active": "1864(b)-1938(d)",
"Mainfieldsofinvention": "Railway draft gearing",
},
{
"Inventor": "Melvin De Groote",
"NumberofPatentFamilies": 925,
"Country": "USA",
"Number of INPADOC patents": "NA",
"Active": "1895(b)-1963(d)",
"Mainfieldsofinvention": "Chemical de-emulsifiers",
},
{
"Inventor": "Jay S. Walker",
"NumberofPatentFamilies": 918,
"Country": "USA",
"Number of INPADOC patents": 2206,
"Active": "1998-2016",
"Mainfieldsofinvention": "Gaming machines",
},
{
"Inventor": "Edward K. Y. Jung",
"NumberofPatentFamilies": 911,
"Country": "USA",
"Number of INPADOC patents": 2254,
"Active": "1996-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Francis H. Richards",
"NumberofPatentFamilies": 894,
"Country": "USA",
"Number of INPADOC patents": "NA",
"Active": "1850(b)-19??(d)",
"Mainfieldsofinvention": "Mechanical, automation",
},
{
"Inventor": "Kangguo Cheng",
"NumberofPatentFamilies": 884,
"Country": "USA",
"Number of INPADOC patents": 1314,
"Active": "2004-2016",
"Mainfieldsofinvention": "Semiconductor device fabrication, Semiconductor memory, Semiconductor device",
},
{
"Inventor": "Clarence T. Tegreene",
"NumberofPatentFamilies": 872,
"Country": "USA",
"Number of INPADOC patents": 2255,
"Active": "2000-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Ahmadreza Rofougaran",
"NumberofPatentFamilies": 808,
"Country": "USA",
"Number of INPADOC patents": 1396,
"Active": "2002-2016",
"Mainfieldsofinvention": "Radio Frequency Integrated Circuits",
},
{
"Inventor": "Shou-Shan Fan",
"NumberofPatentFamilies": 805,
"Country": "China",
"Number of INPADOC patents": 2120,
"Active": "2006-2016",
"Mainfieldsofinvention": "Carbon nanotubes and applications of carbon nanotubes",
},
{
"Inventor": "Michael J. Sullivan",
"NumberofPatentFamilies": 788,
"Country": "USA",
"Number of INPADOC patents": 1560,
"Active": "1977-2016",
"Mainfieldsofinvention": "Golf balls",
},
{
"Inventor": "Rick Allen Hamilton II",
"NumberofPatentFamilies": 773,
"Country": "USA",
"Number of INPADOC patents": 1064,
"Active": "1999-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Warren Farnworth",
"NumberofPatentFamilies": 770,
"Country": "USA",
"Number of INPADOC patents": 931,
"Active": "1990-2016",
"Mainfieldsofinvention": "Semiconductor packaging",
},
{
"Inventor": "Carleton Ellis",
"NumberofPatentFamilies": 753,
"Country": "USA",
"Number of INPADOC patents": "NA",
"Active": "1876(b)-1941(d)",
"Mainfieldsofinvention": "Margarine, Polyester, Anti-knock gasoline, Paint stripper",
},
{
"Inventor": "William H. Eby",
"NumberofPatentFamilies": 733,
"Country": "USA",
"Number of INPADOC patents": 758,
"Active": "1994-2016",
"Mainfieldsofinvention": "Transgenic soybeans",
},
{
"Inventor": "Hideo Ando",
"NumberofPatentFamilies": 728,
"Country": "Japan",
"Number of INPADOC patents": 2588,
"Active": "1983-2016",
"Mainfieldsofinvention": "Optical recording",
},
{
"Inventor": "Salman Akram",
"NumberofPatentFamilies": 728,
"Country": "USA",
"Number of INPADOC patents": 915,
"Active": "1995-2016",
"Mainfieldsofinvention": "Semiconductor packaging",
},
{
"Inventor": "George Spector",
"NumberofPatentFamilies": 722,
"Country": "USA",
"Number of INPADOC patents": 747,
"Active": "1976-1998",
"Mainfieldsofinvention": "Gadgets, Toys",
},
{
"Inventor": "Jeyhan Karaoguz",
"NumberofPatentFamilies": 721,
"Country": "USA",
"Number of INPADOC patents": 1530,
"Active": "1996-2016",
"Mainfieldsofinvention": "Wireless communications, Computer networks",
},
{
"Inventor": "Elihu Thomson",
"NumberofPatentFamilies": 696,
"Country": "UK",
"Number of INPADOC patents": "NA",
"Active": "1853(b)-1937(d)",
"Mainfieldsofinvention": "Electric power, Arc lamp, Electric motors, Lightning arrester, Arc welder",
},
{
"Inventor": "Austin L. Gurney",
"NumberofPatentFamilies": 695,
"Country": "USA",
"Number of INPADOC patents": 3909,
"Active": "1999-2016",
"Mainfieldsofinvention": "Proteins, Antibodies",
},
{
"Inventor": "Tetsujiro Kondo",
"NumberofPatentFamilies": 684,
"Country": "Japan",
"Number of INPADOC patents": 4158,
"Active": "1987-2015",
"Mainfieldsofinvention": "Signal processing, Image processing",
},
{
"Inventor": "Nathan Myhrvold",
"NumberofPatentFamilies": 661,
"Country": "USA",
"Number of INPADOC patents": 1690,
"Active": "1994-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "William I. Wood",
"NumberofPatentFamilies": 653,
"Country": "USA",
"Number of INPADOC patents": 3560,
"Active": "1981-2016",
"Mainfieldsofinvention": "Proteins, Antibodies",
},
{
"Inventor": "Simon R. Walmsley",
"NumberofPatentFamilies": 651,
"Country": "Australia",
"Number of INPADOC patents": 1249,
"Active": "1995-2015",
"Mainfieldsofinvention": "Printing, Electronics, VLSI, Cryptography",
},
{
"Inventor": "Mark Malamud",
"NumberofPatentFamilies": 632,
"Country": "USA",
"Number of INPADOC patents": 1759,
"Active": "1997-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Royce A. Levien",
"NumberofPatentFamilies": 630,
"Country": "USA",
"Number of INPADOC patents": 1799,
"Active": "1997-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Audrey D. Goddard",
"NumberofPatentFamilies": 622,
"Country": "USA",
"Number of INPADOC patents": 3416,
"Active": "1997-2014",
"Mainfieldsofinvention": "Proteins, Antibodies",
},
{
"Inventor": "Muriel Y. Ishikawa",
"NumberofPatentFamilies": 619,
"Country": "USA",
"Number of INPADOC patents": 1660,
"Active": "2002-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Robert W. Lord",
"NumberofPatentFamilies": 618,
"Country": "USA",
"Number of INPADOC patents": 1708,
"Active": "2003-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Jerome Lemelson",
"NumberofPatentFamilies": 606,
"Country": "USA",
"Number of INPADOC patents": "NA",
"Active": "1923(b)-1997(d)",
"Mainfieldsofinvention": "Toys, Industrial robots, Cordless telephones, Fax machines, Videocassette recorders",
},
{
"Inventor": "Béla Barényi",
"NumberofPatentFamilies": 595,
"Country": "Austria",
"Number of INPADOC patents": 1244,
"Active": "1907(b)-1997(d)",
"Mainfieldsofinvention": "Passive safety in automobiles",
},
{
"Inventor": "Kie Y Ahn",
"NumberofPatentFamilies": 593,
"Country": "USA",
"Number of INPADOC patents": 709,
"Active": "1976-2016",
"Mainfieldsofinvention": "Thin film processes and materials, VLSI, Semiconductor device fabrication",
},
{
"Inventor": "Tadahiro Ohmi",
"NumberofPatentFamilies": 592,
"Country": "Japan",
"Number of INPADOC patents": 2691,
"Active": "1981-2016",
"Mainfieldsofinvention": "Thin film processes and materials, Semiconductor device fabrication",
},
{
"Inventor": "Jordin T. Kare",
"NumberofPatentFamilies": 585,
"Country": "USA",
"Number of INPADOC patents": 1559,
"Active": "1992-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Paul J. Godowski",
"NumberofPatentFamilies": 579,
"Country": "USA",
"Number of INPADOC patents": 2605,
"Active": "1994-2014",
"Mainfieldsofinvention": "Proteins, Antibodies",
},
{
"Inventor": "Artur Fischer",
"NumberofPatentFamilies": 570,
"Country": "Germany",
"Number of INPADOC patents": 3097,
"Active": "1976-2002",
"Mainfieldsofinvention": "Fasteners, Construction toys",
},
{
"Inventor": "Edward J. Nowak",
"NumberofPatentFamilies": 564,
"Country": "USA",
"Number of INPADOC patents": 1145,
"Active": "1979-2016",
"Mainfieldsofinvention": "Semiconductor device fabrication, Semiconductor memory, Semiconductor device",
},
{
"Inventor": "Louis L. Hsu",
"NumberofPatentFamilies": 551,
"Country": "USA",
"Number of INPADOC patents": 914,
"Active": "1988-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Edwin H. Land",
"NumberofPatentFamilies": 535,
"Country": "USA",
"Number of INPADOC patents": 1236,
"Active": "1909(b)-1991(d)",
"Mainfieldsofinvention": "Instant photography, Polarizing film",
},
{
"Inventor": "Henri Dreyfus",
"NumberofPatentFamilies": 524,
"Country": "Switzerland",
"Number of INPADOC patents": 2117,
"Active": "1882(b)-1944(d)",
"Mainfieldsofinvention": "Polymers, Synthetic fibers, Dyes",
},
{
"Inventor": "Bruce B. Doris",
"NumberofPatentFamilies": 522,
"Country": "USA",
"Number of INPADOC patents": 867,
"Active": "1995-2016",
"Mainfieldsofinvention": "Integrated Circuits, CMOS, DRAM, Semiconductor device fabrication",
},
{
"Inventor": "Clyde C. Farmer",
"NumberofPatentFamilies": 513,
"Country": "USA",
"Number of INPADOC patents": 830,
"Active": "18??(b)-19??(d)",
"Mainfieldsofinvention": "Railway air brakes",
},
{
"Inventor": "Heinz Focke",
"NumberofPatentFamilies": 512,
"Country": "Germany",
"Number of INPADOC patents": 2896,
"Active": "1976-2013",
"Mainfieldsofinvention": "Cigarette packaging",
},
{
"Inventor": "Mark I. Gardner",
"NumberofPatentFamilies": 511,
"Country": "USA",
"Number of INPADOC patents": 587,
"Active": "1994-2010",
"Mainfieldsofinvention": "Consumer electronics, Energy, Computers, Semiconductors, Physics",
},
{
"Inventor": "Ravi K. Arimilli",
"NumberofPatentFamilies": 506,
"Country": "India",
"Number of INPADOC patents": 767,
"Active": "1992-2016",
"Mainfieldsofinvention": "Computer architecture, Semiconductor memory, Cache coherence, Symmetric multiprocessing",
},
{
"Inventor": "Louis H. Morin",
"NumberofPatentFamilies": 503,
"Country": "USA",
"Number of INPADOC patents": 720,
"Active": "18??(b)-19??(d)",
"Mainfieldsofinvention": "Fasteners, Locks, Bobbins",
},
{
"Inventor": "Tobin A. King",
"NumberofPatentFamilies": 497,
"Country": "Australia",
"Number of INPADOC patents": 1218,
"Active": "2000-2015",
"Mainfieldsofinvention": "Printing, Digital paper, Mechanical",
},
{
"Inventor": "Eric C. Leuthardt",
"NumberofPatentFamilies": 495,
"Country": "USA",
"Number of INPADOC patents": 1274,
"Active": "2006-2016",
"Mainfieldsofinvention": "Medical devices",
},
{
"Inventor": "Ali Khakifirooz",
"NumberofPatentFamilies": 489,
"Country": "USA",
"Number of INPADOC patents": 737,
"Active": "2011-2016",
"Mainfieldsofinvention": "Integrated Circuits, CMOS, Semiconductor device fabrication",
},
{
"Inventor": "Jack A. Mandelman",
"NumberofPatentFamilies": 481,
"Country": "USA",
"Number of INPADOC patents": 889,
"Active": "1987-2014",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Jeffrey P. Gambino",
"NumberofPatentFamilies": 479,
"Country": "USA",
"Number of INPADOC patents": 798,
"Active": "1992-2016",
"Mainfieldsofinvention": "MEMS, CMOS, BiCMOS, DRAM, Image Sensors, RF, Biosensors, 3D Integrated Circuits",
},
{
"Inventor": "John M. Santosuosso",
"NumberofPatentFamilies": 473,
"Country": "USA",
"Number of INPADOC patents": 683,
"Active": "2001-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "James M. Hart",
"NumberofPatentFamilies": 464,
"Country": "USA",
"Number of INPADOC patents": 1145,
"Active": "1988-2016",
"Mainfieldsofinvention": "Motor vehicle transmission",
},
{
"Inventor": "Eberhard Ammermann",
"NumberofPatentFamilies": 451,
"Country": "Germany",
"Number of INPADOC patents": 5178,
"Active": "1979-2015",
"Mainfieldsofinvention": "Fungicides",
},
{
"Inventor": "Thomas E. Murray",
"NumberofPatentFamilies": 449,
"Country": "USA",
"Number of INPADOC patents": 462,
"Active": "1860(b)-1929(d)",
"Mainfieldsofinvention": "Electrical, HVAC, Wheels, Metal working, Light dimmer",
},
{
"Inventor": "Akira Nakazawa",
"NumberofPatentFamilies": 445,
"Country": "Australia",
"Number of INPADOC patents": 1340,
"Active": "1980-2016",
"Mainfieldsofinvention": "Printing, Mechanical",
},
{
"Inventor": "Hongyong Zhang",
"NumberofPatentFamilies": 440,
"Country": "Japan",
"Number of INPADOC patents": 858,
"Active": "1993-2016",
"Mainfieldsofinvention": "Thin film transistors, Liquid crystal displays",
},
{
"Inventor": "Ronald S. Cok",
"NumberofPatentFamilies": 436,
"Country": "USA",
"Number of INPADOC patents": 747,
"Active": "1986-2016",
"Mainfieldsofinvention": "OLED displays; image processing",
},
{
"Inventor": "fe",
"NumberofPatentFamilies": 430,
"Country": "USA",
"Number of INPADOC patents": 1759,
"Active": "1983-2016",
"Mainfieldsofinvention": "Biotechnology, Drug delivery, Tissue engineering",
},
{
"Inventor": "Scott H. Wittkopp",
"NumberofPatentFamilies": 429,
"Country": "USA",
"Number of INPADOC patents": 1010,
"Active": "2001-2016",
"Mainfieldsofinvention": "Motor vehicle transmission",
},
{
"Inventor": "John Hays Hammond, Jr.",
"NumberofPatentFamilies": 417,
"Country": "USA",
"Number of INPADOC patents": 460,
"Active": "1888(b)-1965(d)",
"Mainfieldsofinvention": "Radio control, Radio communications, Torpedoes",
},
{
"Inventor": "Wilhelm Brandes",
"NumberofPatentFamilies": 411,
"Country": "Germany",
"Number of INPADOC patents": 2923,
"Active": "1976-2010",
"Mainfieldsofinvention": "Fungicides",
},
{
"Inventor": "Anthony K. Stamper",
"NumberofPatentFamilies": 411,
"Country": "USA",
"Number of INPADOC patents": 726,
"Active": "1998-2016",
"Mainfieldsofinvention": "MEMS, CMOS, BiCMOS, Silicon-germanium",
},
{
"Inventor": "Hossein Eslambolchi",
"NumberofPatentFamilies": 410,
"Country": "USA",
"Number of INPADOC patents": 631,
"Active": "1993-2016",
"Mainfieldsofinvention": "Telecommunications, Network intelligence, information Technology, communications technology",
},
{
"Inventor": "Stanford R. Ovshinsky",
"NumberofPatentFamilies": 400,
"Country": "USA",
"Number of INPADOC patents": 1649,
"Active": "1922(b)-2012(d)",
"Mainfieldsofinvention": "Batteries, Solar cells, Liquid crystal displays, Hydrogen fuel cells, Computer data storage",
},
{
"Inventor": "Victoria Y. H. Wood",
"NumberofPatentFamilies": 400,
"Country": "USA",
"Number of INPADOC patents": 1045,
"Active": "2009-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Josef Theurer",
"NumberofPatentFamilies": 388,
"Country": "Austria",
"Number of INPADOC patents": 5085,
"Active": "1976-2016",
"Mainfieldsofinvention": "Railroad maintenance machines",
},
{
"Inventor": "Cary L. Bates",
"NumberofPatentFamilies": 384,
"Country": "USA",
"Number of INPADOC patents": 570,
"Active": "1994-2016",
"Mainfieldsofinvention": "Programming tools, DBX, Memory debuggers",
},
{
"Inventor": "David V. Horak",
"NumberofPatentFamilies": 380,
"Country": "USA",
"Number of INPADOC patents": 616,
"Active": "1992-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Kai-Li Jiang",
"NumberofPatentFamilies": 379,
"Country": "China",
"Number of INPADOC patents": 829,
"Active": "2006-2016",
"Mainfieldsofinvention": "Carbon nanotubes and applications of carbon nanotubes",
},
{
"Inventor": "Hans-Joachim Santel",
"NumberofPatentFamilies": 377,
"Country": "Germany",
"Number of INPADOC patents": 2623,
"Active": "1986-2013",
"Mainfieldsofinvention": "Herbicides, Pesticides, Organic chemistry",
},
{
"Inventor": "Xuemin (Sherman) Chen",
"NumberofPatentFamilies": 377,
"Country": "USA",
"Number of INPADOC patents": 1151,
"Active": "1997-2017",
"Mainfieldsofinvention": "Computer networks, Integrated Circuits, Signal Processing",
},
{
"Inventor": "George P. Liang",
"NumberofPatentFamilies": 375,
"Country": "China",
"Number of INPADOC patents": 508,
"Active": "1983-2016",
"Mainfieldsofinvention": "Gas turbine cooling",
},
{
"Inventor": "Gisela Lorenz",
"NumberofPatentFamilies": 374,
"Country": "Germany",
"Number of INPADOC patents": 4155,
"Active": "1990-2015",
"Mainfieldsofinvention": "Fungicides, Organic chemistry",
},
{
"Inventor": "Garry R. Jackson",
"NumberofPatentFamilies": 367,
"Country": "Australia",
"Number of INPADOC patents": 656,
"Active": "2001-2016",
"Mainfieldsofinvention": "Printing, Mechanical",
},
{
"Inventor": "Paul W. Dent",
"NumberofPatentFamilies": 362,
"Country": "USA",
"Number of INPADOC patents": 2252,
"Active": "1984-2015",
"Mainfieldsofinvention": "Wireless communications",
},
{
"Inventor": "George Westinghouse",
"NumberofPatentFamilies": 361,
"Country": "USA",
"Number of INPADOC patents": "NA",
"Active": "1846(b)-1914(d)",
"Mainfieldsofinvention": "Electric power, Electricity meter, Railway air brake, Steam engines",
},
{
"Inventor": "Wael W. Diab",
"NumberofPatentFamilies": 358,
"Country": "USA",
"Number of INPADOC patents": 774,
"Active": "2003-2016",
"Mainfieldsofinvention": "Computer networks",
},
{
"Inventor": "Devendra K. Sadana",
"NumberofPatentFamilies": 356,
"Country": "India",
"Number of INPADOC patents": 794,
"Active": "1983-2016",
"Mainfieldsofinvention": "Solar cells, OLED, Integrated Circuits, CMOS, DRAM, LEDs",
},
{
"Inventor": "Vincent J. Zimmer",
"NumberofPatentFamilies": 354,
"Country": "USA",
"Number of INPADOC patents": 972,
"Active": "1999-2016",
"Mainfieldsofinvention": "Computer software and firmware",
},
{
"Inventor": "Robert R. Schmidt",
"NumberofPatentFamilies": 350,
"Country": "Germany",
"Number of INPADOC patents": 2467,
"Active": "1971-2005",
"Mainfieldsofinvention": "Herbicides, Fungicides, Organic chemistry",
},
{
"Inventor": "Norman M. Berry",
"NumberofPatentFamilies": 347,
"Country": "Australia",
"Number of INPADOC patents": 516,
"Active": "2006-2016",
"Mainfieldsofinvention": "Printing, Mechanical",
},
{
"Inventor": "Chih-Chao Yang",
"NumberofPatentFamilies": 345,
"Country": "USA",
"Number of INPADOC patents": 690,
"Active": "2003-2016",
"Mainfieldsofinvention": "Integrated Circuits",
},
{
"Inventor": "Gregory J. Boss",
"NumberofPatentFamilies": 345,
"Country": "USA",
"Number of INPADOC patents": 588,
"Active": "2008-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Mark W. Kroll",
"NumberofPatentFamilies": 343,
"Country": "USA",
"Number of INPADOC patents": 460,
"Active": "1987-2016",
"Mainfieldsofinvention": "Implantable medical devices",
},
{
"Inventor": "Brian M. O'Connell",
"NumberofPatentFamilies": 331,
"Country": "USA",
"Number of INPADOC patents": 592,
"Active": "2009-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "William Daniel Hillis",
"NumberofPatentFamilies": 328,
"Country": "USA",
"Number of INPADOC patents": 229,
"Active": "1986-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Brent A. Anderson",
"NumberofPatentFamilies": 323,
"Country": "USA",
"Number of INPADOC patents": 454,
"Active": "2001-2016",
"Mainfieldsofinvention": "Semiconductor device fabrication, Semiconductor memory, Semiconductor device",
},
{
"Inventor": "Jeffrey E. Stahmann",
"NumberofPatentFamilies": 321,
"Country": "USA",
"Number of INPADOC patents": 640,
"Active": "1994-2016",
"Mainfieldsofinvention": "Medical devices",
},
{
"Inventor": "Carl J. Radens",
"NumberofPatentFamilies": 317,
"Country": "USA",
"Number of INPADOC patents": 636,
"Active": "1994-2016",
"Mainfieldsofinvention": "Integrated Circuits, CMOS, DRAM, Semiconductor device fabrication",
},
{
"Inventor": "Clifford A. Pickover",
"NumberofPatentFamilies": 317,
"Country": "USA",
"Number of INPADOC patents": 653,
"Active": "1992-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Liang Liu",
"NumberofPatentFamilies": 310,
"Country": "China",
"Number of INPADOC patents": 777,
"Active": "2005-2016",
"Mainfieldsofinvention": "Carbon nanotubes and applications of carbon nanotubes",
},
{
"Inventor": "Steven L. Teig",
"NumberofPatentFamilies": 307,
"Country": "USA",
"Number of INPADOC patents": 366,
"Active": "1995-2016",
"Mainfieldsofinvention": "Integrated Circuits",
},
{
"Inventor": "Victoria Smith",
"NumberofPatentFamilies": 305,
"Country": "USA",
"Number of INPADOC patents": 2040,
"Active": "2006-2016",
"Mainfieldsofinvention": "Proteins, Antibodies",
},
{
"Inventor": "Robert G. LeTourneau",
"NumberofPatentFamilies": 299,
"Country": "USA",
"Number of INPADOC patents": "NA",
"Active": "1888(b)-1969(d)",
"Mainfieldsofinvention": "Earthworks (engineering), Heavy Equipment, Industrial Machinery",
},
{
"Inventor": "William R. Tonti",
"NumberofPatentFamilies": 291,
"Country": "USA",
"Number of INPADOC patents": 441,
"Active": "1994-2016",
"Mainfieldsofinvention": "Integrated Circuits, CMOS, DRAM, Semiconductor device fabrication",
},
{
"Inventor": "Keith R. Walker",
"NumberofPatentFamilies": 282,
"Country": "Saudi Arabia",
"Number of INPADOC patents": 318,
"Active": "2003-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Victor S. Moore",
"NumberofPatentFamilies": 280,
"Country": "USA",
"Number of INPADOC patents": 428,
"Active": "1982-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Hanson S. Gifford III",
"NumberofPatentFamilies": 276,
"Country": "USA",
"Number of INPADOC patents": 795,
"Active": "1987-2016",
"Mainfieldsofinvention": "Medical Devices",
},
{
"Inventor": "Daniel J. Winarski",
"NumberofPatentFamilies": 275,
"Country": "USA",
"Number of INPADOC patents": 506,
"Active": "1982-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Adam Heller",
"NumberofPatentFamilies": 272,
"Country": "Romania",
"Number of INPADOC patents": 711,
"Active": "1968-2016",
"Mainfieldsofinvention": "Solar cells, Glucose meters, Lasers",
},
{
"Inventor": "Lisa Seacat DeLuca",
"NumberofPatentFamilies": 271,
"Country": "USA",
"Number of INPADOC patents": 385,
"Active": "2009-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Brent Keeth",
"NumberofPatentFamilies": 270,
"Country": "USA",
"Number of INPADOC patents": 470,
"Active": "1994-2016",
"Mainfieldsofinvention": "Integrated Circuits, CMOS, DRAM",
},
{
"Inventor": "Hartley Owen",
"NumberofPatentFamilies": 267,
"Country": "USA",
"Number of INPADOC patents": 751,
"Active": "1976-2010",
"Mainfieldsofinvention": "Fluid catalytic cracking",
},
{
"Inventor": "Michael A. Rothman",
"NumberofPatentFamilies": 256,
"Country": "USA",
"Number of INPADOC patents": 687,
"Active": "2001-2017",
"Mainfieldsofinvention": "Computer software and firmware",
},
{
"Inventor": "Yoshihiro Kikuchi",
"NumberofPatentFamilies": 255,
"Country": "Japan",
"Number of INPADOC patents": 1120,
"Active": "1994-2015",
"Mainfieldsofinvention": "Video processing",
},
{
"Inventor": "Kulvir S. Bhogal",
"NumberofPatentFamilies": 252,
"Country": "USA",
"Number of INPADOC patents": 486,
"Active": "2003-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Bengt Lindoff",
"NumberofPatentFamilies": 248,
"Country": "Sweden",
"Number of INPADOC patents": 1658,
"Active": "2000-2017",
"Mainfieldsofinvention": "Wireless communications",
},
{
"Inventor": "Nobuyuki Taniguchi",
"NumberofPatentFamilies": 245,
"Country": "Japan",
"Number of INPADOC patents": 967,
"Active": "1979-2015",
"Mainfieldsofinvention": "Cameras",
},
{
"Inventor": "Dean L. Kamen",
"NumberofPatentFamilies": 243,
"Country": "USA",
"Number of INPADOC patents": 1186,
"Active": "1979-2016",
"Mainfieldsofinvention": "Battery-powered electric vehicles, Medical devices, Stirling engines, Water purification, Wheelchairs",
},
{
"Inventor": "Philip S. Yu",
"NumberofPatentFamilies": 236,
"Country": "USA",
"Number of INPADOC patents": 158,
"Active": "1982-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Rajiv V. Joshi",
"NumberofPatentFamilies": 235,
"Country": "USA",
"Number of INPADOC patents": 354,
"Active": "1986-2016",
"Mainfieldsofinvention": "Electronics, analytics",
},
{
"Inventor": "Lawrence A. Clevenger",
"NumberofPatentFamilies": 235,
"Country": "USA",
"Number of INPADOC patents": 526,
"Active": "1996-2017",
"Mainfieldsofinvention": "Semiconductor, Cognitive, Memory, Security, Analytics",
},
{
"Inventor": "Johnny M. Shieh",
"NumberofPatentFamilies": 231,
"Country": "USA",
"Number of INPADOC patents": 444,
"Active": "1996-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Takeshi Chujoh",
"NumberofPatentFamilies": 229,
"Country": "Japan",
"Number of INPADOC patents": 1065,
"Active": "1995-2016",
"Mainfieldsofinvention": "Video processing",
},
{
"Inventor": "Bran Ferren",
"NumberofPatentFamilies": 225,
"Country": "USA",
"Number of INPADOC patents": 589,
"Active": "1986-2017",
"Mainfieldsofinvention": "Computers, Consumer Electronics, Optical Systems, Medical, User Interfaces, Automotive",
},
{
"Inventor": "Paul Ian Mackey",
"NumberofPatentFamilies": 220,
"Country": "Australia",
"Number of INPADOC patents": 246,
"Active": "2008-2016",
"Mainfieldsofinvention": "Printing, Mechanical",
},
{
"Inventor": "Louis Rosenberg",
"NumberofPatentFamilies": 218,
"Country": "USA",
"Number of INPADOC patents": 444,
"Active": "1995-2016",
"Mainfieldsofinvention": "Augmented Reality, Virtual Reality, A.I., HCI",
},
{
"Inventor": "Thomas J. Kennedy III",
"NumberofPatentFamilies": 218,
"Country": "USA",
"Number of INPADOC patents": 513,
"Active": "1992-2016",
"Mainfieldsofinvention": "Sporting Goods, Wind Turbines",
},
{
"Inventor": "Gerald F. McBrearty",
"NumberofPatentFamilies": 213,
"Country": "USA",
"Number of INPADOC patents": 387,
"Active": "1997-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Esmael H. Dinan",
"NumberofPatentFamilies": 208,
"Country": "USA",
"Number of INPADOC patents": 344,
"Active": "2000-2017",
"Mainfieldsofinvention": "Communication Networks",
},
{
"Inventor": "Imad Libbus",
"NumberofPatentFamilies": 207,
"Country": "USA",
"Number of INPADOC patents": 472,
"Active": "2007-2017",
"Mainfieldsofinvention": "Medical devices",
},
{
"Inventor": "Hiroshi (You) Yoshioka",
"NumberofPatentFamilies": 205,
"Country": "Japan",
"Number of INPADOC patents": 181,
"Active": "1997-2015",
"Mainfieldsofinvention": "Cameras",
},
{
"Inventor": "Patrick B. Usoro",
"NumberofPatentFamilies": 205,
"Country": "USA",
"Number of INPADOC patents": 343,
"Active": "1999-2016",
"Mainfieldsofinvention": "Transmissions, Hybrid Powertrains, Vehicle Thermal Management",
},
{
"Inventor": "Gregory McAvoy",
"NumberofPatentFamilies": 205,
"Country": "Australia",
"Number of INPADOC patents": 433,
"Active": "2003-2014",
"Mainfieldsofinvention": "Printing, MEMS",
},
{
"Inventor": "Sebastian T Ventrone",
"NumberofPatentFamilies": 204,
"Country": "USA",
"Number of INPADOC patents": 283,
"Active": "1989-2017",
"Mainfieldsofinvention": "Semiconductor, Logic, Architecture",
},
{
"Inventor": "Dorin Comaniciu",
"NumberofPatentFamilies": 200,
"Country": "USA",
"Number of INPADOC patents": 452,
"Active": "2003-2017",
"Mainfieldsofinvention": "Machine Intelligence, Medical Imaging, Image-Guided Surgery, Computer Vision",
}
];export var inventoryData = [
{
"Inventor": "Kia Silverbrook",
"NumberofPatentFamilies": 4737,
"Country": "Australia",
"Number of INPADOC patents": 9839,
"Active": "1994-2016",
"Mainfieldsofinvention": "Printing, Digital paper, Internet, Electronics,Lab-on-a-chip, MEMS, Mechanical, VLSI",
},
{
"Inventor": "Shunpei Yamazaki",
"NumberofPatentFamilies": 4677,
"Country": "Japan",
"Number of INPADOC patents": "10000+",
"Active": "1976-2016",
"Mainfieldsofinvention": "Thin film transistors, Liquid crystal displays, Solar cells, Flash memory, OLED",
},
{
"Inventor": "Lowell L. Wood, Jr.",
"NumberofPatentFamilies": 1419,
"Country": "USA",
"Number of INPADOC patents": 1332,
"Active": "1977-2016",
"Mainfieldsofinvention": "Mosquito laser, Nuclear weapons",
},
{
"Inventor": "Paul Lapstun",
"NumberofPatentFamilies": 1281,
"Country": "Australia",
"Number of INPADOC patents": 3099,
"Active": "2000-2016",
"Mainfieldsofinvention": "Printing, Digital paper, Internet, Electronics, CGI, VLSI",
},
{
"Inventor": "Gurtej Sandhu",
"NumberofPatentFamilies": 1255,
"Country": "India",
"Number of INPADOC patents": 2038,
"Active": "1991-2016",
"Mainfieldsofinvention": "Thin film processes and materials, VLSI, Semiconductor device fabrication",
},
{
"Inventor": "Jun Koyama",
"NumberofPatentFamilies": 1240,
"Country": "Japan",
"Number of INPADOC patents": 4126,
"Active": "1991-2016",
"Mainfieldsofinvention": "Thin film transistors, Liquid crystal displays, OLED",
},
{
"Inventor": "Roderick A. Hyde",
"NumberofPatentFamilies": 1240,
"Country": "USA",
"Number of INPADOC patents": 3360,
"Active": "2001-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Leonard Forbes",
"NumberofPatentFamilies": 1093,
"Country": "Canada",
"Number of INPADOC patents": 1398,
"Active": "1991-2016",
"Mainfieldsofinvention": "Semiconductor Memories, CCDs, Thin film processes and materials, VLSI",
},
{
"Inventor": "Thomas Edison",
"NumberofPatentFamilies": 1084,
"Country": "USA",
"Number of INPADOC patents": 2332,
"Active": "1847(b)-1931(d)",
"Mainfieldsofinvention": "Electric power, Lighting, Batteries, Phonograph, Cement, Telegraphy, Mining",
},
{
"Inventor": "Donald E. Weder",
"NumberofPatentFamilies": 999,
"Country": "USA",
"Number of INPADOC patents": 1993,
"Active": "1976-2015",
"Mainfieldsofinvention": "Florist supplies",
},
{
"Inventor": "George Albert Lyon",
"NumberofPatentFamilies": 993,
"Country": "Canada",
"Number of INPADOC patents": "NA",
"Active": "1882(b)-1961(d)",
"Mainfieldsofinvention": "Automotive, Stainless steel products",
},
{
"Inventor": "John F. O'Connor",
"NumberofPatentFamilies": 949,
"Country": "USA",
"Number of INPADOC patents": "NA",
"Active": "1864(b)-1938(d)",
"Mainfieldsofinvention": "Railway draft gearing",
},
{
"Inventor": "Melvin De Groote",
"NumberofPatentFamilies": 925,
"Country": "USA",
"Number of INPADOC patents": "NA",
"Active": "1895(b)-1963(d)",
"Mainfieldsofinvention": "Chemical de-emulsifiers",
},
{
"Inventor": "Jay S. Walker",
"NumberofPatentFamilies": 918,
"Country": "USA",
"Number of INPADOC patents": 2206,
"Active": "1998-2016",
"Mainfieldsofinvention": "Gaming machines",
},
{
"Inventor": "Edward K. Y. Jung",
"NumberofPatentFamilies": 911,
"Country": "USA",
"Number of INPADOC patents": 2254,
"Active": "1996-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Francis H. Richards",
"NumberofPatentFamilies": 894,
"Country": "USA",
"Number of INPADOC patents": "NA",
"Active": "1850(b)-19??(d)",
"Mainfieldsofinvention": "Mechanical, automation",
},
{
"Inventor": "Kangguo Cheng",
"NumberofPatentFamilies": 884,
"Country": "USA",
"Number of INPADOC patents": 1314,
"Active": "2004-2016",
"Mainfieldsofinvention": "Semiconductor device fabrication, Semiconductor memory, Semiconductor device",
},
{
"Inventor": "Clarence T. Tegreene",
"NumberofPatentFamilies": 872,
"Country": "USA",
"Number of INPADOC patents": 2255,
"Active": "2000-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Ahmadreza Rofougaran",
"NumberofPatentFamilies": 808,
"Country": "USA",
"Number of INPADOC patents": 1396,
"Active": "2002-2016",
"Mainfieldsofinvention": "Radio Frequency Integrated Circuits",
},
{
"Inventor": "Shou-Shan Fan",
"NumberofPatentFamilies": 805,
"Country": "China",
"Number of INPADOC patents": 2120,
"Active": "2006-2016",
"Mainfieldsofinvention": "Carbon nanotubes and applications of carbon nanotubes",
},
{
"Inventor": "Michael J. Sullivan",
"NumberofPatentFamilies": 788,
"Country": "USA",
"Number of INPADOC patents": 1560,
"Active": "1977-2016",
"Mainfieldsofinvention": "Golf balls",
},
{
"Inventor": "Rick Allen Hamilton II",
"NumberofPatentFamilies": 773,
"Country": "USA",
"Number of INPADOC patents": 1064,
"Active": "1999-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Warren Farnworth",
"NumberofPatentFamilies": 770,
"Country": "USA",
"Number of INPADOC patents": 931,
"Active": "1990-2016",
"Mainfieldsofinvention": "Semiconductor packaging",
},
{
"Inventor": "Carleton Ellis",
"NumberofPatentFamilies": 753,
"Country": "USA",
"Number of INPADOC patents": "NA",
"Active": "1876(b)-1941(d)",
"Mainfieldsofinvention": "Margarine, Polyester, Anti-knock gasoline, Paint stripper",
},
{
"Inventor": "William H. Eby",
"NumberofPatentFamilies": 733,
"Country": "USA",
"Number of INPADOC patents": 758,
"Active": "1994-2016",
"Mainfieldsofinvention": "Transgenic soybeans",
},
{
"Inventor": "Hideo Ando",
"NumberofPatentFamilies": 728,
"Country": "Japan",
"Number of INPADOC patents": 2588,
"Active": "1983-2016",
"Mainfieldsofinvention": "Optical recording",
},
{
"Inventor": "Salman Akram",
"NumberofPatentFamilies": 728,
"Country": "USA",
"Number of INPADOC patents": 915,
"Active": "1995-2016",
"Mainfieldsofinvention": "Semiconductor packaging",
},
{
"Inventor": "George Spector",
"NumberofPatentFamilies": 722,
"Country": "USA",
"Number of INPADOC patents": 747,
"Active": "1976-1998",
"Mainfieldsofinvention": "Gadgets, Toys",
},
{
"Inventor": "Jeyhan Karaoguz",
"NumberofPatentFamilies": 721,
"Country": "USA",
"Number of INPADOC patents": 1530,
"Active": "1996-2016",
"Mainfieldsofinvention": "Wireless communications, Computer networks",
},
{
"Inventor": "Elihu Thomson",
"NumberofPatentFamilies": 696,
"Country": "UK",
"Number of INPADOC patents": "NA",
"Active": "1853(b)-1937(d)",
"Mainfieldsofinvention": "Electric power, Arc lamp, Electric motors, Lightning arrester, Arc welder",
},
{
"Inventor": "Austin L. Gurney",
"NumberofPatentFamilies": 695,
"Country": "USA",
"Number of INPADOC patents": 3909,
"Active": "1999-2016",
"Mainfieldsofinvention": "Proteins, Antibodies",
},
{
"Inventor": "Tetsujiro Kondo",
"NumberofPatentFamilies": 684,
"Country": "Japan",
"Number of INPADOC patents": 4158,
"Active": "1987-2015",
"Mainfieldsofinvention": "Signal processing, Image processing",
},
{
"Inventor": "Nathan Myhrvold",
"NumberofPatentFamilies": 661,
"Country": "USA",
"Number of INPADOC patents": 1690,
"Active": "1994-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "William I. Wood",
"NumberofPatentFamilies": 653,
"Country": "USA",
"Number of INPADOC patents": 3560,
"Active": "1981-2016",
"Mainfieldsofinvention": "Proteins, Antibodies",
},
{
"Inventor": "Simon R. Walmsley",
"NumberofPatentFamilies": 651,
"Country": "Australia",
"Number of INPADOC patents": 1249,
"Active": "1995-2015",
"Mainfieldsofinvention": "Printing, Electronics, VLSI, Cryptography",
},
{
"Inventor": "Mark Malamud",
"NumberofPatentFamilies": 632,
"Country": "USA",
"Number of INPADOC patents": 1759,
"Active": "1997-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Royce A. Levien",
"NumberofPatentFamilies": 630,
"Country": "USA",
"Number of INPADOC patents": 1799,
"Active": "1997-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Audrey D. Goddard",
"NumberofPatentFamilies": 622,
"Country": "USA",
"Number of INPADOC patents": 3416,
"Active": "1997-2014",
"Mainfieldsofinvention": "Proteins, Antibodies",
},
{
"Inventor": "Muriel Y. Ishikawa",
"NumberofPatentFamilies": 619,
"Country": "USA",
"Number of INPADOC patents": 1660,
"Active": "2002-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Robert W. Lord",
"NumberofPatentFamilies": 618,
"Country": "USA",
"Number of INPADOC patents": 1708,
"Active": "2003-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Jerome Lemelson",
"NumberofPatentFamilies": 606,
"Country": "USA",
"Number of INPADOC patents": "NA",
"Active": "1923(b)-1997(d)",
"Mainfieldsofinvention": "Toys, Industrial robots, Cordless telephones, Fax machines, Videocassette recorders",
},
{
"Inventor": "Béla Barényi",
"NumberofPatentFamilies": 595,
"Country": "Austria",
"Number of INPADOC patents": 1244,
"Active": "1907(b)-1997(d)",
"Mainfieldsofinvention": "Passive safety in automobiles",
},
{
"Inventor": "Kie Y Ahn",
"NumberofPatentFamilies": 593,
"Country": "USA",
"Number of INPADOC patents": 709,
"Active": "1976-2016",
"Mainfieldsofinvention": "Thin film processes and materials, VLSI, Semiconductor device fabrication",
},
{
"Inventor": "Tadahiro Ohmi",
"NumberofPatentFamilies": 592,
"Country": "Japan",
"Number of INPADOC patents": 2691,
"Active": "1981-2016",
"Mainfieldsofinvention": "Thin film processes and materials, Semiconductor device fabrication",
},
{
"Inventor": "Jordin T. Kare",
"NumberofPatentFamilies": 585,
"Country": "USA",
"Number of INPADOC patents": 1559,
"Active": "1992-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Paul J. Godowski",
"NumberofPatentFamilies": 579,
"Country": "USA",
"Number of INPADOC patents": 2605,
"Active": "1994-2014",
"Mainfieldsofinvention": "Proteins, Antibodies",
},
{
"Inventor": "Artur Fischer",
"NumberofPatentFamilies": 570,
"Country": "Germany",
"Number of INPADOC patents": 3097,
"Active": "1976-2002",
"Mainfieldsofinvention": "Fasteners, Construction toys",
},
{
"Inventor": "Edward J. Nowak",
"NumberofPatentFamilies": 564,
"Country": "USA",
"Number of INPADOC patents": 1145,
"Active": "1979-2016",
"Mainfieldsofinvention": "Semiconductor device fabrication, Semiconductor memory, Semiconductor device",
},
{
"Inventor": "Louis L. Hsu",
"NumberofPatentFamilies": 551,
"Country": "USA",
"Number of INPADOC patents": 914,
"Active": "1988-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Edwin H. Land",
"NumberofPatentFamilies": 535,
"Country": "USA",
"Number of INPADOC patents": 1236,
"Active": "1909(b)-1991(d)",
"Mainfieldsofinvention": "Instant photography, Polarizing film",
},
{
"Inventor": "Henri Dreyfus",
"NumberofPatentFamilies": 524,
"Country": "Switzerland",
"Number of INPADOC patents": 2117,
"Active": "1882(b)-1944(d)",
"Mainfieldsofinvention": "Polymers, Synthetic fibers, Dyes",
},
{
"Inventor": "Bruce B. Doris",
"NumberofPatentFamilies": 522,
"Country": "USA",
"Number of INPADOC patents": 867,
"Active": "1995-2016",
"Mainfieldsofinvention": "Integrated Circuits, CMOS, DRAM, Semiconductor device fabrication",
},
{
"Inventor": "Clyde C. Farmer",
"NumberofPatentFamilies": 513,
"Country": "USA",
"Number of INPADOC patents": 830,
"Active": "18??(b)-19??(d)",
"Mainfieldsofinvention": "Railway air brakes",
},
{
"Inventor": "Heinz Focke",
"NumberofPatentFamilies": 512,
"Country": "Germany",
"Number of INPADOC patents": 2896,
"Active": "1976-2013",
"Mainfieldsofinvention": "Cigarette packaging",
},
{
"Inventor": "Mark I. Gardner",
"NumberofPatentFamilies": 511,
"Country": "USA",
"Number of INPADOC patents": 587,
"Active": "1994-2010",
"Mainfieldsofinvention": "Consumer electronics, Energy, Computers, Semiconductors, Physics",
},
{
"Inventor": "Ravi K. Arimilli",
"NumberofPatentFamilies": 506,
"Country": "India",
"Number of INPADOC patents": 767,
"Active": "1992-2016",
"Mainfieldsofinvention": "Computer architecture, Semiconductor memory, Cache coherence, Symmetric multiprocessing",
},
{
"Inventor": "Louis H. Morin",
"NumberofPatentFamilies": 503,
"Country": "USA",
"Number of INPADOC patents": 720,
"Active": "18??(b)-19??(d)",
"Mainfieldsofinvention": "Fasteners, Locks, Bobbins",
},
{
"Inventor": "Tobin A. King",
"NumberofPatentFamilies": 497,
"Country": "Australia",
"Number of INPADOC patents": 1218,
"Active": "2000-2015",
"Mainfieldsofinvention": "Printing, Digital paper, Mechanical",
},
{
"Inventor": "Eric C. Leuthardt",
"NumberofPatentFamilies": 495,
"Country": "USA",
"Number of INPADOC patents": 1274,
"Active": "2006-2016",
"Mainfieldsofinvention": "Medical devices",
},
{
"Inventor": "Ali Khakifirooz",
"NumberofPatentFamilies": 489,
"Country": "USA",
"Number of INPADOC patents": 737,
"Active": "2011-2016",
"Mainfieldsofinvention": "Integrated Circuits, CMOS, Semiconductor device fabrication",
},
{
"Inventor": "Jack A. Mandelman",
"NumberofPatentFamilies": 481,
"Country": "USA",
"Number of INPADOC patents": 889,
"Active": "1987-2014",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Jeffrey P. Gambino",
"NumberofPatentFamilies": 479,
"Country": "USA",
"Number of INPADOC patents": 798,
"Active": "1992-2016",
"Mainfieldsofinvention": "MEMS, CMOS, BiCMOS, DRAM, Image Sensors, RF, Biosensors, 3D Integrated Circuits",
},
{
"Inventor": "John M. Santosuosso",
"NumberofPatentFamilies": 473,
"Country": "USA",
"Number of INPADOC patents": 683,
"Active": "2001-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "James M. Hart",
"NumberofPatentFamilies": 464,
"Country": "USA",
"Number of INPADOC patents": 1145,
"Active": "1988-2016",
"Mainfieldsofinvention": "Motor vehicle transmission",
},
{
"Inventor": "Eberhard Ammermann",
"NumberofPatentFamilies": 451,
"Country": "Germany",
"Number of INPADOC patents": 5178,
"Active": "1979-2015",
"Mainfieldsofinvention": "Fungicides",
},
{
"Inventor": "Thomas E. Murray",
"NumberofPatentFamilies": 449,
"Country": "USA",
"Number of INPADOC patents": 462,
"Active": "1860(b)-1929(d)",
"Mainfieldsofinvention": "Electrical, HVAC, Wheels, Metal working, Light dimmer",
},
{
"Inventor": "Akira Nakazawa",
"NumberofPatentFamilies": 445,
"Country": "Australia",
"Number of INPADOC patents": 1340,
"Active": "1980-2016",
"Mainfieldsofinvention": "Printing, Mechanical",
},
{
"Inventor": "Hongyong Zhang",
"NumberofPatentFamilies": 440,
"Country": "Japan",
"Number of INPADOC patents": 858,
"Active": "1993-2016",
"Mainfieldsofinvention": "Thin film transistors, Liquid crystal displays",
},
{
"Inventor": "Ronald S. Cok",
"NumberofPatentFamilies": 436,
"Country": "USA",
"Number of INPADOC patents": 747,
"Active": "1986-2016",
"Mainfieldsofinvention": "OLED displays; image processing",
},
{
"Inventor": "fe",
"NumberofPatentFamilies": 430,
"Country": "USA",
"Number of INPADOC patents": 1759,
"Active": "1983-2016",
"Mainfieldsofinvention": "Biotechnology, Drug delivery, Tissue engineering",
},
{
"Inventor": "Scott H. Wittkopp",
"NumberofPatentFamilies": 429,
"Country": "USA",
"Number of INPADOC patents": 1010,
"Active": "2001-2016",
"Mainfieldsofinvention": "Motor vehicle transmission",
},
{
"Inventor": "John Hays Hammond, Jr.",
"NumberofPatentFamilies": 417,
"Country": "USA",
"Number of INPADOC patents": 460,
"Active": "1888(b)-1965(d)",
"Mainfieldsofinvention": "Radio control, Radio communications, Torpedoes",
},
{
"Inventor": "Wilhelm Brandes",
"NumberofPatentFamilies": 411,
"Country": "Germany",
"Number of INPADOC patents": 2923,
"Active": "1976-2010",
"Mainfieldsofinvention": "Fungicides",
},
{
"Inventor": "Anthony K. Stamper",
"NumberofPatentFamilies": 411,
"Country": "USA",
"Number of INPADOC patents": 726,
"Active": "1998-2016",
"Mainfieldsofinvention": "MEMS, CMOS, BiCMOS, Silicon-germanium",
},
{
"Inventor": "Hossein Eslambolchi",
"NumberofPatentFamilies": 410,
"Country": "USA",
"Number of INPADOC patents": 631,
"Active": "1993-2016",
"Mainfieldsofinvention": "Telecommunications, Network intelligence, information Technology, communications technology",
},
{
"Inventor": "Stanford R. Ovshinsky",
"NumberofPatentFamilies": 400,
"Country": "USA",
"Number of INPADOC patents": 1649,
"Active": "1922(b)-2012(d)",
"Mainfieldsofinvention": "Batteries, Solar cells, Liquid crystal displays, Hydrogen fuel cells, Computer data storage",
},
{
"Inventor": "Victoria Y. H. Wood",
"NumberofPatentFamilies": 400,
"Country": "USA",
"Number of INPADOC patents": 1045,
"Active": "2009-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Josef Theurer",
"NumberofPatentFamilies": 388,
"Country": "Austria",
"Number of INPADOC patents": 5085,
"Active": "1976-2016",
"Mainfieldsofinvention": "Railroad maintenance machines",
},
{
"Inventor": "Cary L. Bates",
"NumberofPatentFamilies": 384,
"Country": "USA",
"Number of INPADOC patents": 570,
"Active": "1994-2016",
"Mainfieldsofinvention": "Programming tools, DBX, Memory debuggers",
},
{
"Inventor": "David V. Horak",
"NumberofPatentFamilies": 380,
"Country": "USA",
"Number of INPADOC patents": 616,
"Active": "1992-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Kai-Li Jiang",
"NumberofPatentFamilies": 379,
"Country": "China",
"Number of INPADOC patents": 829,
"Active": "2006-2016",
"Mainfieldsofinvention": "Carbon nanotubes and applications of carbon nanotubes",
},
{
"Inventor": "Hans-Joachim Santel",
"NumberofPatentFamilies": 377,
"Country": "Germany",
"Number of INPADOC patents": 2623,
"Active": "1986-2013",
"Mainfieldsofinvention": "Herbicides, Pesticides, Organic chemistry",
},
{
"Inventor": "Xuemin (Sherman) Chen",
"NumberofPatentFamilies": 377,
"Country": "USA",
"Number of INPADOC patents": 1151,
"Active": "1997-2017",
"Mainfieldsofinvention": "Computer networks, Integrated Circuits, Signal Processing",
},
{
"Inventor": "George P. Liang",
"NumberofPatentFamilies": 375,
"Country": "China",
"Number of INPADOC patents": 508,
"Active": "1983-2016",
"Mainfieldsofinvention": "Gas turbine cooling",
},
{
"Inventor": "Gisela Lorenz",
"NumberofPatentFamilies": 374,
"Country": "Germany",
"Number of INPADOC patents": 4155,
"Active": "1990-2015",
"Mainfieldsofinvention": "Fungicides, Organic chemistry",
},
{
"Inventor": "Garry R. Jackson",
"NumberofPatentFamilies": 367,
"Country": "Australia",
"Number of INPADOC patents": 656,
"Active": "2001-2016",
"Mainfieldsofinvention": "Printing, Mechanical",
},
{
"Inventor": "Paul W. Dent",
"NumberofPatentFamilies": 362,
"Country": "USA",
"Number of INPADOC patents": 2252,
"Active": "1984-2015",
"Mainfieldsofinvention": "Wireless communications",
},
{
"Inventor": "George Westinghouse",
"NumberofPatentFamilies": 361,
"Country": "USA",
"Number of INPADOC patents": "NA",
"Active": "1846(b)-1914(d)",
"Mainfieldsofinvention": "Electric power, Electricity meter, Railway air brake, Steam engines",
},
{
"Inventor": "Wael W. Diab",
"NumberofPatentFamilies": 358,
"Country": "USA",
"Number of INPADOC patents": 774,
"Active": "2003-2016",
"Mainfieldsofinvention": "Computer networks",
},
{
"Inventor": "Devendra K. Sadana",
"NumberofPatentFamilies": 356,
"Country": "India",
"Number of INPADOC patents": 794,
"Active": "1983-2016",
"Mainfieldsofinvention": "Solar cells, OLED, Integrated Circuits, CMOS, DRAM, LEDs",
},
{
"Inventor": "Vincent J. Zimmer",
"NumberofPatentFamilies": 354,
"Country": "USA",
"Number of INPADOC patents": 972,
"Active": "1999-2016",
"Mainfieldsofinvention": "Computer software and firmware",
},
{
"Inventor": "Robert R. Schmidt",
"NumberofPatentFamilies": 350,
"Country": "Germany",
"Number of INPADOC patents": 2467,
"Active": "1971-2005",
"Mainfieldsofinvention": "Herbicides, Fungicides, Organic chemistry",
},
{
"Inventor": "Norman M. Berry",
"NumberofPatentFamilies": 347,
"Country": "Australia",
"Number of INPADOC patents": 516,
"Active": "2006-2016",
"Mainfieldsofinvention": "Printing, Mechanical",
},
{
"Inventor": "Chih-Chao Yang",
"NumberofPatentFamilies": 345,
"Country": "USA",
"Number of INPADOC patents": 690,
"Active": "2003-2016",
"Mainfieldsofinvention": "Integrated Circuits",
},
{
"Inventor": "Gregory J. Boss",
"NumberofPatentFamilies": 345,
"Country": "USA",
"Number of INPADOC patents": 588,
"Active": "2008-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Mark W. Kroll",
"NumberofPatentFamilies": 343,
"Country": "USA",
"Number of INPADOC patents": 460,
"Active": "1987-2016",
"Mainfieldsofinvention": "Implantable medical devices",
},
{
"Inventor": "Brian M. O'Connell",
"NumberofPatentFamilies": 331,
"Country": "USA",
"Number of INPADOC patents": 592,
"Active": "2009-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "William Daniel Hillis",
"NumberofPatentFamilies": 328,
"Country": "USA",
"Number of INPADOC patents": 229,
"Active": "1986-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Brent A. Anderson",
"NumberofPatentFamilies": 323,
"Country": "USA",
"Number of INPADOC patents": 454,
"Active": "2001-2016",
"Mainfieldsofinvention": "Semiconductor device fabrication, Semiconductor memory, Semiconductor device",
},
{
"Inventor": "Jeffrey E. Stahmann",
"NumberofPatentFamilies": 321,
"Country": "USA",
"Number of INPADOC patents": 640,
"Active": "1994-2016",
"Mainfieldsofinvention": "Medical devices",
},
{
"Inventor": "Carl J. Radens",
"NumberofPatentFamilies": 317,
"Country": "USA",
"Number of INPADOC patents": 636,
"Active": "1994-2016",
"Mainfieldsofinvention": "Integrated Circuits, CMOS, DRAM, Semiconductor device fabrication",
},
{
"Inventor": "Clifford A. Pickover",
"NumberofPatentFamilies": 317,
"Country": "USA",
"Number of INPADOC patents": 653,
"Active": "1992-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Liang Liu",
"NumberofPatentFamilies": 310,
"Country": "China",
"Number of INPADOC patents": 777,
"Active": "2005-2016",
"Mainfieldsofinvention": "Carbon nanotubes and applications of carbon nanotubes",
},
{
"Inventor": "Steven L. Teig",
"NumberofPatentFamilies": 307,
"Country": "USA",
"Number of INPADOC patents": 366,
"Active": "1995-2016",
"Mainfieldsofinvention": "Integrated Circuits",
},
{
"Inventor": "Victoria Smith",
"NumberofPatentFamilies": 305,
"Country": "USA",
"Number of INPADOC patents": 2040,
"Active": "2006-2016",
"Mainfieldsofinvention": "Proteins, Antibodies",
},
{
"Inventor": "Robert G. LeTourneau",
"NumberofPatentFamilies": 299,
"Country": "USA",
"Number of INPADOC patents": "NA",
"Active": "1888(b)-1969(d)",
"Mainfieldsofinvention": "Earthworks (engineering), Heavy Equipment, Industrial Machinery",
},
{
"Inventor": "William R. Tonti",
"NumberofPatentFamilies": 291,
"Country": "USA",
"Number of INPADOC patents": 441,
"Active": "1994-2016",
"Mainfieldsofinvention": "Integrated Circuits, CMOS, DRAM, Semiconductor device fabrication",
},
{
"Inventor": "Keith R. Walker",
"NumberofPatentFamilies": 282,
"Country": "Saudi Arabia",
"Number of INPADOC patents": 318,
"Active": "2003-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Victor S. Moore",
"NumberofPatentFamilies": 280,
"Country": "USA",
"Number of INPADOC patents": 428,
"Active": "1982-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Hanson S. Gifford III",
"NumberofPatentFamilies": 276,
"Country": "USA",
"Number of INPADOC patents": 795,
"Active": "1987-2016",
"Mainfieldsofinvention": "Medical Devices",
},
{
"Inventor": "Daniel J. Winarski",
"NumberofPatentFamilies": 275,
"Country": "USA",
"Number of INPADOC patents": 506,
"Active": "1982-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Adam Heller",
"NumberofPatentFamilies": 272,
"Country": "Romania",
"Number of INPADOC patents": 711,
"Active": "1968-2016",
"Mainfieldsofinvention": "Solar cells, Glucose meters, Lasers",
},
{
"Inventor": "Lisa Seacat DeLuca",
"NumberofPatentFamilies": 271,
"Country": "USA",
"Number of INPADOC patents": 385,
"Active": "2009-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Brent Keeth",
"NumberofPatentFamilies": 270,
"Country": "USA",
"Number of INPADOC patents": 470,
"Active": "1994-2016",
"Mainfieldsofinvention": "Integrated Circuits, CMOS, DRAM",
},
{
"Inventor": "Hartley Owen",
"NumberofPatentFamilies": 267,
"Country": "USA",
"Number of INPADOC patents": 751,
"Active": "1976-2010",
"Mainfieldsofinvention": "Fluid catalytic cracking",
},
{
"Inventor": "Michael A. Rothman",
"NumberofPatentFamilies": 256,
"Country": "USA",
"Number of INPADOC patents": 687,
"Active": "2001-2017",
"Mainfieldsofinvention": "Computer software and firmware",
},
{
"Inventor": "Yoshihiro Kikuchi",
"NumberofPatentFamilies": 255,
"Country": "Japan",
"Number of INPADOC patents": 1120,
"Active": "1994-2015",
"Mainfieldsofinvention": "Video processing",
},
{
"Inventor": "Kulvir S. Bhogal",
"NumberofPatentFamilies": 252,
"Country": "USA",
"Number of INPADOC patents": 486,
"Active": "2003-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Bengt Lindoff",
"NumberofPatentFamilies": 248,
"Country": "Sweden",
"Number of INPADOC patents": 1658,
"Active": "2000-2017",
"Mainfieldsofinvention": "Wireless communications",
},
{
"Inventor": "Nobuyuki Taniguchi",
"NumberofPatentFamilies": 245,
"Country": "Japan",
"Number of INPADOC patents": 967,
"Active": "1979-2015",
"Mainfieldsofinvention": "Cameras",
},
{
"Inventor": "Dean L. Kamen",
"NumberofPatentFamilies": 243,
"Country": "USA",
"Number of INPADOC patents": 1186,
"Active": "1979-2016",
"Mainfieldsofinvention": "Battery-powered electric vehicles, Medical devices, Stirling engines, Water purification, Wheelchairs",
},
{
"Inventor": "Philip S. Yu",
"NumberofPatentFamilies": 236,
"Country": "USA",
"Number of INPADOC patents": 158,
"Active": "1982-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Rajiv V. Joshi",
"NumberofPatentFamilies": 235,
"Country": "USA",
"Number of INPADOC patents": 354,
"Active": "1986-2016",
"Mainfieldsofinvention": "Electronics, analytics",
},
{
"Inventor": "Lawrence A. Clevenger",
"NumberofPatentFamilies": 235,
"Country": "USA",
"Number of INPADOC patents": 526,
"Active": "1996-2017",
"Mainfieldsofinvention": "Semiconductor, Cognitive, Memory, Security, Analytics",
},
{
"Inventor": "Johnny M. Shieh",
"NumberofPatentFamilies": 231,
"Country": "USA",
"Number of INPADOC patents": 444,
"Active": "1996-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Takeshi Chujoh",
"NumberofPatentFamilies": 229,
"Country": "Japan",
"Number of INPADOC patents": 1065,
"Active": "1995-2016",
"Mainfieldsofinvention": "Video processing",
},
{
"Inventor": "Bran Ferren",
"NumberofPatentFamilies": 225,
"Country": "USA",
"Number of INPADOC patents": 589,
"Active": "1986-2017",
"Mainfieldsofinvention": "Computers, Consumer Electronics, Optical Systems, Medical, User Interfaces, Automotive",
},
{
"Inventor": "Paul Ian Mackey",
"NumberofPatentFamilies": 220,
"Country": "Australia",
"Number of INPADOC patents": 246,
"Active": "2008-2016",
"Mainfieldsofinvention": "Printing, Mechanical",
},
{
"Inventor": "Louis Rosenberg",
"NumberofPatentFamilies": 218,
"Country": "USA",
"Number of INPADOC patents": 444,
"Active": "1995-2016",
"Mainfieldsofinvention": "Augmented Reality, Virtual Reality, A.I., HCI",
},
{
"Inventor": "Thomas J. Kennedy III",
"NumberofPatentFamilies": 218,
"Country": "USA",
"Number of INPADOC patents": 513,
"Active": "1992-2016",
"Mainfieldsofinvention": "Sporting Goods, Wind Turbines",
},
{
"Inventor": "Gerald F. McBrearty",
"NumberofPatentFamilies": 213,
"Country": "USA",
"Number of INPADOC patents": 387,
"Active": "1997-2016",
"Mainfieldsofinvention": "Various",
},
{
"Inventor": "Esmael H. Dinan",
"NumberofPatentFamilies": 208,
"Country": "USA",
"Number of INPADOC patents": 344,
"Active": "2000-2017",
"Mainfieldsofinvention": "Communication Networks",
},
{
"Inventor": "Imad Libbus",
"NumberofPatentFamilies": 207,
"Country": "USA",
"Number of INPADOC patents": 472,
"Active": "2007-2017",
"Mainfieldsofinvention": "Medical devices",
},
{
"Inventor": "Hiroshi (You) Yoshioka",
"NumberofPatentFamilies": 205,
"Country": "Japan",
"Number of INPADOC patents": 181,
"Active": "1997-2015",
"Mainfieldsofinvention": "Cameras",
},
{
"Inventor": "Patrick B. Usoro",
"NumberofPatentFamilies": 205,
"Country": "USA",
"Number of INPADOC patents": 343,
"Active": "1999-2016",
"Mainfieldsofinvention": "Transmissions, Hybrid Powertrains, Vehicle Thermal Management",
},
{
"Inventor": "Gregory McAvoy",
"NumberofPatentFamilies": 205,
"Country": "Australia",
"Number of INPADOC patents": 433,
"Active": "2003-2014",
"Mainfieldsofinvention": "Printing, MEMS",
},
{
"Inventor": "Sebastian T Ventrone",
"NumberofPatentFamilies": 204,
"Country": "USA",
"Number of INPADOC patents": 283,
"Active": "1989-2017",
"Mainfieldsofinvention": "Semiconductor, Logic, Architecture",
},
{
"Inventor": "Dorin Comaniciu",
"NumberofPatentFamilies": 200,
"Country": "USA",
"Number of INPADOC patents": 452,
"Active": "2003-2017",
"Mainfieldsofinvention": "Machine Intelligence, Medical Imaging, Image-Guided Surgery, Computer Vision",
}
];Change the height of header
Changing the height of the header can be useful in cases where the default height is not sufficient to display the header content cell. For example, if you have a header with a lot of text or if you want to add an image to the header, you may need to increase the height of the header to accommodate the content.This can be easily achieved by changing the height of the header using CSS or by dynamically adjusting the height using a methods.
Using css
You can use CSS to override the default height of the .e-grid .e-headercell class to change the height of the header. Here is an example code snippet:
.e-grid .e-headercell {
height: 130px;
}Using methods
To change the height of the header dynamically, you can use the getHeaderContent method to get the header content element of the Syncfusion Grid. Then, you can use the querySelectorAll method to get all the header cell elements with the class e-headercell. Finally, you can loop through each header cell element and set its style property to adjust the height.
import { ColumnDirective, ColumnsDirective, GridComponent} from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let grid;
const changeHeaderHeight = ((event) => {
const heightMap = { small: '20px', medium: '42px', big: '60px' };
const headerCells = grid.getHeaderContent().querySelectorAll('.e-headercell');
headerCells.forEach((headerCell) => {
headerCell.style.height = heightMap[event.target.id];
});
});
return (
<div>
<ButtonComponent id="small" cssClass="e-small" onClick={changeHeaderHeight}>Change height 20px</ButtonComponent>
<ButtonComponent id="medium" cssClass="e-small" onClick={changeHeaderHeight}>Change height 40px</ButtonComponent>
<ButtonComponent id="big" cssClass="e-small" onClick={changeHeaderHeight}>Change height 60px</ButtonComponent>
<GridComponent dataSource={data} height={315} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100' />
<ColumnDirective field='Freight' headerText='Freight' width='100' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd'/>
</ColumnsDirective>
</GridComponent></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, Grid, GridComponent} from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let grid: Grid | null;
const changeHeaderHeight = ((event: any) => {
const heightMap: any = { small: '20px', medium: '42px', big: '60px' };
const headerCells = (grid as any).getHeaderContent().querySelectorAll('.e-headercell');
headerCells.forEach((headerCell: any) => {
headerCell.style.height = heightMap[event.target.id];
});
});
return (
<div>
<ButtonComponent id="small" cssClass="e-small" onClick={changeHeaderHeight}>Change height 20px</ButtonComponent>
<ButtonComponent id="medium" cssClass="e-small" onClick={changeHeaderHeight}>Change height 40px</ButtonComponent>
<ButtonComponent id="big" cssClass="e-small" onClick={changeHeaderHeight}>Change height 60px</ButtonComponent>
<GridComponent dataSource={data} height={315} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100' />
<ColumnDirective field='Freight' headerText='Freight' width='100' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd'/>
</ColumnsDirective>
</GridComponent></div>)
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];
- You can also use the getHeaderTable method to get the table element of the header, and then adjust the height.
- You cannot change the height of row below the default height of 42px using the e-columnheader class.
Change header text dynamically
The Syncfusion Grid component provides a way to modify the header text of a corresponding column in real-time based on events or other events. This feature can be useful in various scenarios, such as displaying a custom header text for a specific column or updating the header text dynamically based on input. By allowing for dynamic changes to the header text, the Grid provides a more flexible and customizable experience.
Using Event
To modify the header text of a corresponding column dynamically, you can use the headerCellInfo event provided by the Syncfusion Grid. This event is triggered for each header cell element rendered in the Grid.
When the headerCellInfo event is triggered, it provides a HeaderCellInfoEventArgs object as a parameter. This object contains the following properties:
- cell: Defines the header cell that is being modified.
- node: Defines the DOM element of the header cell that is being modified.
You can use these properties to access and modify the header text of the corresponding column. Once the header text is modified, you can refresh the Grid to reflect the changes by calling the refreshHeader method of the Grid.
Using method
The Grid component provides several methods that allow you to change the column header text dynamically. Here are some of the methods you can use:
-
getColumnByField: This method takes a field name as a parameter and returns the entire column object that corresponds to that field name, including properties such as headerText, width, and alignment. You can use this method to modify any aspect of the column.
-
getColumnHeaderByField: Retrieves the header element of a column based on its field name. You can modify the textContent property of the header element to change the header text. This method does not return a reference to the column object itself, only to the header element.
-
getColumnIndexByField: Retrieves the index of a column based on its field name. You can then use the
getColumnByIndexmethod to retrieve the column object and modify itsheaderTextproperty to change the header text. -
getColumnByUid: Retrieves the column object based on its unique identifier (UID). You can modify the
headerTextproperty of the column object to change the header text. -
getColumnHeaderByIndex: Retrieves the header element of a column based on its zero-based index. You can modify the textContent property of the header element to change the header text. This method does not return a reference to the column object itself, only to the header element.
-
getColumnIndexByUid: Retrieves the index of a column based on its unique identifier (UID). You can then use the
getColumnByIndexmethod to retrieve the column object and modify itsheaderTextproperty to change the header text. -
getColumnHeaderByUid: Retrieves the header element of a column based on its unique identifier (UID). You can modify the textContent property of the header element to change the header text. This method does not return a reference to the column object itself, only to the header element. If you only have an
templatefor the column header, and the column itself is not defined with afield, then you can use thegetColumnHeaderByUidmethod to get a reference to the header element and modify its text content to change the header text.
- When you change the header text dynamically, make sure to refresh the Grid to reflect the changes by calling the refreshHeader method.
- The UID is automatically generated by the Grid component and may change whenever the grid is refreshed or updated.
Here is an example of how to change the header text of a column using the getColumnByField method:
import { ColumnDirective, ColumnsDirective, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let grid;
let dropDown;
let textBox;
const field = { text: 'text', value: 'value' };
const alignmentData= [
{ text: 'OrderID', value: 'OrderID' },
{ text: 'CustomerID', value: 'CustomerID' },
{ text: 'Freight', value: 'Freight' },
{ text: 'OrderDate', value: 'OrderDate' },
];
const changeHeaderText = (() => {
if (textBox.element.value.trim() !== '') {
const column = grid.getColumnByField(dropDown.value);
column.headerText = textBox.element.value;
grid.refreshHeader();
}
})
return (
<div>
<label style={{ padding: '10px 10px 26px 0' }}>Select column name :</label>
<DropDownListComponent dataSource={alignmentData} ref={d => dropDown = d} index={0} width="100" fields={field}></DropDownListComponent><br/>
<label style={{ padding: '30px 17px 0 0' }}>Enter new header text :</label>
<TextBoxComponent ref={t => textBox = t} placeholder="Enter new header text" width='200' />
<label style={{ padding: '30px 17px 0 0' }}>Click the change button :</label>
<ButtonComponent id="button" cssClass="e-outline" onClick={changeHeaderText}>Change</ButtonComponent>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent dataSource={data} height={315} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' />
<ColumnDirective field='OrderDate' headerText='Order Date' format='yMd' width='120' />
</ColumnsDirective>
</GridComponent></div></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, GridComponent, Column } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let grid: GridComponent | null;
let dropDown: DropDownListComponent | null;
let textBox: TextBoxComponent | null;
const field: Object = { text: 'text', value: 'value' };
const alignmentData: Object[] = [
{ text: 'OrderID', value: 'OrderID' },
{ text: 'CustomerID', value: 'CustomerID' },
{ text: 'Freight', value: 'Freight' },
{ text: 'OrderDate', value: 'OrderDate' },
];
const changeHeaderText = (() => {
if (textBox.element.value.trim() !== '') {
const column: Column = (grid as GridComponent).getColumnByField((dropDown as DropDownListComponent).value);
column.headerText = textBox.element.value;
(grid as GridComponent).refreshHeader();
}
})
return (
<div>
<label style={{ padding: '10px 10px 26px 0' }}>Select column name :</label>
<DropDownListComponent dataSource={alignmentData} ref={d => dropDown = d} index={0} width="100" fields={field}></DropDownListComponent><br/>
<label style={{ padding: '30px 17px 0 0' }}>Enter new header text :</label>
<TextBoxComponent ref={t => textBox = t} placeholder="Enter new header text" width='200' />
<label style={{ padding: '30px 17px 0 0' }}>Click the change button :</label>
<ButtonComponent id="button" cssClass="e-outline" onClick={changeHeaderText}>Change</ButtonComponent>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent dataSource={data} height={315} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' />
<ColumnDirective field='OrderDate' headerText='Order Date' format='yMd' width='120' />
</ColumnsDirective>
</GridComponent></div></div>)
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Changing header text using headerValueAccessor property
The headerValueAccessor property in Syncfusion Grid allows you to customize the text of a column header cell, which can be useful in scenarios where you want to change the text to display it in a different language, format or add additional information to the header. This property is triggered every time the header cell is rendered.
To enable the headerValueAccessor property, you need to set the headerValueAccessor property of the corresponding column. This property accepts a callback function that takes two arguments:
- field: Represents the current field of the column.
- column: Represents the current column object.
- The
headerValueAccessorproperty should only be used to change the text of the header and not to perform any DOM-oriented operations such as adding or manipulating DOM elements in the header. In such cases, you should use the headerCellInfo event instead.- The
headerValueAccessorproperty is triggered every time the header cell is rendered or refreshed.- The callback function defined for the
headerValueAccessorproperty should return a string that represents the new text of the column header.- If you only need to refresh the column header, you can dynamically change the header content using the refreshHeader method.
- You can use this property for individual columns or for all columns by adding it to the grid’s properties.
Here’s an example of how to use the headerValueAccessor property to change the header text of a column:
import { ColumnDirective, ColumnModel, ColumnsDirective, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let grid;
let dropDown;
let textBox;
const field = { text: 'text', value: 'value' };
const alignmentData = [
{ text: 'OrderID', value: 'OrderID' },
{ text: 'CustomerID', value: 'CustomerID' },
{ text: 'Freight', value: 'Freight' },
{ text: 'OrderDate', value: 'OrderDate' },
];
const changeHeaderText = ((args) => {
grid.refreshHeader();
});
const headerValueAccessor = ((field, columns) => {
if (textBox && textBox.value && textBox.value.trim() !== '' && columns.field === dropDown.value) {
return columns.headerText = textBox.value;
}
});
return (
<div>
<label style={{ padding: '10px 10px 26px 0' }}>Select column name :</label>
<DropDownListComponent dataSource={alignmentData} ref={d => dropDown = d} index={0} width="100" fields={field}></DropDownListComponent><br/>
<label style={{ padding: '30px 17px 0 0' }}>Enter new header text :</label>
<TextBoxComponent ref={t => textBox = t} placeholder="Enter new header text" width='200' />
<label style={{ padding: '30px 17px 0 0' }}>Click the change button :</label>
<ButtonComponent id="button" cssClass="e-outline" onClick={changeHeaderText}>Change</ButtonComponent>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent dataSource={data} height={315} ref={g => grid = g} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' />
<ColumnDirective field='OrderDate' headerText='Order Date' headerValueAccessor={headerValueAccessor} format='yMd' width='120' />
</ColumnsDirective>
</GridComponent></div></div>)
}
export default App;import { ColumnDirective, ColumnModel, ColumnsDirective, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let grid: Grid | null;
let dropDown: DropDownListComponent | null;
let textBox: any;
const field: Object = { text: 'text', value: 'value' };
const alignmentData: any = [
{ text: 'OrderID', value: 'OrderID' },
{ text: 'CustomerID', value: 'CustomerID' },
{ text: 'Freight', value: 'Freight' },
{ text: 'OrderDate', value: 'OrderDate' },
];
const changeHeaderText = ((args: any) => {
(grid as any).refreshHeader();
});
const headerValueAccessor = ((field: string, columns: ColumnModel) => {
if (textBox && textBox.value && textBox.value.trim() !== '' && columns.field === (dropDown as any).value) {
return columns.headerText = textBox.value;
}
});
return (
<div>
<label style={{ padding: '10px 10px 26px 0' }}>Select column name :</label>
<DropDownListComponent dataSource={alignmentData} ref={d => dropDown = d} index={0} width="100" fields={field}></DropDownListComponent><br/>
<label style={{ padding: '30px 17px 0 0' }}>Enter new header text :</label>
<TextBoxComponent ref={t => textBox = t} placeholder="Enter new header text" width='200' />
<label style={{ padding: '30px 17px 0 0' }}>Click the change button :</label>
<ButtonComponent id="button" cssClass="e-outline" onClick={changeHeaderText}>Change</ButtonComponent>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent dataSource={data} height={315} ref={g => grid = g} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' />
<ColumnDirective field='OrderDate' headerText='Order Date' headerValueAccessor={headerValueAccessor} format='yMd' width='120' />
</ColumnsDirective>
</GridComponent></div></div>)
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Changing the header text of all columns
If you want to change the header text of all columns in the grid, you can loop through the Columns collection of the grid and set the headerText property for each column. Here is an example:
import { ColumnDirective, ColumnModel, ColumnsDirective, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let grid;
const headerTextMap = {
'OrderID': 'Order ID',
'CustomerID': 'Customer ID',
'Freight': 'Freight Charge',
'ShipCity': 'Ship To City'
};
const changeHeaderText = (() => {
grid.columns.forEach((column) => {
column.headerText = headerTextMap[column.field];
});
grid.refreshHeader();
});
return (
<div>
<ButtonComponent cssClass="e-success" onClick={changeHeaderText}>Change Header Text</ButtonComponent>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent dataSource={data} height={315} ref={g => grid = g} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' />
<ColumnDirective field='ShipCity' headerText='ShipCity' width='120' />
</ColumnsDirective>
</GridComponent></div></div>)
}
export default App;import { ColumnDirective, ColumnModel, ColumnsDirective, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let grid: Grid | null;
const headerTextMap: { [key: string]: string } = {
'OrderID': 'Order ID',
'CustomerID': 'Customer ID',
'Freight': 'Freight Charge',
'ShipCity': 'Ship To City'
};
const changeHeaderText = (() => {
(grid as any).columns.forEach((column: ColumnModel | any) => {
column.headerText = headerTextMap[column.field as string];
});
(grid as any).refreshHeader();
});
return (
<div>
<ButtonComponent cssClass="e-success" onClick={changeHeaderText}>Change Header Text</ButtonComponent>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent dataSource={data} height={315} ref={g => grid = g} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' />
<ColumnDirective field='ShipCity' headerText='ShipCity' width='120' />
</ColumnsDirective>
</GridComponent></div></div>)
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Change the orientation of header text
By default, the text in the column headers of the Syncfusion Grid control is oriented horizontally. However, in some cases, you may want to change the orientation of the header text to vertical, diagonal, or at a custom angle. This can be achieved by adding a custom CSS class to the column header cell using the customAttributes property of the Grid columns.
Follow the below steps to change the orientation of the header text in Grid:
Step 1: Create a CSS class with orientation style for grid header cell
To rotate the header text, you can create a CSS class with the transform property that rotates the header text 90 degrees. This class will be added to the header cell using the customAttributes property.
.orientationcss .e-headercelldiv {
transform: rotate(90deg);
}Step 2: Add the custom CSS class to the grid column
Once you have created the CSS class, you can add it to the particular column by using the customAttributes property. This property allows you to add any custom attribute to the grid column.
For example, to add the orientationcss class to the Freight column, you can use the following code:
<ColumnDirective field='Freight' headerText='Freight' textAlign='Center' format='C2' customAttributes={customAttributes} width=80></ColumnDirective>Step 3: Resize the header cell height
After adding the custom CSS class to a column, you need to resize the header cell height so that the rotated header text is fully visible. You can do this by using the following code:
const setHeaderHeight = () => {
/** Obtain the width of the headerText content */
const textWidth: number = (document.querySelector(".orientationcss > div") as HTMLElement).scrollWidth;
const headerCell: NodeList = document.querySelectorAll(".e-headercell");
for(let i: number = 0; i < headerCell.length; i++) {
/** Assign the obtained textWidth as the height of the headerCell */
((headerCell as any).item(i)).style.height = textWidth + 'px';
}
}import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const customAttributes = { class: 'orientationcss' };
const setHeaderHeight = () => {
/** Obtain the width of the headerText content */
const textWidth = document.querySelector(".orientationcss > div").scrollWidth;
const headerCell = document.querySelectorAll(".e-headercell");
for (let i = 0; i < headerCell.length; i++) {
/** Assign the obtained textWidth as the height of the headerCell */
(headerCell.item(i)).style.height = textWidth + 'px';
}
};
return <div>
<GridComponent dataSource={data} height={260} created={setHeaderHeight}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100'/>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' headerText='Freight' customAttributes={customAttributes} width='80' format="C2" textAlign="Center"/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
</ColumnsDirective>
</GridComponent>
</div>;
}
;
export default App;import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const customAttributes: any = { class: 'orientationcss'};
const setHeaderHeight = () => {
/** Obtain the width of the headerText content */
const textWidth: number = (document.querySelector(".orientationcss > div") as HTMLElement).scrollWidth;
const headerCell: NodeList = document.querySelectorAll(".e-headercell");
for(let i: number = 0; i < headerCell.length; i++) {
/** Assign the obtained textWidth as the height of the headerCell */
((headerCell as any).item(i)).style.height = textWidth + 'px';
}
}
return <div>
<GridComponent dataSource={data} height={260} created={setHeaderHeight} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100'/>
<ColumnDirective field='EmployeeID' headerText='Employee ID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' headerText='Freight' customAttributes={customAttributes} width='80' format="C2" textAlign="Center"/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
</ColumnsDirective>
</GridComponent>
</div>
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Custom tooltip for header
Custom tooltips for headers provide additional information when hovering over a column header in the Syncfusion Grid. This can be useful in situations where there is not enough space to display all of the information related to a column, or when there is additional context that may be helpful.
To enable custom tooltips for headers, you can use the beforeRender event of the Grid component. This event is triggered for each header cell before it is rendered, allowing you to add a custom tooltip to the header cell using tooltip component.
Here’s an example of how to use the beforeRender event to add a custom tooltip to a header cell:
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-react-popups';
function App() {
let toolTip;
const columnDescriptions = {
"OrderID": "A unique number assigned to each order.",
"Freight": "The cost of shipping the order.",
"ShipName": "The name of the person or company who will receive the shipment.",
"ShipCountry": "The country to which the shipment will be sent.",
};
const beforeRender = ((args) => {
const description = columnDescriptions[args.target.innerText];
if (description) {
toolTip.content = args.target.innerText + ": " + description;
}
});
return (
<div>
<TooltipComponent ref={t => toolTip = t} beforeRender={beforeRender} target=".e-headertext">
<GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C' />
<ColumnDirective field='ShipName' headerText='ShipName' width='80' />
<ColumnDirective field='ShipCountry' headerText='ShipCountry' width='120' />
</ColumnsDirective>
</GridComponent>
</TooltipComponent></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-react-popups';
function App() {
let toolTip: TooltipComponent | null;
const columnDescriptions: Object = {
"OrderID": "A unique number assigned to each order.",
"Freight": "The cost of shipping the order.",
"ShipName": "The name of the person or company who will receive the shipment.",
"ShipCountry": "The country to which the shipment will be sent.",
};
const beforeRender = ((args: TooltipEventArgs) => {
const description = (columnDescriptions as any)[(args as any).target.innerText];
if (description) {
(toolTip as TooltipComponent).content = (args as any).target.innerText + ": " + description;
}
});
return (
<div>
<TooltipComponent ref={t => toolTip = t} beforeRender={beforeRender} target=".e-headertext">
<GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='Freight' headerText='Freight' width='120' format='C' />
<ColumnDirective field='ShipName' headerText='ShipName' width='80' />
<ColumnDirective field='ShipCountry' headerText='ShipCountry' width='120' />
</ColumnsDirective>
</GridComponent>
</TooltipComponent></div>)
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0,
Employee: {
EmployeeID: 1
},
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1,
Employee: {
EmployeeID: 2
},
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0,
Employee: {
EmployeeID: 3
},
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0,
Employee: {
EmployeeID: 4
},
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0,
Employee: {
EmployeeID: 5
}
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
, Employee: {
EmployeeID: 6
}
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
, Employee: {
EmployeeID: 7
}
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
, Employee: {
EmployeeID: 8
}
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
, Employee: {
EmployeeID: 9
}
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
, Employee: {
EmployeeID: 9
}
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
, Employee: {
EmployeeID: 6
}
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
, Employee: {
EmployeeID: 2
}
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
, Employee: {
EmployeeID: 3
}
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
, Employee: {
EmployeeID: 4
}
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
, Employee: {
EmployeeID: 3
}
}];
export let employeeData = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0,
Employee: {
EmployeeID: 1
},
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1,
Employee: {
EmployeeID: 2
},
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0,
Employee: {
EmployeeID: 3
},
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0,
Employee: {
EmployeeID: 4
},
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0,
Employee: {
EmployeeID: 5
}
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
, Employee: {
EmployeeID: 6
}
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
, Employee: {
EmployeeID: 7
}
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
, Employee: {
EmployeeID: 8
}
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
, Employee: {
EmployeeID: 9
}
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
, Employee: {
EmployeeID: 9
}
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
, Employee: {
EmployeeID: 6
}
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
, Employee: {
EmployeeID: 2
}
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
, Employee: {
EmployeeID: 3
}
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
, Employee: {
EmployeeID: 4
}
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
, Employee: {
EmployeeID: 3
}
}];
export let employeeData: Object[] = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
- The headerCellInfo event can also be used to customize the header tooltip. This event is triggered for each header cell after it is rendered.
Customize header text styles
Customizing the grid header styles allows you to modify the appearance of the column header in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the header cells. To customize the header styles in the grid, you can use CSS, properties, methods, or event support provided by the Syncfusion React Grid component.
Using CSS
You can apply styles to the header cells using CSS selectors. The Grid provides a class name for each header cell element, which you can use to apply styles to that specific header cell. The .e-headercell class can be used to change the background color and text color of the column header.
.e-grid .e-headercell {
background-color: #a2d6f4;
color:rgb(3, 2, 2);
}Here’s an example that demonstrates how to customize the appearance of a specific column header in the Grid using className.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
return (
<div>
<GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' />
<ColumnDirective field='ShipCity' headerText='ShipCity' width='120' />
</ColumnsDirective>
</GridComponent></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
return (
<div>
<GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' />
<ColumnDirective field='ShipCity' headerText='ShipCity' width='120' />
</ColumnsDirective>
</GridComponent></div>)
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Using property
You can customize the appearance of the column headers in Grid using the customAttributes property. The customAttributes property takes an object with the name-value pair to customize the CSS properties for grid header cells. You can also set multiple CSS properties to the custom class using the customAttributes property.
To customize the header of a column, you can follow the steps below:
Step 1: Define a CSS class that specifies the styles you want to apply to the header cell of the column. For example, to change the background color and text color of the header cell, define a CSS class like this:
.e-grid .e-headercell.customcss {
background-color: rgb(43, 205, 226);
color: black;
}Step 2: Set the customAttributes property of the desired column to an object that contains the CSS class customcss. This CSS class will be applied to the header cell of the specified column in the Grid.
{field="Freight" headerText="Freight" customAttributes={class: '.customcss'}}The following example demonstrates how to customize the appearance of the OrderID and Freight columns using custom attributes.
import { ColumnDirective, ColumnModel, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
return (
<div>
<GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' customAttributes={{ class: 'customcss' }} />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' customAttributes={{ class: 'customcss' }} />
<ColumnDirective field='ShipCity' headerText='ShipCity' width='120' />
</ColumnsDirective>
</GridComponent></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
return (
<div>
<GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' customAttributes={{ class: 'customcss' }} />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' customAttributes={{ class: 'customcss' }} />
<ColumnDirective field='ShipCity' headerText='ShipCity' width='120' />
</ColumnsDirective>
</GridComponent></div>)
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];Using method
The Syncfusion Grid provides methods to customize the appearance of the grid columns header.
-
getColumnHeaderByIndex: The method is used to customize the appearance of a specific column header in the grid by specifying the index of the column for which you want to customize the header.
- getColumnHeaderByField: This method is used to retrieve the header element of a specific column by its field name. You can use the retrieved element to customize the appearance of the header element.
-
getColumnHeaderByUid: This method is used to retrieve the header element of a specific column by its unique ID. You can use the retrieved element to customize the appearance of the header element.
-
getColumnIndexByField:This method is used to retrieve the index of a specific column by its field name. You can use the retrieved index to access the header element and customize its appearance.
- getColumnIndexByUid: This method is used to retrieve the index of a specific column by its unique ID. You can use the retrieved index to access the header element and customize its appearance.
Here’s an example of how to use these methods to change the style of a specific column header:
import { ColumnDirective, ColumnsDirective, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const dataBound = ((args) => {
grid.getColumnHeaderByIndex(0).style.color = '#0d0b0b';
grid.getColumnHeaderByField('CustomerID').style.background = '#f45ddeab';
grid.getColumnHeaderByField('CustomerID').style.color = '#0d0b0b';
grid.getColumnHeaderByUid('grid-column2').style.background = '#f45ddeab';
const columnIndex = grid.getColumnIndexByField('ShipCity');
grid.getColumnHeaderByIndex(columnIndex).style.color = '#0d0b0b';
const index = grid.getColumnIndexByUid('grid-column2');
grid.getColumnHeaderByIndex(index).style.color = '#0d0b0b';
});
return (
<div>
<GridComponent ref={g => grid = g} dataSource={data} height={315} dataBound={dataBound}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' />
<ColumnDirective field='ShipCity' headerText='ShipCity' width='120' />
</ColumnsDirective>
</GridComponent></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: Grid | null;
const dataBound = ((args: any) => {
(grid as any).getColumnHeaderByIndex(0).style.color = '#0d0b0b';
(grid as any).getColumnHeaderByField('CustomerID').style.background = '#f45ddeab';
(grid as any).getColumnHeaderByField('CustomerID').style.color = '#0d0b0b';
(grid as any).getColumnHeaderByUid('grid-column2').style.background = '#f45ddeab';
const columnIndex = (grid as any).getColumnIndexByField('ShipCity');
(grid as any).getColumnHeaderByIndex(columnIndex).style.color = '#0d0b0b';
const index = (grid as any).getColumnIndexByUid('grid-column2');
(grid as any).getColumnHeaderByIndex(index).style.color = '#0d0b0b';
});
return (
<div>
<GridComponent ref={g => grid = g} dataSource={data} height={315} dataBound={dataBound}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' />
<ColumnDirective field='ShipCity' headerText='ShipCity' width='120' />
</ColumnsDirective>
</GridComponent></div>)
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];
- The UID is automatically generated by the Grid component and may change whenever the grid is refreshed or updated.
Using event
To customize the appearance of the grid header, you can handle the headerCellInfo event of the grid. This event is triggered when each header cell is rendered in the grid, and provides an object that contains information about the header cell. You can use this object to modify the styles of the header column.
The following example demonstrates how to add a headerCellInfo event handler to the grid. In the event handler, checked whether the current header column is Freight field and then applied the appropriate CSS class to the cell based on its value.
import { ColumnDirective, ColumnsDirective, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const headerCellInfo = ((args) => {
if (args.cell.column.field === 'Freight') {
args.node.classList.add('customcss');
}
});
return (
<div>
<GridComponent ref={g => grid = g} dataSource={data} height={315} headerCellInfo={headerCellInfo}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' />
<ColumnDirective field='ShipCity' headerText='ShipCity' width='120' />
</ColumnsDirective>
</GridComponent></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: Grid | null;
const headerCellInfo = ((args: any) => {
if (args.cell.column.field === 'Freight') {
args.node.classList.add('customcss');
}
});
return (
<div>
<GridComponent ref={g => grid = g} dataSource={data} height={315} headerCellInfo={headerCellInfo}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' />
<ColumnDirective field='ShipCity' headerText='ShipCity' width='120' />
</ColumnsDirective>
</GridComponent></div>)
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];How to refresh header
The refresh header feature in the Syncfusion React Grid allows you to update the header section of the grid whenever changes are made to the grid’s columns. This feature is useful when you want to reflect changes in the header immediately, such as modifying the column header text, width, or alignment.
To use the refresh header feature, you can call the refreshHeader method of the Grid component. This method updates the grid header with the latest changes made to the columns.
The following example demonstrates how to use the refreshHeader method to update the grid header:
import { ColumnDirective, ColumnsDirective, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let grid;
const refreshHeader = ((args) => {
const column = grid.getColumnByIndex(1);
column.headerText = 'New Header Text'; // update the header text of the column object
grid.refreshHeader(); // refresh the grid header
});
return (
<div>
<ButtonComponent onClick={refreshHeader}>Refresh Header</ButtonComponent>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent ref={g => grid = g} dataSource={data} height={315} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' />
<ColumnDirective field='ShipCity' headerText='ShipCity' width='120' />
</ColumnsDirective>
</GridComponent></div></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, Grid, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let grid: Grid | null;
const refreshHeader = ((args: any) => {
const column = (grid as any).getColumnByIndex(1);
column.headerText = 'New Header Text'; // update the header text of the column object
(grid as any).refreshHeader(); // refresh the grid header
});
return (
<div>
<ButtonComponent onClick={refreshHeader}>Refresh Header</ButtonComponent>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent ref={g => grid = g} dataSource={data} height={315} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' />
<ColumnDirective field='ShipCity' headerText='ShipCity' width='120' />
</ColumnsDirective>
</GridComponent></div></div>)
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];
- The
refreshHeadermethod updates only the grid header and not the entire grid.- If you want to refresh the entire grid, you can use the
refreshmethod instead.
How to get header element
To get the header element in a Syncfusion Grid, you can use one of the following methods:
-
getHeaderContent: This method returns the header div element of the Grid. You can use this method to access the entire header content of the Grid.
const headerElement = grid.getHeaderContent(); -
getHeaderTable: This method returns the header table element of the Grid. You can use this method to access only the header table of the Grid.
const headerTableElement = grid.getHeaderTable(); -
getColumnHeaderByUid: This method returns the column header element by its unique identifier.
const columnHeaderElement = grid.getColumnHeaderByUid("e-grid2"); -
getColumnHeaderByIndex: This method returns the column header element by its index.
const columnHeaderElement = grid.getColumnHeaderByIndex(0); -
getColumnHeaderByField: This method returns the column header element by its field name.
const columnHeaderElement = grid.getColumnHeaderByField("OrderID");
- The UID is automatically generated by the Grid component and may change whenever the grid is refreshed or updated.