How can I help you?
Headers in React Grid component
17 Feb 202624 minutes to read
Column headers in the Syncfusion® React Grid display the titles for each column, making it clear what data is shown. They provide context and make the grid easier to read and navigate. Headers can be customized by adjusting text alignment, applying templates, stacking multiple headers, or updating them dynamically, offering flexibility to design the grid as needed.
Header text
In the Syncfusion® React Grid, the headerText property of the ColumnDirective defines the label shown in a column’s header; when this property is not set, the column automatically displays its field value, so assigning header text provides a more descriptive label in place of the field name.
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;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
}];Header template
The headerTemplate property provides full control over customizing column header cells. Instead of plain text, the header can render custom HTML elements or React components, such as icons, styled labels, or interactive elements, to create a richer and more engaging design.
The following example demonstrates custom elements rendered for the “Customer ID”, “Freight”, and “Order Date” 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 applies only to Grid columns that have a header element.- Any HTML or React component can be used in the header template to add functionality to the header element.
Stacked header
Stacked headers enable hierarchical organization of column headers by grouping related columns under parent headers. This feature is useful for complex data layouts where columns need logical grouping for better readability and organization. Stacked headers are implemented using the ColumnDirective property to define an array of column objects as sub-headers under a main header. The headerText property of each sub-header column sets the display text. The appearance of stacked header elements can be customized using the headerTemplate property, which accepts a template reference enabling definition of custom HTML elements or React components.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import React from 'react';
import { data } from './datasource';
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, GridComponent } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import React from 'react';
import { data } from './datasource';
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
}];Header text alignment
Header text alignment improves readability and visual organization of the grid. The headerTextAlign property controls how text is positioned inside column headers. By default, header text is aligned to the left, but it can be changed to better match the data or design. Supported options are:
-
Left: Aligns text to the left (default). -
Center: Aligns text to the center. -
Right: Aligns text to the right. -
Justify: Justifies header text.
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={260} 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={260} 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 affects header text alignment, not the content alignment. To align both header and content, use the textAlign property.- The
headerTextAlignproperty can also be used with the stacked header feature; it aligns header text in sub-headers as well.
Header text wrapping
Header text wrapping enables proper display of lengthy column names or descriptive labels within defined column widths. When content exceeds boundary limits, automatic wrapping to multiple lines maintains readability and prevents text overflow. The Syncfusion® React Grid supports configurable text wrapping with options to wrap headers only, content only, or both, optimizing space usage without sacrificing information clarity. To enable autowrap, set the allowTextWrap property to true. The auto wrap mode can be configured using 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
ColumnDirectivewidth is not specified, then the Autowrap of columns will be adjusted with respect to the grid’s width.- If a
ColumnDirectiveheader 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, use the headerTemplate and template properties of the column to customize the appearance of the header and cell content.
In the following example, the textWrapSettings.wrapMode property is set to Header to wrap only the grid header text 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={250} 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={250} 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 header height
When the default header height is not sufficient to display content, it can be adjusted to fit the design requirements. This is especially useful when headers are customized with a header template that includes icons, images, or multi‑line text. Header height can be modified using CSS styles or dynamic methods, ensuring that all content is visible and the grid remains well‑organized.
Using CSS:
Use CSS to override the default height of the .e-grid .e-headercell class to change the height of the header.
.e-grid .e-headercell {
height: 130px;
}Using methods:
To dynamically adjust the header height, use the getHeaderContent method to retrieve the header content element. Then use querySelectorAll to access all header cell elements with the class e-headercell and adjust their height via the style property.
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
}];
- The getHeaderTable method can also be used to access the header table element for adjustment.
- The header row height cannot be reduced below the default height of “42px” using the
e-columnheaderclass.
Change header text dynamically
Dynamic header modification is essential for interactive grids where header content needs to change based on input, runtime conditions, or business logic. The Syncfusion® React Grid component enables real-time modification of column header text through events or property accessors. This feature is particularly useful in scenarios such as localization, conditional labeling, or updating headers based on applied filters or grouping.
Using event:
The headerCellInfo event of the Syncfusion® React Grid enables modification of header text dynamically. This event triggers for each header cell element rendered in the Grid. When the headerCellInfo event triggers, it provides a HeaderCellInfoEventArgs object containing the following properties:
- cell: The header cell being modified.
- node: The DOM element of the header cell being modified.
These properties enable access to and modification of the header text.
Using methods:
The Grid component provides several methods to change column header text dynamically:
| # | Method | Description |
|---|---|---|
| 1 | getColumnByField | Returns the entire column object corresponding to a field name, including properties such as header text, width, and alignment. |
| 2 | getColumnHeaderByField | Retrieves the header element of a column by its field name. Modify the textContent property to change header text. This method returns only the header element reference, not the column object. |
| 3 | getColumnIndexByField | Retrieves the column index by field name. Use with getColumnByIndex to retrieve the column object and modify its headerText property. |
| 4 | getColumnByUid | Retrieves the column object by its unique identifier (UID). Modify the headerText property to change header text. |
| 5 | getColumnHeaderByIndex | Retrieves the header element by its zero-based index. Modify the textContent property to change header text. |
| 6 | getColumnIndexByUid | Retrieves the column index by unique identifier. Use with getColumnByIndex to modify the headerText property. |
| 7 | getColumnHeaderByUid | Retrieves the header element by its unique identifier. Modify the textContent property to change header text. If the column has only a template without a defined field, this method provides access to the header element. |
- When header text is changed dynamically, the Grid must be refreshed by calling the refreshHeader method to reflect the changes.
- UIDs are automatically generated by the Grid component and may change when the grid is refreshed or updated.
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 10px 0' }}>Select column name :</label>
<DropDownListComponent dataSource={alignmentData} ref={d => dropDown = d} index={0} width="100" fields={field}></DropDownListComponent><br/>
<label style={{ padding: '10px 17px 0 0' }}>Enter new header text :</label>
<TextBoxComponent ref={t => textBox = t} placeholder="Enter new header text" width='200' />
<label style={{ padding: '10px 17px 0 0' }}>Click the change button :</label>
<ButtonComponent id="button" cssClass="e-outline" onClick={changeHeaderText}>Change</ButtonComponent>
<div style={{ padding: '20px 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 10px 0' }}>Select column name :</label>
<DropDownListComponent dataSource={alignmentData} ref={d => dropDown = d} index={0} width="100" fields={field}></DropDownListComponent><br/>
<label style={{ padding: '10px 17px 0 0' }}>Enter new header text :</label>
<TextBoxComponent ref={t => textBox = t} placeholder="Enter new header text" width='200' />
<label style={{ padding: '10px 17px 0 0' }}>Click the change button :</label>
<ButtonComponent id="button" cssClass="e-outline" onClick={changeHeaderText}>Change</ButtonComponent>
<div style={{ padding: '20px 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
}];Conditional header text customization:
The column headerValueAccessor property in Syncfusion® React Grid enables customization of column header cell text. This is useful in scenarios requiring alternate language display, specific formatting, or additional header information. This property triggers every time the header cell renders. This property accepts a callback function with two arguments:
- field: The current column field.
- column: The current column object.
- Use
headerValueAccessoronly to modify header text; avoid DOM operations such as adding or manipulating elements. Use the headerCellInfo event for DOM-related customizations.- The callback function should return a string representing the new header text.
- The refreshHeader method can be used to refresh only the column header after dynamically changing the header content.
- This property can be applied to individual columns or for all columns by adding it to the grid’s properties.
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 10px 0' }}>Select column name :</label>
<DropDownListComponent dataSource={alignmentData} ref={d => dropDown = d} index={0} width="100" fields={field}></DropDownListComponent><br/>
<label style={{ padding: '10px 17px 0 0' }}>Enter new header text :</label>
<TextBoxComponent ref={t => textBox = t} placeholder="Enter new header text" width='200' />
<label style={{ padding: '10px 17px 0 0' }}>Click the change button :</label>
<ButtonComponent id="button" cssClass="e-outline" onClick={changeHeaderText}>Change</ButtonComponent>
<div style={{ padding: '20px 0 0 0' }}>
<GridComponent dataSource={data} height={250} 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 10px 0' }}>Select column name :</label>
<DropDownListComponent dataSource={alignmentData} ref={d => dropDown = d} index={0} width="100" fields={field}></DropDownListComponent><br/>
<label style={{ padding: '10px 17px 0 0' }}>Enter new header text :</label>
<TextBoxComponent ref={t => textBox = t} placeholder="Enter new header text" width='200' />
<label style={{ padding: '10px 17px 0 0' }}>Click the change button :</label>
<ButtonComponent id="button" cssClass="e-outline" onClick={changeHeaderText}>Change</ButtonComponent>
<div style={{ padding: '20px 0 0 0' }}>
<GridComponent dataSource={data} height={250} 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:
To change header text for all columns, loop through the columns collection and set the headerText property for each column.
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: '20px 0 0 0' }}>
<GridComponent dataSource={data} height={300} 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: '20px 0 0 0' }}>
<GridComponent dataSource={data} height={300} 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, column header text in the Grid is oriented horizontally. In data visualization scenarios—especially grids with many columns where horizontal headers consume excessive space—rotating the header text vertically, diagonally, or at a custom angle optimizes layout and enhances visual hierarchy and readability. This can be achieved by applying a custom CSS class to the header cell using the customAttributes property, then defining CSS transformations.
Follow these steps to change header text orientation in Grid:
Step 1: Create a CSS class with orientation style for grid header cell
Create a CSS class with the transform property to rotate header text “90” degrees. This class will be applied 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
Add the custom CSS class to a column using the customAttributes property. For example, to add the “orientationcss” class to the “Freight” column:
<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, resize the header cell height to ensure the rotated header text displays fully 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
Tooltips in headers provide contextual information that helps understand the purpose or content of each column without cluttering the UI. Custom tooltips for headers display additional information when hovering over column headers in the Syncfusion® React Grid, particularly useful when space limitations prevent full descriptions in headers or when additional column metadata needs to be communicated.
Custom tooltips can be enabled using the beforeRender event of the Grid component. This event triggers before each header cell renders, enabling addition of a custom tooltip using the tooltip component.
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
Header styling enables visual distinction and emphasizes important columns or data categories within the grid. Customizing header appearance through font, background color, and other styles meets specific design requirements and improves information hierarchy. The Syncfusion® React Grid component provides multiple approaches for header customization through CSS, properties, methods, or event-based styling.
Using CSS:
Styles can be applied to header cells using CSS selectors. The Grid assigns the .e-headercell class to each header cell element, which can be used to change the background color and text color of column headers.
.e-grid .e-headercell {
background-color: #a2d6f4;
color:rgb(3, 2, 2);
}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:
Column header appearance in Grid can be customized using the customAttributes property. This property accepts an object with name-value pairs to customize CSS properties for grid header cells. Multiple CSS properties can be set to the custom class using the customAttributes property.
To customize column headers, follow these steps:
Step 1: Define a CSS class specifying the desired styles for header cells.
.e-grid .e-headercell.customcss {
background-color: rgb(43, 205, 226);
color: black;
}Step 2: Set the customAttributes property of the column to an object containing the CSS class “customcss”. This class will be applied to the column’s header cell.
{field="Freight" headerText="Freight" customAttributes={class: '.customcss'}}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 methods:
Syncfusion® React Grid provides methods to customize column header appearance:
| # | Method | Description |
|---|---|---|
| 1 | getColumnHeaderByIndex | Customizes a specific column header by specifying the column index. |
| 2 | getColumnHeaderByField | Retrieves the header element by field name to customize its appearance. |
| 3 | getColumnHeaderByUid | Retrieves the header element by unique ID to customize its appearance. |
| 4 | getColumnIndexByField | Retrieves the column index by field name to access and customize the header element. |
| 5 | getColumnIndexByUid | Retrieves the column index by unique ID to access and customize the header element. |
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:
The headerCellInfo event of the grid enables customization of header appearance. This event triggers when each header cell renders in the grid and provides an object that contains information about the header cell. This object can be used to modify header column styles.
The following example demonstrates adding a headerCellInfo event handler to check if the current header column is the “Freight” field and apply the appropriate CSS class 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
}];Refresh header
Header refresh functionality enables synchronization between the visual display and underlying column definitions. Whenever column properties are programmatically modified (such as header text, width, or alignment), refreshing the header ensures the UI reflects all changes immediately. The refreshHeader method provides a lightweight approach to update only the header section without reloading the entire grid.
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: '20px 0 0 0' }}>
<GridComponent ref={g => grid = g} dataSource={data} height={300} >
<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: '20px 0 0 0' }}>
<GridComponent ref={g => grid = g} dataSource={data} height={300} >
<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, not the entire grid. To refresh the entire grid, use therefreshmethod instead.
Get header element
Accessing header elements programmatically is necessary for advanced customizations, styling, or interaction handling that go beyond built-in configuration options. The Syncfusion® React Grid provides multiple methods to retrieve specific header elements by various identifiers, enabling direct DOM manipulation or reading header metadata.
| # | Method | Description | Example |
|---|---|---|---|
| 1 | getHeaderContent | Returns the header div element of the Grid, providing access to the entire header content. | const headerElement = grid.getHeaderContent(); |
| 2 | getHeaderTable | Returns the header table element of the Grid, providing access only to the header table. | const headerTableElement = grid.getHeaderTable(); |
| 3 | getColumnHeaderByUid | Returns the column header element by its unique identifier. | const columnHeaderElement = grid.getColumnHeaderByUid("e-grid2"); |
| 4 | getColumnHeaderByIndex | Returns the column header element by its index. | const columnHeaderElement = grid.getColumnHeaderByIndex(0); |
| 5 | getColumnHeaderByField | 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.