Frozen in React TreeGrid

8 Oct 202514 minutes to read

Frozen rows and columns

Frozen rows and columns provide an option to keep rows and columns always visible on the top and left sides of the TreeGrid while scrolling.

To use frozen rows and columns, inject the Freeze module in the TreeGrid.

In this demo, frozenColumns is set to 2 and frozenRows is set to 3. As a result, the left two columns and top three rows remain frozen.

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, TreeGridComponent, Freeze, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    return <TreeGridComponent dataSource={sampleData} childMapping='subtasks' treeColumnIndex={1} height='310' frozenRows={3} frozenColumns={2} allowSelection={false}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='120' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='taskName' headerText='Task Name' width='230'></ColumnDirective>
            <ColumnDirective field='startDate' headerText='Start Date' width='120' format='yMd' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='endDate' headerText='End Date' width='120' format='yMd' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='duration' headerText='Duration' width='110' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='progress' headerText='Progress' width='110' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='priority' headerText='Priority' width='110'></ColumnDirective>
            <ColumnDirective field='approved' headerText='Approved' textAlign='Center' width='110'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Freeze]}/>
    </TreeGridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, TreeGridComponent, Freeze, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData  } from './datasource';

function App() {
    return <TreeGridComponent dataSource={sampleData} childMapping = 'subtasks' treeColumnIndex={1} height='310' frozenRows={3} frozenColumns={2} allowSelection={false}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='120' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='taskName' headerText='Task Name' width='230'></ColumnDirective>
            <ColumnDirective field='startDate' headerText='Start Date' width='120' format='yMd' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='endDate' headerText='End Date' width='120' format='yMd' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='duration' headerText='Duration' width='110' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='progress' headerText='Progress' width='110' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='priority' headerText='Priority' width='110'></ColumnDirective>
            <ColumnDirective field='approved' headerText='Approved' textAlign='Center' width='110'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Freeze]} />
    </TreeGridComponent>
};
export default App;

Freeze particular columns

Use the isFrozen property to freeze selected columns in the TreeGrid.
In this demo, the columns with field names taskName and startDate are frozen using the isFrozen property.

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, TreeGridComponent, Freeze, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    return <TreeGridComponent dataSource={sampleData} childMapping='subtasks' height='310' allowSelection={false}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='110' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='taskName' headerText='Task Name' width='230' isFrozen='true'></ColumnDirective>
            <ColumnDirective field='startDate' headerText='Start Date' width='120' format='yMd' textAlign='Right' isFrozen='true'></ColumnDirective>
            <ColumnDirective field='endDate' headerText='End Date' width='120' format='yMd' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='duration' headerText='Duration' width='110' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='progress' headerText='Progress' width='110' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='priority' headerText='Priority' width='110'></ColumnDirective>
            <ColumnDirective field='approved' headerText='Approved' textAlign='Center' width='110'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Freeze]}/>
    </TreeGridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, TreeGridComponent, Freeze, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData  } from './datasource';

function App() {
    return <TreeGridComponent dataSource={sampleData} childMapping = 'subtasks' height='310' allowSelection={false} >
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='110' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='taskName' headerText='Task Name' width='230' isFrozen='true'></ColumnDirective>
            <ColumnDirective field='startDate' headerText='Start Date' width='120' format='yMd' textAlign='Right' isFrozen='true'></ColumnDirective>
            <ColumnDirective field='endDate' headerText='End Date' width='120' format='yMd' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='duration' headerText='Duration' width='110' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='progress' headerText='Progress' width='110' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='priority' headerText='Priority' width='110'></ColumnDirective>
            <ColumnDirective field='approved' headerText='Approved' textAlign='Center' width='110'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Freeze]} />
    </TreeGridComponent>
};
export default App;

Freeze direction

Freeze TreeGrid columns on the left or right side using the column.freeze property; remaining columns are movable. The TreeGrid automatically places columns on the left or right based on the column.freeze value.

Types of column.freeze directions:

Left: Freezes columns on the left.
Right: Freezes columns on the right.

In this demo, the Task Name column is frozen on the left and the Priority column is frozen on the right side of the content table.

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, TreeGridComponent, Freeze, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    return <TreeGridComponent dataSource={sampleData} childMapping='subtasks' height='310' treeColumnIndex={1} allowSelection={false}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='110' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='taskName' headerText='Task Name' width='230' freeze='Left'></ColumnDirective>
            <ColumnDirective field='startDate' headerText='Start Date' width='120' format='yMd' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='endDate' headerText='End Date' width='120' format='yMd' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='duration' headerText='Duration' width='110' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='progress' headerText='Progress' width='110' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='priority' headerText='Priority' width='110' freeze='Right'></ColumnDirective>
            <ColumnDirective field='approved' headerText='Approved' textAlign='Center' width='110'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Freeze]}/>
    </TreeGridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, TreeGridComponent, Freeze, Inject } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData  } from './datasource';

function App() {
    return <TreeGridComponent dataSource={sampleData} childMapping = 'subtasks' height='310' treeColumnIndex={1} allowSelection={false} >
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='110' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='taskName' headerText='Task Name' width='230' freeze='Left'></ColumnDirective>
            <ColumnDirective field='startDate' headerText='Start Date' width='120' format='yMd' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='endDate' headerText='End Date' width='120' format='yMd' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='duration' headerText='Duration' width='110' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='progress' headerText='Progress' width='110' textAlign='Right'></ColumnDirective>
            <ColumnDirective field='priority' headerText='Priority' width='110' freeze='Right'></ColumnDirective>
            <ColumnDirective field='approved' headerText='Approved' textAlign='Center' width='110'></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Freeze]} />
    </TreeGridComponent>
};
export default App;

Freeze direction is not compatible with the isFrozen and frozenColumns properties.

Limitations of frozen TreeGrid

The following features are not supported with frozen rows and columns:

Row Template
Detail Template
Cell Editing

Additional limitations for the Freeze direction feature:

Infinite scroll cache mode
Freeze direction in the stacked header is not compatible with column reordering.

Refer to the React TreeGrid feature tour page for feature highlights. Explore the React TreeGrid example to learn how to present and manipulate data.

Search docs

Ask HelpBot