How can I help you?
Column Pinning (Frozen) in React Grid component
17 Feb 202624 minutes to read
The Syncfusion® React Grid provides a column pinning (freezing) feature that keeps “selected columns” visible while scrolling across large datasets. This improves readability by ensuring that important information remains accessible, even when working with wide tables.
In a frozen layout, chosen columns remain fixed on either the left or right side of the Grid, while other columns continue to scroll horizontally. This makes it easier to compare and analyze data without losing sight of key details.
To enable frozen columns, the Freeze module must be injected into the Grid.
import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Freeze } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
function App() {
return (
<GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='150' freeze='Left' />
. . .
. . .
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' freeze='Right' />
</ColumnsDirective>
<Inject services={[Freeze]} />
</GridComponent>
);
}
export default App;Freeze direction
The Grid supports different freeze directions, which determine where frozen columns appear. By setting the freeze property in a column definition, columns can be pinned to the left, right, or fixed in place. This makes it easy to keep important columns visible while scrolling and gives flexibility when designing grids with multiple frozen sections.
The Grid supports three freeze direction types:
| Direction | Description | Behavior |
|---|---|---|
Left |
Freezes columns on the left side | Frozen columns remain fixed on the left while other columns scroll horizontally |
Right |
Freezes columns on the right side | Frozen columns remain fixed on the right while other columns scroll horizontally |
Fixed |
Locks columns at a specific position | Frozen columns stay fixed in their position, creating a locked section between scrollable areas |
Combining Freeze Directions
The following table illustrates the behavior of columns when different freeze directions are applied:
| Scenario | Result |
|---|---|
| Only Left freeze | Left-frozen columns stay fixed on the left; remaining columns scroll |
| Only Right freeze | Right-frozen columns stay fixed on the right; remaining columns scroll |
| Left + Right freeze | Left columns fixed on left, right columns fixed on right; middle columns scroll |
| Left + Fixed + Right | Creates three sections: left-frozen, middle-frozen (fixed), and right-frozen, with scrollable areas between them |
The following example demonstrates multiple freeze directions in action. The “Ship Country” column is frozen on the left side by default. The example allows dynamically changing the freeze direction of any column using a DropDownList component. Select a column and choose a freeze direction (Left, Right, or Fixed) to observe the effect on column positioning.
import { ColumnDirective, ColumnsDirective, Freeze, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let grid;
let columnDropDown;
let directionDropDown;
const field = { text: 'name', value: 'id' };
const columnData = [
{ id: 'OrderID', name: 'Order ID' },
{ id: 'CustomerID', name: 'Customer ID' },
{ id: 'OrderDate', name: 'Order Date' },
{ id: 'ShipName', name: 'Ship Name' },
{ id: 'ShipCity', name: 'Ship City' },
{ id: 'ShipCountry', name: 'Ship Country' },
{ id: 'ShipRegion', name: 'Ship Region' },
{ id: 'ShipAddress', name: 'Ship Address' },
{ id: 'Freight', name: 'Freight' },
]
const directionData = [
{ id: 'Left', name: 'Left' },
{ id: 'Right', name: 'Right' },
{ id: 'Fixed', name: 'Fixed' },
]
const freezeColumnfn = (() => {
grid.getColumnByField(columnDropDown.value).freeze = directionDropDown.value
grid.refreshColumns();
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Change column:</label>
<DropDownListComponent id='columnData' ref={c => columnDropDown = c} index={5} width={120} fields={field} dataSource={columnData}></DropDownListComponent>
<label style={{ padding: "10px 10px 26px 0", marginLeft: "5px" }}>Change freeze direction:</label>
<DropDownListComponent id='directionData' ref={c => directionDropDown = c} index={0} width={100} fields={field} dataSource={directionData}></DropDownListComponent>
<ButtonComponent style={{ marginLeft: '5px' }} onClick={freezeColumnfn}>Update</ButtonComponent>
<GridComponent dataSource={data} height={315} ref={g => grid = g} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='150' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='180' />
<ColumnDirective field='Freight' headerText='Freight' width='120' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='200' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' freeze='Left' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='180' />
<ColumnDirective field='ShipRegion' headerText='Ship Region' width='220' />
<ColumnDirective field='ShipAddress' headerText='Ship Address' width='200' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' />
</ColumnsDirective>
<Inject services={[Freeze]} />
</GridComponent></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, Freeze, freezeDirection, Grid, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
let grid: Grid | null;
let columnDropDown: DropDownListComponent | null;
let directionDropDown: DropDownListComponent | null;
const field: object = { text: 'name', value: 'id' };
const columnData: any = [
{ id: 'OrderID', name: 'Order ID' },
{ id: 'CustomerID', name: 'Customer ID' },
{ id: 'OrderDate', name: 'Order Date' },
{ id: 'ShipName', name: 'Ship Name' },
{ id: 'ShipCity', name: 'Ship City' },
{ id: 'ShipCountry', name: 'Ship Country' },
{ id: 'ShipRegion', name: 'Ship Region' },
{ id: 'ShipAddress', name: 'Ship Address' },
{ id: 'Freight', name: 'Freight' },
]
const directionData: any = [
{ id: 'Left', name: 'Left' },
{ id: 'Right', name: 'Right' },
{ id: 'Fixed', name: 'Fixed' },
]
const freezeColumnfn = (() => {
(grid as any).getColumnByField((columnDropDown as DropDownListComponent).value as string).freeze = (directionDropDown as DropDownListComponent).value as freezeDirection
(grid as any).refreshColumns();
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Change column:</label>
<DropDownListComponent id='columnData' ref={c => columnDropDown = c} index={5} width={120} fields={field} dataSource={columnData}></DropDownListComponent>
<label style={{ padding: "10px 10px 26px 0", marginLeft: "5px" }}>Change freeze direction:</label>
<DropDownListComponent id='directionData' ref={c => directionDropDown = c} index={0} width={100} fields={field} dataSource={directionData}></DropDownListComponent>
<ButtonComponent style={{ marginLeft: '5px' }} onClick={freezeColumnfn}>Update</ButtonComponent>
<GridComponent dataSource={data} height={315} ref={g => grid = g} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='150'/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='180' />
<ColumnDirective field='Freight' headerText='Freight' width='120' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='200' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' freeze='Left' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='180' />
<ColumnDirective field='ShipRegion' headerText='Ship Region' width='220' />
<ColumnDirective field='ShipAddress' headerText='Ship Address' width='200' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' />
</ColumnsDirective>
<Inject services={[Freeze]} />
</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
}];If a column should no longer remain frozen, the
freezeproperty can be set toNonein the column definition. This action removes the frozen state and the column will behave like a normal scrollable column, moving along with the rest of the Grid content.
Freeze particular columns
The Grid provides a straightforward way to freeze individual columns on the left side using the isFrozen property in the column definition. When this property is set to true, the chosen column is locked at the leftmost position of the Grid and remains visible while scrolling horizontally.
The following example demonstrates freezing a particular column using the isFrozen property. Initially, the “OrderID” column is frozen. The change event of the DropDownList component allows dynamically changing which column is frozen. The selected column’s isFrozen property is modified using the getColumnByField method, and the refreshColumns method updates the display.
import { ColumnDirective, ColumnsDirective, Freeze, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid;
const field = { text: 'text', value: 'value' };
const ddlData = [
{ text: 'OrderID', value: 'Order ID' },
{ text: 'CustomerID', value: 'Customer ID' },
{ text: 'OrderDate', value: 'Order Date' },
{ text: 'ShipName', value: 'Ship Name' },
{ text: 'ShipCity', value: 'Ship City' },
{ text: 'ShipCountry', value: 'Ship Country' },
{ text: 'ShipRegion', value: 'Ship Region' },
{ text: 'ShipAddress', value: 'Ship Address' },
{ text: 'Freight', value: 'Freight' },
]
const columnChange = ((args) => {
const selectedColumn = grid.getColumnByField(args.value);
// Iterate through all columns and unfreeze any previously frozen columns
grid.columns.forEach((column) => {
if (column.isFrozen) {
column.isFrozen = false;
}
});
// Freeze the newly selected column, if it exists
if (selectedColumn) {
selectedColumn.isFrozen = true;
}
// Refresh the columns
grid.refreshColumns();
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Change the frozen column:</label>
<DropDownListComponent id='dropdown' index={0} width={150} fields={field} dataSource={ddlData} change={columnChange}></DropDownListComponent>
<GridComponent dataSource={data} height={315} ref={g => grid = g} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='150' isFrozen={true} />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='180' />
<ColumnDirective field='Freight' headerText='Freight' width='120' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='200' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='180' />
<ColumnDirective field='ShipRegion' headerText='Ship Region' width='220' />
<ColumnDirective field='ShipAddress' headerText='Ship Address' width='200' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' />
</ColumnsDirective>
<Inject services={[Freeze]} />
</GridComponent></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, Freeze, Grid, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import { data } from './datasource';
function App() {
let grid: Grid | null;
const field: any = { text: 'text', value: 'value' };
const ddlData: any = [
{ text: 'OrderID', value: 'Order ID' },
{ text: 'CustomerID', value: 'Customer ID' },
{ text: 'OrderDate', value: 'Order Date' },
{ text: 'ShipName', value: 'Ship Name' },
{ text: 'ShipCity', value: 'Ship City' },
{ text: 'ShipCountry', value: 'Ship Country' },
{ text: 'ShipRegion', value: 'Ship Region' },
{ text: 'ShipAddress', value: 'Ship Address' },
{ text: 'Freight', value: 'Freight' },
]
const columnChange = ((args: ChangeEventArgs) => {
const selectedColumn = (grid as any).getColumnByField(args.value as string);
// Iterate through all columns and unfreeze any previously frozen columns
((grid as any).columns).forEach((column: any) => {
if (column.isFrozen) {
column.isFrozen = false;
}
});
// Freeze the newly selected column, if it exists
if (selectedColumn) {
selectedColumn.isFrozen = true;
}
// Refresh the columns
(grid as any).refreshColumns();
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Change the frozen column:</label>
<DropDownListComponent id='dropdown' index={0} width={150} fields={field} dataSource={ddlData} change={columnChange}></DropDownListComponent>
<GridComponent dataSource={data} height={315} ref={g => grid = g} >
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='150' isFrozen={true} />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='180' />
<ColumnDirective field='Freight' headerText='Freight' width='120' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='200' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='180' />
<ColumnDirective field='ShipRegion' headerText='Ship Region' width='220' />
<ColumnDirective field='ShipAddress' headerText='Ship Address' width='200' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' />
</ColumnsDirective>
<Inject services={[Freeze]} />
</GridComponent></div>)
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
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),ShippedDate: 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: 'VINET', EmployeeID: 3, OrderDate: new Date(8367642e5),ShippedDate: 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),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'VINET', EmployeeID: 9, OrderDate: new Date(8371098e5),ShippedDate: new Date(8367642e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(837369e6),ShippedDate: new Date(8367642e5),
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: 'VINET', EmployeeID: 4, OrderDate: new Date(8374554e5),ShippedDate: new Date(8367642e5),
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: 'VINET', EmployeeID: 1, OrderDate: new Date(8375418e5),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
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: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5),
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: 'VINET', EmployeeID: 8, OrderDate: new Date(8379738e5),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
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),ShippedDate: 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: 'VINET', EmployeeID: 3, OrderDate: new Date(8367642e5),ShippedDate: 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),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'VINET', EmployeeID: 9, OrderDate: new Date(8371098e5),ShippedDate: new Date(8367642e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(837369e6),ShippedDate: new Date(8367642e5),
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: 'VINET', EmployeeID: 4, OrderDate: new Date(8374554e5),ShippedDate: new Date(8367642e5),
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: 'VINET', EmployeeID: 1, OrderDate: new Date(8375418e5),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
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: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5),
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: 'VINET', EmployeeID: 8, OrderDate: new Date(8379738e5),ShippedDate: new Date(8367642e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];By default, when using
frozenColumnsorisFrozenproperties, columns freeze on the left side.
Auto-Generated columns with frozen support
When columns are not explicitly defined using ColumnDirective, the Grid automatically generates them based on the bound data source. Even in this scenario, the frozenColumns property can be applied to lock the first n auto-generated columns on the left side of the Grid.
The frozenColumns property accepts a numeric value that determines how many columns remain frozen during initialization. For example, setting frozenColumns to “2” will freeze the first two columns created from the data source. These columns stay visible while scrolling horizontally.
The following example demonstrates the frozenColumns property set to “2”. This configuration freezes the first two auto-generated columns, such as “OrderID” and “CustomerID”, keeping them fixed on the left side of the Grid. The remaining columns continue to support horizontal scrolling.
import { ColumnDirective, ColumnsDirective, Freeze, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let grid;
let textBox;
const frozenColumn = (() => {
grid.frozenColumns = textBox.value;
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Change the frozen columns:</label>
<NumericTextBoxComponent id='frozencolums' ref={t => textBox = t} min={0} max={3} validateDecimalOnType={true} decimals={0} format='n' value={2} width={100}></NumericTextBoxComponent>
<ButtonComponent style={{ marginLeft: '5px' }} onClick={frozenColumn}>UPDATE</ButtonComponent>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent dataSource={data} height={315} ref={g => grid = g} frozenColumns={2}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='150' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='180' />
<ColumnDirective field='Freight' headerText='Freight' width='120' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='200' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='180' />
<ColumnDirective field='ShipRegion' headerText='Ship Region' width='220' />
<ColumnDirective field='ShipAddress' headerText='Ship Address' width='200' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' />
</ColumnsDirective>
<Inject services={[Freeze]} />
</GridComponent></div></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, Freeze, Grid, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
function App() {
let grid: Grid | null;
let textBox: NumericTextBoxComponent | null;
const frozenColumn = (() => {
(grid as any).frozenColumns = (textBox as any).value;
})
return (
<div>
<label style={{ padding: '30px 17px 0 0' }}>Change the frozen columns:</label>
<NumericTextBoxComponent id='frozencolums' ref={t => textBox = t} min={0} max={3} validateDecimalOnType={true} decimals={0} format='n' value={2} width={100}></NumericTextBoxComponent>
<ButtonComponent style={{ marginLeft: '5px' }} onClick={frozenColumn}>UPDATE</ButtonComponent>
<div style={{ padding: '40px 0 0 0' }}>
<GridComponent dataSource={data} height={315} ref={g => grid = g} frozenColumns={2}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='150' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='180' />
<ColumnDirective field='Freight' headerText='Freight' width='120' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='200' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='180' />
<ColumnDirective field='ShipRegion' headerText='Ship Region' width='220' />
<ColumnDirective field='ShipAddress' headerText='Ship Address' width='200' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' />
</ColumnsDirective>
<Inject services={[Freeze]} />
</GridComponent></div></div>)
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
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),ShippedDate: 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: 'VINET', EmployeeID: 3, OrderDate: new Date(8367642e5),ShippedDate: 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),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'VINET', EmployeeID: 9, OrderDate: new Date(8371098e5),ShippedDate: new Date(8367642e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(837369e6),ShippedDate: new Date(8367642e5),
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: 'VINET', EmployeeID: 4, OrderDate: new Date(8374554e5),ShippedDate: new Date(8367642e5),
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: 'VINET', EmployeeID: 1, OrderDate: new Date(8375418e5),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
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: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5),
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: 'VINET', EmployeeID: 8, OrderDate: new Date(8379738e5),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
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),ShippedDate: 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: 'VINET', EmployeeID: 3, OrderDate: new Date(8367642e5),ShippedDate: 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),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'VINET', EmployeeID: 9, OrderDate: new Date(8371098e5),ShippedDate: new Date(8367642e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(837369e6),ShippedDate: new Date(8367642e5),
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: 'VINET', EmployeeID: 4, OrderDate: new Date(8374554e5),ShippedDate: new Date(8367642e5),
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: 'VINET', EmployeeID: 1, OrderDate: new Date(8375418e5),ShippedDate: new Date(8367642e5),
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),ShippedDate: new Date(8367642e5),
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: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8377146e5),ShippedDate: new Date(8367642e5),
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: 'VINET', EmployeeID: 8, OrderDate: new Date(8379738e5),ShippedDate: new Date(8367642e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];
- The frozen column count should not exceed the total number of visible columns in the Grid.
- Frozen columns should be within the Grid viewport for proper functionality.
- Column virtualization is supported for frozen columns, improving performance when loading large datasets.
- The frozen feature works only with columns visible in the current view.
- Both
frozenColumnsand frozenRows properties can be used simultaneously in the same Grid.
This is achieved using theeditproperty of the column definition, which accepts an object with custom editor methods.
Customize frozen line color
The visual separator between frozen and scrollable columns (the “frozen line”) can be customized to match application design requirements. Custom CSS styles can be applied to change the border color for left, right, and fixed frozen columns. The Grid applies specific CSS classes to frozen column borders based on their freeze direction. These classes can be targeted to customize the frozen line appearance.
For left frozen columns:
.e-grid .e-leftfreeze.e-freezeleftborder {
border-right-color: rgb(198, 30, 204); /* Purple border */
}For right frozen columns:
.e-grid .e-rightfreeze.e-freezerightborder {
border-left-color: rgb(19, 228, 243); /* Cyan border */
}For fixed frozen columns:
Specify both left and right borders:
.e-grid .e-fixedfreeze.e-freezeleftborder {
border-left-color: rgb(9, 209, 9); /* Green left border */
}
.e-grid .e-fixedfreeze.e-freezerightborder {
border-right-color: rgb(10, 224, 10); /* Green right border */
}import { ColumnDirective, ColumnsDirective, Freeze, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
return (
<div>
<GridComponent dataSource={data} height={315} allowSelection={false} enableHover={false}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='150' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='180' freeze='Left' />
<ColumnDirective field='Freight' headerText='Freight' width='120' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='200' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' freeze='Fixed' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='180' />
<ColumnDirective field='ShipRegion' headerText='Ship Region' width='220' freeze='Right' />
<ColumnDirective field='ShipAddress' headerText='Ship Address' width='200' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' />
</ColumnsDirective>
<Inject services={[Freeze]} />
</GridComponent></div>)
}
export default App;import { ColumnDirective, ColumnsDirective, Freeze, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
return (
<div>
<GridComponent dataSource={data} height={315} allowSelection={false} enableHover={false}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='150' />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='180' freeze='Left' />
<ColumnDirective field='Freight' headerText='Freight' width='120' />
<ColumnDirective field='ShipCity' headerText='Ship City' width='200' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' freeze='Fixed' />
<ColumnDirective field='ShipName' headerText='Ship Name' width='180' />
<ColumnDirective field='ShipRegion' headerText='Ship Region' width='220' freeze='Right' />
<ColumnDirective field='ShipAddress' headerText='Ship Address' width='200' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' />
</ColumnsDirective>
<Inject services={[Freeze]} />
</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
}];Render custom editors in frozen columns
Custom edit controls, such as a DatePicker, can be rendered inside frozen columns during editing. This is achieved using the edit property of the column definition, which accepts an object with custom editor methods.
Custom editor methods:
| Method | Description | Purpose |
|---|---|---|
create |
Creates and returns the editor element | Initializes the custom editor control (e.g., DatePicker) |
read |
Retrieves the value from the editor | Extracts the current value from the editor when saving |
write |
Writes the value to the editor | Sets the initial or updated value in the editor |
destroy |
Destroys the editor instance | Cleans up resources when editing is complete |
The following example demonstrates rendering a DatePicker component in the frozen “OrderDate” column. The DatePicker allows date selection during edit mode and properly integrates with the grid’s editing lifecycle.
import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Edit, Toolbar, Freeze, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { DatePicker } from '@syncfusion/ej2-react-calendars';
import { data } from './datasource';
function App() {
let datePickerInstance;
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true};
const pageSettings = { pageCount: 5 };
const createDatePicker = () => {
return document.createElement('input');
};
const destroyDatePicker = () => {
if (datePickerInstance) {
datePickerInstance.destroy();
}
};
const readDatePicker = () => {
return datePickerInstance.value;
};
const writeDatePicker = (args) => {
datePickerInstance = new DatePicker({
value: new Date(args.rowData[args.column.field]),
floatLabelType: 'Never',
});
datePickerInstance.appendTo(args.element);
};
const datePickerParams = {
create: createDatePicker,
destroy: destroyDatePicker,
read: readDatePicker,
write: writeDatePicker,
};
return (
<div>
<GridComponent dataSource={data} height={260} toolbar={toolbarOptions} editSettings={editSettings} frozenColumns={2} allowPaging={true} pageSettings={pageSettings}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='150' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' edit={datePickerParams}/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='180' freeze='Left' />
<ColumnDirective field='Freight' headerText='Freight' width='120' />
</ColumnsDirective>
<Inject services={[Edit, Toolbar, Freeze, Page]} />
</GridComponent>
</div>
)
}
export default App;import { ColumnDirective, ColumnsDirective, Edit, Toolbar, Freeze, GridComponent, Inject, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import { DatePicker } from '@syncfusion/ej2-react-calendars';
function App() {
let datePickerInstance;
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true};
const pageSettings = { pageCount: 5 };
const createDatePicker = () => {
return document.createElement('input');
};
const destroyDatePicker = () => {
if (datePickerInstance) {
datePickerInstance.destroy();
}
};
const readDatePicker = () => {
return datePickerInstance.value;
};
const writeDatePicker = (args) => {
datePickerInstance = new DatePicker({
value: new Date(args.rowData[args.column.field]),
floatLabelType: 'Never',
});
datePickerInstance.appendTo(args.element);
};
const datePickerParams = {
create: createDatePicker,
destroy: destroyDatePicker,
read: readDatePicker,
write: writeDatePicker,
};
return (
<div>
<GridComponent dataSource={data} height={260} toolbar={toolbarOptions} editSettings={editSettings} frozenColumns={2} allowPaging={true} pageSettings={pageSettings}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='150' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='OrderDate' headerText='Order Date' width='140' format='yMd' edit={datePickerParams} />
<ColumnDirective field='CustomerID' headerText='Customer ID' width='180' freeze='Left' />
<ColumnDirective field='Freight' headerText='Freight' width='120' />
</ColumnsDirective>
<Inject services={[Edit, Toolbar, Freeze, Page]} />
</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
}
];Deprecated methods
The Grid’s frozen column implementation has evolved to use a unified table architecture instead of separate tables for different freeze sections. This change improves performance and simplifies the API. The following methods from the previous architecture are now deprecated in favor of new methods with CSS class-based selectors.
| Deprecated Method | Current Method | Explanation |
|---|---|---|
getMovableRows() |
getRows() with CSS selector |
Previous: gridInstance.getMovableRows()[0].querySelectorAll('.e-unfreeze')Current: gridInstance.getRows()[0].querySelectorAll('.e-unfreeze')The previous architecture used separate tables for left, right, and movable contents, returning only movable rows. The current architecture combines them into one table, returning all rows. Use the e-unfreeze class to select movable (non-frozen) rows. |
getFrozenRightRows() |
getRows() with CSS selector |
Previous: gridInstance.getFrozenRightRows()[0].querySelectorAll('.e-rightfreeze')Current: gridInstance.getRows()[0].querySelectorAll('.e-rightfreeze')The previous architecture returned only rows from the right freeze table. The current architecture returns all rows. Use the e-rightfreeze class to select right-frozen rows. |
getMovableRowByIndex()getFrozenRowByIndex()getFrozenRightRowByIndex()
|
getRowByIndex() with CSS selector |
Previous: Three separate methods for different table sections Current: gridInstance.getRowByIndex(1).querySelectorAll('.e-unfreeze')The current architecture methods return the same table row based on the given index. Use CSS class selectors to target specific cell types: • e-leftfreeze - Left-frozen cells• e-unfreeze - Movable cells• e-rightfreeze - Right-frozen cells |
getMovableCellFromIndex()getFrozenRightCellFromIndex()
|
getCellFromIndex() |
Previous: Separate methods for movable and right-frozen cells Current: gridInstance.getCellFromIndex(1, 1)The current architecture allows selecting any cell using a single method, simplifying cell selection and retrieval regardless of freeze status. |
getMovableDataRows()getFrozenRightDataRows()getFrozenDataRows()
|
getDataRows() with CSS selector |
Previous: Separate methods for each table section Current: gridInstance.getDataRows()[0].querySelectorAll('.e-unfreeze')The current approach returns entire viewport data rows for all sections together. Extract specific cells using: • e-leftfreeze - Left-frozen cells• e-unfreeze - Movable cells• e-rightfreeze - Right-frozen cells |
getMovableColumnHeaderByIndex()getFrozenRightColumnHeaderByIndex()getFrozenLeftColumnHeaderByIndex()
|
getColumnHeaderByIndex() |
Previous: Separate methods for each header section Current: gridInstance.getColumnHeaderByIndex(1)The current approach returns the same results but through a unified method that works across all freeze sections. |
// Get all rows and filter for movable (non-frozen) cells
const rows = gridInstance.getRows();
const movableCells = rows[0].querySelectorAll('.e-unfreeze');
// Get all rows and filter for right-frozen cells
const rightFrozenCells = rows[0].querySelectorAll('.e-rightfreeze');
// Get all rows and filter for left-frozen cells
const leftFrozenCells = rows[0].querySelectorAll('.e-leftfreeze');
- Scrolling is prevented when a validation message is displayed in the frozen part (Left, Right, Fixed) of the table until the validation message is cleared or dismissed.
- When using the new unified architecture, always use the CSS classes (
e-leftfreeze,e-unfreeze,e-rightfreeze) to target specific column types rather than relying on deprecated methods.
Limitations
The following features are not supported when using frozen columns:
- Detail Template
- Hierarchy Grid
- Autofill