This sample demonstrates the frozen rows and columns feature of the Grid. Scroll the movable content vertically/horizontally to view the frozen rows/columns with the content.
Order ID | Freight | Customer ID | Customer Name | Order Date | Shipped Date | Ship Name | Ship Address | Ship City | Ship Country |
|---|---|---|---|---|---|---|---|---|---|
| 10248 | $32.38 | VINET | Maria | 7/4/1996 | 7/16/1996 | Vins et alcools Chevalier | 59 rue de l'Abbaye | Reims | France |
| 10249 | $11.61 | TOMSP | Ana Trujillo | 7/5/1996 | 7/10/1996 | Toms Spezialitäten | Luisenstr. 48 | Münster | Germany |
| 10250 | $65.83 | HANAR | Antonio Moreno | 7/8/1996 | 7/12/1996 | Hanari Carnes | Rua do Paço, 67 | Rio de Janeiro | Brazil |
| 10251 | $41.34 | VICTE | Thomas Hardy | 7/8/1996 | 7/15/1996 | Victuailles en stock | 2, rue du Commerce | Lyon | France |
| 10252 | $51.30 | SUPRD | Christina Berglund | 7/9/1996 | 7/11/1996 | Suprêmes délices | Boulevard Tirou, 255 | Charleroi | Belgium |
| 10253 | $58.17 | HANAR | Hanna Moos | 7/10/1996 | 7/16/1996 | Hanari Carnes | Rua do Paço, 67 | Rio de Janeiro | Brazil |
| 10254 | $22.98 | CHOPS | Frédérique Citeaux | 7/11/1996 | 7/23/1996 | Chop-suey Chinese | Hauptstr. 31 | Bern | Switzerland |
| 10255 | $148.33 | RICSU | Martín Sommer | 7/12/1996 | 7/15/1996 | Richter Supermarkt | Starenweg 5 | Genève | Switzerland |
| 10256 | $13.97 | WELLI | Laurence Lebihan | 7/15/1996 | 7/17/1996 | Wellington Importadora | Rua do Mercado, 12 | Resende | Brazil |
| 10257 | $81.91 | HILAA | Elizabeth Lincoln | 7/16/1996 | 7/22/1996 | HILARION-Abastos | Carrera 22 con Ave. Carlos Soublette #8-35 | San Cristóbal | Venezuela |
| 10258 | $140.51 | ERNSH | Victoria Ashworth | 7/17/1996 | 7/23/1996 | Ernst Handel | Kirchgasse 6 | Graz | Austria |
| 10259 | $3.25 | CENTC | Patricio Simpson | 7/18/1996 | 7/25/1996 | Centro comercial Moctezuma | Sierras de Granada 9993 | México D.F. | Mexico |
Frozen Rows | |
Frozen Columns | |
The freezing feature enables the user to freeze certain rows/columns to scroll remaining movable content. This can be achieved by setting frozenRows and frozenColumns property.
In this demo sample, the first column and two rows are set to frozen by using the frozenRows and frozenColumns properties.
Injecting Module:
Grid component features are segregated into individual feature-wise modules. To use frozen rows and columns feature, we need to inject FreezeService into the @NgModule.providers section.