Cell in React Grid component
12 Sep 202424 minutes to read
Displaying the HTML content
Displaying HTML content in a Grid can be useful in scenarios where you want to display formatted content, such as images, links, or tables, in a tabular format. Grid component allows you to display HTML tags in the Grid header and content. By default, the HTML content is encoded to prevent potential security vulnerabilities. However, you can enable the disableHtmlEncode property by setting the value as false to display HTML tags without encoding. This feature is useful when you want to display HTML content in a grid cell.
In the following example, the EJ2 Toggle Switch Button component is added to enable and disable the disableHtmlEncode property. When the switch is toggled, the change event is triggered and the disableHtmlEncode property of the column is updated accordingly. The refresh method is called to refresh the grid and display the updated content.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let grid;
const change = ((args) => {
if (args.checked) {
grid.getColumnByField('CustomerID').disableHtmlEncode = false;
} else {
grid.getColumnByField('CustomerID').disableHtmlEncode = true;
}
grid.refreshColumns();
})
return (
<div>
<div>
<label style={{ padding: "10px 10px" }}>
Enable or disable HTML Encode
</label>
<SwitchComponent id="switch" change={change}></SwitchComponent>
<GridComponent ref={g => grid = g} dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' />
<ColumnDirective field='CustomerID' headerText='<strong> Customer ID </strong>' width='120' />
<ColumnDirective field='Freight' headerText='Freight' width='150' textAlign='Right' format='C' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='120' />
</ColumnsDirective>
</GridComponent></div></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { SwitchComponent, ChangeEventArgs } from '@syncfusion/ej2-react-buttons';
function App() {
let grid: GridComponent | null;
const change = ((args: ChangeEventArgs) => {
if (args.checked) {
(grid as GridComponent).getColumnByField('CustomerID').disableHtmlEncode = false;
} else {
(grid as GridComponent).getColumnByField('CustomerID').disableHtmlEncode = true;
}
(grid as GridComponent).refreshColumns();
})
return (
<div>
<div>
<label style={{ padding: "10px 10px" }}>
Enable or disable HTML Encode
</label>
<SwitchComponent id="switch" change={change}></SwitchComponent>
<GridComponent ref={g => grid = g} dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' />
<ColumnDirective field='CustomerID' headerText='<strong> Customer ID </strong>' width='120' />
<ColumnDirective field='Freight' headerText='Freight' width='150' textAlign='Right' format='C' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='120' />
</ColumnsDirective>
</GridComponent></div></div>)
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: '<b>VINET</b>', 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: '<b>TOMSP</b>', 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: '<b>HANAR</b>', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: '<b>HANAR</b>i 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: '<b>VICTE</b>', 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: '<b>SUPRD</b>', 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: '<b>HANAR</b>', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: '<b>HANAR</b>i 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: '<b>CHOPS</b>', 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: '<b>RICSU</b>', 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: '<b>WELLI</b>', 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: '<b>HILAA</b>', 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: '<b>ERNSH</b>', 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
},
]export let data: Object[] = [
{
OrderID: 10248, CustomerID: '<b>VINET</b>', 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: '<b>TOMSP</b>', 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: '<b>HANAR</b>', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: '<b>HANAR</b>i 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: '<b>VICTE</b>', 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: '<b>SUPRD</b>', 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: '<b>HANAR</b>', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: '<b>HANAR</b>i 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: '<b>CHOPS</b>', 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: '<b>RICSU</b>', 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: '<b>WELLI</b>', 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: '<b>HILAA</b>', 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: '<b>ERNSH</b>', 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
},
]
- The disableHtmlEncode property disables HTML encoding for the corresponding column in the grid.
- If the property is set to true, any HTML tags in the column’s data will be displayed.
- If the property is set to false, the HTML tags will be removed and displayed as plain text.
- Disabling HTML encoding can potentially introduce security vulnerabilities, so use caution when enabling this feature.
- If enableHtmlSanitizer property of grid is set to true, then the content is sanitized to prevent any potential security vulnerabilities.
- You can also disable the
disableHtmlEncodeproperty of the column using getColumns method on change event of Switch component.This is demonstrated in the below code snippet,
const change = ((args:ChangeEventArgs) {
if (args.checked) {
grid.getColumns()[1].disableHtmlEncode = false;
} else {
grid.getColumns()[1].disableHtmlEncode = true;
}
grid.refresh();
});Autowrap the grid content
The auto wrap feature allows the cell content in the grid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Syncfusion Grid, you should set the appropriate width for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically.
To enable auto wrap, set the allowTextWrap property to true. You can also configure the wrap mode by setting the textWrapSettings.wrapMode property.
Grid provides the below three options for configuring:
- Both - This is the default value for wrapMode. With this option, both the grid Header and Content text 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 column width is not specified, then the Autowrap of columns will be adjusted with respect to the grid’s width.
- If a column’s header text contains no white space, the text may not be wrapped.
- If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the headerTemplate and template properties of the column to customize the appearance of the header and cell content.
The following example demonstrates how to set the allowTextWrap property to true and specify the wrap mode as Content by setting the textWrapSettings.wrapMode property. Also change the textWrapSettings.wrapMode property to Content and Both on changing the dropdown value using the change event of the DropDownList component.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import React, { useState } from 'react';
import { inventoryData } from './datasource';
function App() {
const [wrapSettings, setWrapSettings] = useState({ wrapMode: 'Content' });
const dropDownData = [
{ text: 'Content', value: 'Content' },
{ text: 'Both', value: 'Both' },
];
const valueChange = ((args) => {
const newWrapValue = { wrapMode: args.value };
setWrapSettings(newWrapValue);
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Change the wrapmode of auto wrap feature:</label>
<DropDownListComponent dataSource={dropDownData} index={0} width="100" change={valueChange}></DropDownListComponent>
<GridComponent dataSource={inventoryData} height={315} 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>)
}
export default App;import { ColumnDirective, ColumnsDirective, GridComponent, TextWrapSettingsModel } from '@syncfusion/ej2-react-grids';
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import React, { useState } from 'react';
import { inventoryData } from './datasource';
function App() {
const [wrapSettings, setWrapSettings] = useState<TextWrapSettingsModel>({ wrapMode: 'Content' });
const dropDownData: { [key: string]: Object; }[] = [
{ text: 'Content', value: 'Content' },
{ text: 'Both', value: 'Both' },
];
const valueChange = ((args: ChangeEventArgs) => {
const newWrapValue: TextWrapSettingsModel = { wrapMode: args.value };
setWrapSettings(newWrapValue);
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Change the wrapmode of auto wrap feature:</label>
<DropDownListComponent dataSource={dropDownData} index={0} width="100" change={valueChange}></DropDownListComponent>
<GridComponent dataSource={inventoryData} height={315} 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>)
}
export default App;export const 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',
}
];export const inventoryData: Object[] = [
{
'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',
}
];Customize cell styles
Customizing the grid cell styles allows you to modify the appearance of cells in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the cells. To customize the cell styles in the grid, you can use grid event, css, property or method support.
Using event
To customize the appearance of the grid cell, you can use the queryCellInfo event of the grid. This event is triggered when each header cell is rendered in the grid, and provides an object that contains information about the header cell. You can use this object to modify the styles of the header cell.
The following example demonstrates how to add a queryCellInfo event handler to the grid. In the event handler, checked whether the current column is Freight field and then applied the appropriate CSS class to the cell based on its value.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const customizeCell = (args) => {
if (args.column.field === "Freight") {
if (args.data[args.column.field] <= 30) {
args.cell.classList.add('below-30');
} else if (args.data[args.column.field] > 30 && args.data[args.column.field] < 80) {
args.cell.classList.add('below-80');
} else {
args.cell.classList.add('above-80');
}
}
};
return (<div>
<GridComponent dataSource={data} height={315} enableHover={false} allowSelection={false} queryCellInfo={customizeCell}>
<ColumnsDirective>
<ColumnDirective field="OrderID" headerText="Order ID" width="100" textAlign="Right" />
<ColumnDirective field="CustomerID" headerText="Customer ID" width="100" />
<ColumnDirective field="EmployeeID" headerText="Employee ID" width="100" textAlign="Right" />
<ColumnDirective field="Freight" headerText="Freight" width="80" textAlign="Right" format="C2" />
<ColumnDirective field="ShipCountry" headerText="Ship Country" width="100" />
</ColumnsDirective>
</GridComponent>
</div>);
}
;
export default App;import { ColumnDirective, ColumnsDirective, GridComponent, QueryCellInfoEventArgs } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const customizeCell = (args: QueryCellInfoEventArgs) => {
if (args.column.field === "Freight") {
if (args.data[args.column.field] <= 30) {
args.cell.classList.add('below-30');
} else if (args.data[args.column.field] > 30 && args.data[args.column.field] < 80) {
args.cell.classList.add('below-80');
} else {
args.cell.classList.add('above-80');
}
}
}
return (<div>
<GridComponent dataSource={data} height={315} enableHover={false} allowSelection={false}
queryCellInfo={customizeCell}>
<ColumnsDirective>
<ColumnDirective field="OrderID" headerText="Order ID" width="100" textAlign="Right" />
<ColumnDirective field="CustomerID" headerText="Customer ID" width="100" />
<ColumnDirective field="EmployeeID" headerText="Employee ID" width="100" textAlign="Right" />
<ColumnDirective field="Freight" headerText="Freight" width="80" textAlign="Right" format="C2" />
<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
}];
- The queryCellInfo event is triggered for every cell of the grid, so it may impact the performance of the grid whether used to modify a large number of cells.
Using CSS
You can apply styles to the cells using CSS selectors. The Grid provides a class name for each cell element, which you can use to apply styles to that specific cell or cells in a particular column. The e-rowcell class is used to style the row cells, and the e-selectionbackground class is used to change the background color of the selected row.
.e-grid td.e-cellselectionbackground {
background: #9ac5ee;
font-style: italic;
}The following example demonstrates how to customize the appearance of a specific row in the grid on selection using className.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const selectOptions = {
type: 'Multiple',
mode: 'Cell'
}
return (
<div>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent dataSource={data} height={315} selectionSettings={selectOptions}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='100' />
<ColumnDirective field='Freight' headerText='Freight' width='100' />
<ColumnDirective field='ShipCountry' headerText='ShipCountry' width='140' />
</ColumnsDirective>
</GridComponent></div></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, GridComponent, SelectionSettingsModel } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const selectOptions: SelectionSettingsModel = {
type: 'Multiple',
mode: 'Cell'
}
return (
<div>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent dataSource={data} height={315} selectionSettings={selectOptions}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='100' />
<ColumnDirective field='Freight' headerText='Freight' width='100' />
<ColumnDirective field='ShipCountry' headerText='ShipCountry' width='140' />
</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
}];Using property
To customize the style of grid cells, define customAttributes property to the column definition object. The customAttributes property takes an object with the name-value pair to customize the CSS properties for grid cells. You can also set multiple CSS properties to the custom class using the customAttributes property.
.custom-css {
background: #d7f0f4;
font-style: italic;
color:navy
}Here, setting the customAttributes property of the ShipCity column to an object that contains the CSS class ‘custom-css’. This CSS class will be applied to all the cells in the ShipCity column of the grid.
<ColumnDirective field="OrderID" headerText="Order ID" customAttributes={class: 'custom-css'} width="100" textAlign="Right" />The following example demonstrates how to customize the appearance of the OrderID and ShipCity columns using custom attributes.
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} enableHover={false} allowSelection={false}>
<ColumnsDirective>
<ColumnDirective field="OrderID" headerText="Order ID" customAttributes={{class: 'custom-css'}} width="100" textAlign="Right" />
<ColumnDirective field="CustomerID" headerText="Customer ID" width="100" />
<ColumnDirective field="EmployeeID" headerText="Employee ID" customAttributes={{class: 'custom-css'}} width="100" textAlign="Right" />
<ColumnDirective field="Freight" headerText="Freight" width="80" textAlign="Right" format="C2" />
<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() {
return (<div>
<GridComponent dataSource={data} height={315} enableHover={false} allowSelection={false}>
<ColumnsDirective>
<ColumnDirective field="OrderID" headerText="Order ID" customAttributes={{class: 'custom-css'}} width="100" textAlign="Right" />
<ColumnDirective field="CustomerID" headerText="Customer ID" width="100" />
<ColumnDirective field="EmployeeID" headerText="Employee ID" customAttributes={{class: 'custom-css'}} width="100" textAlign="Right" />
<ColumnDirective field="Freight" headerText="Freight" width="80" textAlign="Right" format="C2" />
<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 attributes can be used to customize any cell in the grid, including header and footer cells.
Using methods
The Grid provides below methods to customize the appearance of the grid columns header and cell:
-
getHeaderContent: The
getHeaderContentmethod is used to customize the appearance of the column header in the grid and accessing the header element using thequerySelectormethod and applying the style using the style property of the cell element. -
getCellFromIndex: The
getCellFromIndexmethod is used to customize the appearance of a specific cell in the grid by specifying the index of the row and column for which you want to customize the appearance.
The following example demonstrates how to use getColumnHeaderByIndex and getCellFromIndex methods to customize the appearance of the CustomerID column header and specific cell inside the dataBound event of the grid.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const dataBound = (() => {
let header = grid.getHeaderContent().querySelector('.e-headercell');
header.style.backgroundColor = 'red';
header.style.color = 'white';
let cell = grid.getCellFromIndex(1, 2);
cell.style.background = '#f9920b';
cell.style.color = 'white';
});
return (
<div>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent dataSource={data} height={315} ref={g => grid = g} dataBound={dataBound}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='100' />
<ColumnDirective field='Freight' headerText='Freight' width='100' />
<ColumnDirective field='ShipCountry' headerText='ShipCountry' width='140' />
</ColumnsDirective>
</GridComponent></div></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: GridComponent | null;
const dataBound = (() => {
let header = (grid as GridComponent).getHeaderContent().querySelector('.e-headercell');
header.style.backgroundColor = 'red';
header.style.color = 'white';
let cell = (grid as GridComponent).getCellFromIndex(1, 2);
cell.style.background = '#f9920b';
cell.style.color = 'white';
});
return (
<div>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent dataSource={data} height={315} ref={g => grid = g} dataBound={dataBound}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='100' />
<ColumnDirective field='Freight' headerText='Freight' width='100' />
<ColumnDirective field='ShipCountry' headerText='ShipCountry' width='140' />
</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
}];Make sure to pass the correct row and column indices to getCellFromIndex method, or else the appearance of the wrong cell might get customized.
Clip mode
The clip mode feature is useful when you have a long text or content in a grid cell, which overflows the cell’s width or height. It provides options to display the overflow content by either truncating it, displaying an ellipsis or displaying an ellipsis with a tooltip. You can enable this feature by setting clipMode property to one of the below available options.
There are three types of clipMode available:
- Clip: Truncates the cell content when it overflows its area.
- Ellipsis: Displays ellipsis when the cell content overflows its area.
- EllipsisWithTooltip: Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied. Also it will display the tooltip while hover on ellipsis is applied.
The following example demonstrates, how to set the clipMode property to Clip for the Name of the Inventor column, Ellipsis for the Number of Patent Families column, and EllipsisWithTooltip for the Main Fields of Invention column, on changing the dropdown value using the change event of the DropDownList component.
import { ClipMode, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { inventoryData } from './datasource';
function App() {
let grid;
const dropDownData = [
{ text: 'Ellipsis', value: 'Ellipsis' },
{ text: 'Clip', value: 'Clip' },
{ text: 'EllipsisWithTooltip', value: 'EllipsisWithTooltip' }
];
const valueChange = ((args) => {
grid.getColumnByField('Mainfieldsofinvention').clipMode = args.value ;
grid.refreshColumns();
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}> Change the clip mode: </label>
<DropDownListComponent dataSource={dropDownData} index={0} width="100" change={valueChange}></DropDownListComponent>
<GridComponent dataSource={inventoryData} height={315} ref={g => grid = g} allowPaging={true}>
<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>)
}
export default App;import { ClipMode, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { inventoryData } from './datasource';
function App() {
let grid: GridComponent | null;
const dropDownData: { [key: string]: Object; }[] = [
{ text: 'Ellipsis', value: 'Ellipsis' },
{ text: 'Clip', value: 'Clip' },
{ text: 'EllipsisWithTooltip', value: 'EllipsisWithTooltip' }
];
const valueChange = ((args: ChangeEventArgs) => {
(grid as GridComponent).getColumnByField('Mainfieldsofinvention').clipMode = args.value as ClipMode;
(grid as GridComponent).refreshColumns();
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}> Change the clip mode: </label>
<DropDownListComponent dataSource={dropDownData} index={0} width="100" change={valueChange}></DropDownListComponent>
<GridComponent dataSource={inventoryData} height={315} ref={g => grid = g} allowPaging={true}>
<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>)
}
export default App;export const 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',
}
];export const inventoryData: Object[] = [
{
'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',
}
];
- By default, clipMode value is Ellipsis.
- If you set the width property of a column, the clip mode feature will be automatically applied to that column if the content exceeds the specified width.
- Be careful when using the Clip mode, as it may result in important information being cut off. It is generally recommended to use the Ellipsis or EllipsisWithTooltip modes instead.
Tooltip
The Syncfusion Grid allows you to display information about the grid columns to the user when they hover over them with the mouse.
Render bootstrap tooltip in grid cells
The Grid component allows rendering Bootstrap tooltips in the cells. To enable this feature, you need to add the Bootstrap link.
This is demonstrated in the sample code below which shows how to enable Bootstrap tooltip for the CustomerID field using template in grid cells,
Step 1: Run the following command to install the Bootstrap package using npm.
npm install react-bootstrap
npm install bootstrap
Step 2: You need to import the below required files in your component.
import Tooltip from 'react-bootstrap/Tooltip';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import 'bootstrap/dist/css/bootstrap.min.css';Step 3: The following code demonstrates how to render Bootstrap tooltip for the CustomerID field with template on grid cells,
import React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import Tooltip from 'react-bootstrap/Tooltip';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import 'bootstrap/dist/css/bootstrap.min.css';
import { data } from './datasource';
const customerIDTemplate = (props:any) => {
return (
<div className="tooltip-container">
<div className="col-md-2" style={textAlign:"right"}>
<OverlayTrigger
data-placement="left"
overlay={<Tooltip id={`tooltip-${props.CustomerID}`}>{props.CustomerID}</Tooltip>}
>
<div>
<i className="fas fa-pencil-alt"></i>
{props.CustomerID}
</div>
</OverlayTrigger></div>
</div>
);
};
function App() {
return (
<div>
<GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field='CustomerID' headerText='CustomerID' width='100' template={customerIDTemplate} />
<ColumnDirective field='Freight' headerText='Freight' width='100' format='C' />
<ColumnDirective field='ShipCountry' headerText='ShipCountry' width='140' />
</ColumnsDirective>
</GridComponent>
</div>
);
}
export default App;The following screenshot represents the Bootstrap tooltip for the CustomerID field,
- The Bootstrap link must be import to the App.tsx file.
Display custom tooltip for columns
The Grid provides a feature to display custom tooltips for its columns using the EJ2 Tooltip component. This allows you to provide additional information about the columns when the user hovers over them.
To enable custom tooltips for columns in the Grid, you can render the Grid control inside the Tooltip component and set the target as .e-rowcell. This will display the tooltip when hovering over the grid cells.
Change the tooltip content for the grid cells by using the following code in the beforeRender event.
const beforeRender = (args: TooltipEventArgs) => {
if (args.target.classList.contains('e-rowcell')) {
// event triggered before render the tooltip on target element.
tooltip.content = 'This is value "' + args.target.innerText + '" ';
}
}The following example demonstrates how to customize the tooltip content for the grid cells by using the beforeRender event of the EJ2 Tooltip component.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
let toolTip;
const beforeRender = ((args) => {
if (args.target.classList.contains('e-rowcell')) {
toolTip.content = 'This is value "' + args.target.innerText + '" ';
}
});
return (
<div>
<TooltipComponent ref={t => toolTip = t} beforeRender={beforeRender} target=".e-rowcell">
<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></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 beforeRender = ((args: TooltipEventArgs) => {
if (args.target.classList.contains('e-rowcell')) {
(toolTip as TooltipComponent).content = 'This is value "' + args.target.innerText + '" ';
}
});
return (
<div>
<TooltipComponent ref={t => toolTip = t} beforeRender={beforeRender} target=".e-rowcell">
<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></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
},
{
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
}];Grid lines
The gridLines in a grid are used to separate the cells with horizontal and vertical lines for better readability. You can enable the grid lines by setting the gridLines property to one of the following values:
| Modes | Actions |
|---|---|
| Both | Displays both the horizontal and vertical grid lines. |
| None | No grid lines are displayed. |
| Horizontal | Displays the horizontal grid lines only. |
| Vertical | Displays the vertical grid lines only. |
| Default | Displays grid lines based on the theme. |
The following example demonstrates how to set the gridLines property based on changing the dropdown value using the change event of the DropDownList component.
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { inventoryData } from './datasource';
function App() {
const [gridLine, setGridLine] = useState('Default');
const dropDownData = [
{ text: 'Default', value: 'Default' },
{ text: 'Both', value: 'Both' },
{ text: 'Horizontal', value: 'Horizontal' },
{ text: 'Vertical', value: 'Vertical' },
{ text: 'None', value: 'None' }
];
const valueChange = ((args) => {
setGridLine(args.value);
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Change the grid lines:</label>
<DropDownListComponent dataSource={dropDownData} index={0} width="100" change={valueChange}></DropDownListComponent>
<GridComponent dataSource={inventoryData} height={315} gridLines={gridLine}>
<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>)
}
export default App;import { ColumnDirective, ColumnsDirective, GridComponent, GridLine } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent, ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import React, { useState } from 'react';
import { inventoryData } from './datasource';
function App() {
const [gridLine, setGridLine] = useState<GridLine>('Default');
const dropDownData: any = [
{ text: 'Default', value: 'Default' },
{ text: 'Both', value: 'Both' },
{ text: 'Horizontal', value: 'Horizontal' },
{ text: 'Vertical', value: 'Vertical' },
{ text: 'None', value: 'None' }
];
const valueChange = ((args: ChangeEventArgs) => {
setGridLine(args.value);
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Change the grid lines:</label>
<DropDownListComponent dataSource={dropDownData} index={0} width="100" change={valueChange}></DropDownListComponent>
<GridComponent dataSource={inventoryData} height={315} gridLines={gridLine}>
<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>)
}
export default App;export const 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',
}
];export const inventoryData: Object[] = [
{
'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',
}
];By default, the grid renders with Default mode.