Example of Frozen Column in React Tree Grid Component

/
/
FrozenColumn

This sample demonstrates the frozen columns feature of the Tree Grid. Scroll the movable content horizontally to view the frozen columns with the content.

More Details...

1
Planning
2/3/20172/7/20175100Normalfalse
2
Plan timeline
2/3/20172/7/20175100Normalfalse
3
Plan budget
2/3/20172/7/20175100Lowtrue
4
Allocate resources
2/3/20172/7/20175100Criticalfalse
5
Planning complete
2/7/20172/7/201700Lowtrue
6
Design
2/10/20172/14/2017386Highfalse
7
Software Specification
2/10/20172/12/2017360Normalfalse
8
Develop prototype
2/10/20172/12/20173100Criticalfalse
9
Get approval from customer
2/13/20172/14/20172100Lowtrue
10
Design Documentation
2/13/20172/14/20172100Hightrue
11
Design complete
2/14/20172/14/201700Normaltrue
12
Implementation Phase
2/17/20172/27/20171166Normalfalse
13
Phase 1
2/17/20172/27/20171150Highfalse
14
Implementation Module 1
2/17/20172/27/20171110Normalfalse
15
Development Task 1
2/17/20172/19/2017350Highfalse
16
Development Task 2
2/17/20172/19/2017350Lowtrue
17
Testing
2/20/20172/21/201720Normaltrue
18
Bug fix
2/24/20172/25/201720Criticalfalse
19
Customer review meeting
2/26/20172/27/201720Highfalse
20
Phase 1 complete
2/27/20172/27/2017050Lowtrue
21
Phase 2
2/17/20172/28/20171260Highfalse
22
Implementation Module 2
2/17/20172/28/20171290Criticalfalse
23
Development Task 1
2/17/20172/20/2017450Normaltrue
24
Development Task 2
2/17/20172/20/2017450Criticaltrue
25
Testing
2/21/20172/24/201720Highfalse
26
Bug fix
2/25/20172/26/201720Lowfalse
27
Customer review meeting
2/27/20172/28/201720Criticaltrue
28
Phase 2 complete
2/28/20172/28/2017050Normalfalse
29
Phase 3
2/17/20172/27/20171130Normalfalse
30
Implementation Module 3
2/17/20172/27/20171160Highfalse
31
Development Task 1
2/17/20172/19/2017350Lowtrue
32
Development Task 2
2/17/20172/19/2017350Normalfalse
33
Testing
2/20/20172/21/201720Criticaltrue
34
Bug fix
2/24/20172/25/201720Highfalse
35
Customer review meeting
2/26/20172/27/201720Normaltrue
36
Phase 3 complete
2/27/20172/27/2017050Criticalfalse
Description

The freezing feature enables the user to freeze certain columns to scroll remaining movable content. This can be achieved by setting frozenColumns property.

Note: In this demo sample, the first two columns is set to frozen by using the frozenColumns properties.

Injecting Module:

Tree Grid features are segregated into individual feature-wise modules. To use frozen columns feature, we need to inject Freeze module into the services.