This sample demonstrates the Grid component with the sticky header feature. In this sample, the header element will be visible when the parent element is scrolled.
Order ID | Customer Name | Order Date | Freight | Shipped Date | Ship Name |
|---|---|---|---|---|---|
| 10248 | Maria | 7/4/1996 | $32.38 | 7/16/1996 | Vins et alcools Chevalier |
| 10249 | Ana Trujillo | 7/5/1996 | $11.61 | 7/10/1996 | Toms Spezialitäten |
| 10250 | Antonio Moreno | 7/8/1996 | $65.83 | 7/12/1996 | Hanari Carnes |
| 10251 | Thomas Hardy | 7/8/1996 | $41.34 | 7/15/1996 | Victuailles en stock |
| 10252 | Christina Berglund | 7/9/1996 | $51.30 | 7/11/1996 | Suprêmes délices |
| 10253 | Hanna Moos | 7/10/1996 | $58.17 | 7/16/1996 | Hanari Carnes |
| 10254 | Frédérique Citeaux | 7/11/1996 | $22.98 | 7/23/1996 | Chop-suey Chinese |
| 10255 | Martín Sommer | 7/12/1996 | $148.33 | 7/15/1996 | Richter Supermarkt |
| 10256 | Laurence Lebihan | 7/15/1996 | $13.97 | 7/17/1996 | Wellington Importadora |
| 10257 | Elizabeth Lincoln | 7/16/1996 | $81.91 | 7/22/1996 | HILARION-Abastos |
| 10258 | Victoria Ashworth | 7/17/1996 | $140.51 | 7/23/1996 | Ernst Handel |
| 10259 | Patricio Simpson | 7/18/1996 | $3.25 | 7/25/1996 | Centro comercial Moctezuma |
| 10260 | Francisco Chang | 7/19/1996 | $55.09 | 7/29/1996 | Ottilies Käseladen |
| 10261 | Yang Wang | 7/19/1996 | $3.05 | 7/30/1996 | Que Delícia |
| 10262 | Pedro Afonso | 7/22/1996 | $48.29 | 7/25/1996 | Rattlesnake Canyon Grocery |
| 10263 | Elizabeth Brown | 7/23/1996 | $146.06 | 7/31/1996 | Ernst Handel |
| 10264 | Sven Ottlieb | 7/24/1996 | $3.67 | 8/23/1996 | Folk och fä HB |
| 10265 | Ann Devon | 7/25/1996 | $55.28 | 8/12/1996 | Blondel père et fils |
| 10266 | Roland Mendel | 7/26/1996 | $25.73 | 7/31/1996 | Wartian Herkku |
| 10267 | Aria Cruz | 7/29/1996 | $208.58 | 8/6/1996 | Frankenversand |
| 10268 | Diego Roel | 7/30/1996 | $66.29 | 8/2/1996 | GROSELLA-Restaurante |
| 10269 | Martine Rancé | 7/31/1996 | $4.56 | 8/9/1996 | White Clover Markets |
| 10270 | Maria Larsson | 8/1/1996 | $136.54 | 8/2/1996 | Wartian Herkku |
| 10271 | Peter Franken | 8/1/1996 | $4.54 | 8/30/1996 | Split Rail Beer & Ale |
| 10272 | Carine Schmitt | 8/2/1996 | $98.03 | 8/6/1996 | Rattlesnake Canyon Grocery |
| 10273 | Paolo Accorti | 8/5/1996 | $76.07 | 8/12/1996 | QUICK-Stop |
| 10274 | Lino Rodriguez | 8/6/1996 | $6.01 | 8/16/1996 | Vins et alcools Chevalier |
| 10275 | Eduardo Saavedra | 8/7/1996 | $26.93 | 8/9/1996 | Magazzini Alimentari Riuniti |
| 10276 | José Pedro Freyre | 8/8/1996 | $13.84 | 8/14/1996 | Tortuga Restaurante |
| 10277 | André Fonseca | 8/9/1996 | $125.77 | 8/13/1996 | Morgenstern Gesundkost |
| 10278 | Howard Snyder | 8/12/1996 | $92.69 | 8/16/1996 | Berglunds snabbköp |
| 10279 | Manuel Pereira | 8/13/1996 | $25.83 | 8/16/1996 | Lehmanns Marktstand |
| 10280 | Mario Pontes | 8/14/1996 | $8.98 | 9/12/1996 | Berglunds snabbköp |
| 10281 | Carlos Hernández | 8/14/1996 | $2.94 | 8/21/1996 | Romero y tomillo |
| 10282 | Yoshi Latimer | 8/15/1996 | $12.69 | 8/21/1996 | Romero y tomillo |
| 10283 | Patricia McKenna | 8/16/1996 | $84.81 | 8/23/1996 | LILA-Supermercado |
| 10284 | Helen Bennett | 8/19/1996 | $76.56 | 8/27/1996 | Lehmanns Marktstand |
| 10285 | Philip Cramer | 8/20/1996 | $76.83 | 8/26/1996 | QUICK-Stop |
| 10286 | Daniel Tonini | 8/21/1996 | $229.24 | 8/30/1996 | QUICK-Stop |
| 10287 | Annette Roulet | 8/22/1996 | $12.76 | 8/28/1996 | Ricardo Adocicados |
| 10288 | Yoshi Tannamuri | 8/23/1996 | $7.45 | 9/3/1996 | Reggiani Caseifici |
| 10289 | John Steel | 8/26/1996 | $22.77 | 8/28/1996 | B's Beverages |
| 10290 | Renate Messner | 8/27/1996 | $79.70 | 9/3/1996 | Comércio Mineiro |
| 10291 | Jaime Yorres | 8/27/1996 | $6.40 | 9/4/1996 | Que Delícia |
| 10292 | Carlos González | 8/28/1996 | $1.35 | 9/2/1996 | Tradiçao Hipermercados |
| 10293 | Felipe Izquierdo | 8/29/1996 | $21.18 | 9/11/1996 | Tortuga Restaurante |
| 10294 | Fran Wilson | 8/30/1996 | $147.26 | 9/5/1996 | Rattlesnake Canyon Grocery |
| 10295 | Giovanni Rovelli | 9/2/1996 | $1.15 | 9/10/1996 | Vins et alcools Chevalier |
| 10296 | Catherine Dewey | 9/3/1996 | $0.12 | 9/11/1996 | LILA-Supermercado |
| 10297 | Jean Fresnière | 9/4/1996 | $5.74 | 9/10/1996 | Blondel père et fils |
The Grid headers can be fixed while scrolling its parent element. It can be done by setting the enableStickyHeader property.
In this demo, while scrolling the demo page, the Grid header will be stick to the top of its parent element.
More information on the stacked header configuration can be found in this documentation section.