How can I help you?
Cell in React Grid Component
17 Feb 202624 minutes to read
A cell in the Syncfusion® React Grid component represents the smallest unit of data within the grid. Each cell corresponds to the intersection of a row and a column, and it is responsible for displaying the value associated with that specific row-column combination. Cells can display plain text, formatted values, or fully customized content, making them highly flexible for presenting structured data in a grid layout.
Displaying the HTML content
Displaying HTML content in a Grid can be useful when displaying formatted content, such as images, links, or tables, in a tabular format. The Grid component allows HTML tags to be displayed in the Grid header and content. By default, HTML content is encoded to prevent potential security vulnerabilities. However, the disableHtmlEncode property can be set to false to display HTML tags without encoding. This feature is useful when displaying 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' textAlign='Right' />
<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' textAlign='Right' />
<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.- The
disableHtmlEncodeproperty of the column can also be disabled using getColumns method on change event of Switch component. This is demonstrated in the following 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 cell content in the grid to wrap to the next line when it exceeds the boundary of the specified cell width. Cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Syncfusion® React Grid, an appropriate width must be set for the columns. The column width defines the maximum width of a column and helps wrap content automatically.
To enable auto wrap, set the allowTextWrap property to true. The wrap mode can also be configured 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
widthis not specified, then the Autowrap of columns will be adjusted with respect to the grid’swidth.- 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, the headerTemplate and template properties of the column can be used to customize the appearance of the header and cell content.
The following example demonstrates setting 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' textAlign='Right' 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' textAlign='Right' 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 grid cell styles allows modification of cell appearance in the Grid control to meet specific design requirements. The font, background color, and other cell styles can be customized using grid events, CSS, properties, or method support.
Using event
The queryCellInfo event of the grid can be used to customize cell appearance. This event triggers when the grid renders each header cell and provides an object containing information about the header cell. This object can be used to modify header cell styles.
The following example demonstrates adding the queryCellInfo event handler to the grid. In the event handler, the current column is checked to determine if it is the “Freight” field, and the appropriate CSS class is applied 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 grid performance when used to modify a large number of cells.
Using CSS
Styles can be applied to cells using CSS selectors. The Grid provides a class name for each cell element, which can be used to apply styles to specific cells or cells in a particular column. The e-rowcell class is used to style row cells, and the e-selectionbackground class is used to change the background color of selected rows.
.e-grid td.e-cellselectionbackground {
background: #9ac5ee;
font-style: italic;
}The following example demonstrates customizing 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='Order ID' width='100' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100' />
<ColumnDirective field='Freight' headerText='Freight' width='100' textAlign='Right' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' 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='Order ID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100' />
<ColumnDirective field='Freight' headerText='Freight' width='100' textAlign="Right"/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' 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 the customAttributes property in the column definition object. The customAttributes property takes an object with name-value pairs to customize CSS properties for grid cells. Multiple CSS properties can be set to the custom class using the customAttributes property.
.custom-css {
background: #d7f0f4;
font-style: italic;
color:navy
}Here, the customAttributes property of the “Ship City” column is set to an object that contains the CSS class “custom-css”. This CSS class is applied to all cells in the “Ship City” column of the grid.
<ColumnDirective field="OrderID" headerText="Order ID" customAttributes={class: 'custom-css'} width="100" textAlign="Right" />The following example demonstrates customizing the appearance of the “Order ID” and “Ship City” 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 the following methods to customize the appearance of grid column headers and cells:
-
getHeaderContent: The
getHeaderContentmethod is used to customize column header appearance. The header element is accessed using thequerySelectormethod, and styles are applied using thestyleproperty of the cell element. -
getCellFromIndex: The
getCellFromIndexmethod is used to customize the appearance of a specific cell in the grid by specifying the row and column index of the target cell.
The following example demonstrates the use of the 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='Order ID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100' />
<ColumnDirective field='Freight' headerText='Freight' width='100' textAlign="Right"/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' 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='Order ID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100' />
<ColumnDirective field='Freight' headerText='Freight' width='100' textAlign="Right"/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' 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 grid cells contain long text or content that overflows the cell’s width or height. It provides options to display overflow content by truncating it, displaying an ellipsis, or displaying an ellipsis with a tooltip. This feature is enabled by setting the clipMode property to one of the available options.
Three types of clipMode are 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. It also displays a tooltip when hover over the ellipsis.
The following example demonstrates, setting 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' textAlign='Right' 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' textAlign='Right' 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.- When the width property is set for a column, the clip mode feature is automatically applied to that column if content exceeds the specified width.
- The Clip mode should be used with caution, as it may result in important information being truncated. The
EllipsisorEllipsisWithTooltipmodes are generally recommended instead.
Tooltip
The Syncfusion® React Grid displays information about grid columns when the user hovers over them with the mouse.
Render bootstrap tooltip in grid cells
The Grid component allows rendering “Bootstrap” tooltips in cells. To enable this feature, the “Bootstrap” link must be added.
The sample code below demonstrates enabling a “Bootstrap” tooltip for the “CustomerID” field by using a template to customize the content of the corresponding grid cells.
Step 1: Run the following command to install the Bootstrap package using npm.
npm install react-bootstrap
npm install bootstrapStep 2: Import the following required files in the 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 rendering “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='Order ID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100' template={customerIDTemplate} />
<ColumnDirective field='Freight' headerText='Freight' width='100' format='C' textAlign="Right"/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='140' />
</ColumnsDirective>
</GridComponent>
</div>
);
}
export default App;
The Bootstrap link must be imported in 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 providing additional information about columns when the user hovers over them.
To enable custom tooltips for columns in the grid, the Grid control is rendered inside the Tooltip component and the target is set as .e-rowcell. This displays the tooltip when hovering over grid cells.
The tooltip content for grid cells can be changed 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 customizing the tooltip content for 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' textAlign='Right'/>
<ColumnDirective field='CustomerID' headerText='CustomerID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' textAlign='Right'/>
<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' textAlign='Right'/>
<ColumnDirective field='CustomerID' headerText='CustomerID' width='120' />
<ColumnDirective field='Freight' headerText='Freight' format='C' width='80' textAlign='Right'/>
<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 cells with horizontal and vertical lines for better readability. Grid lines are enabled 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 setting 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 React, { useState } 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' textAlign='Right' 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' textAlign='Right' 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
Defaultmode.