Example of Sticky Header in Blazor DataGrid Component
This sample shows the DataGrid component with the sticky header feature. In this sample, while scrolling the demo page, the Grid header will be fixed at the top of its parent element.
Order ID | Customer ID | Order Date | Freight | Shipped Date | Ship Name | Ship Address | Ship City | Ship Country |
|---|
| 10001 | ALFKI | 5/15/1991 | $2.30 | 7/16/1996 | Simons bistro | Kirchgasse 6 | Berlin | Denmark |
| 10002 | ANATR | 4/4/1990 | $3.30 | 9/11/1996 | Queen Cozinha | Avda. Azteca 123 | Madrid | Brazil |
| 10003 | ANTON | 11/30/1957 | $4.30 | 10/7/1996 | Frankenversand | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Cholchester | Germany |
| 10004 | BLONP | 10/22/1930 | $5.30 | 12/30/1996 | Ernst Handel | Magazinweg 7 | Marseille | Austria |
| 10005 | BOLID | 2/18/1953 | $6.30 | 12/3/1997 | Hanari Carnes | 1029 - 12th Ave. S. | Tsawassen | Switzerland |
| 10006 | ALFKI | 5/15/1991 | $4.60 | 7/16/1996 | Simons bistro | Kirchgasse 6 | Berlin | Denmark |
| 10007 | ANATR | 4/4/1990 | $6.60 | 9/11/1996 | Queen Cozinha | Avda. Azteca 123 | Madrid | Brazil |
| 10008 | ANTON | 11/30/1957 | $8.60 | 10/7/1996 | Frankenversand | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Cholchester | Germany |
| 10009 | BLONP | 10/22/1930 | $10.60 | 12/30/1996 | Ernst Handel | Magazinweg 7 | Marseille | Austria |
| 10010 | BOLID | 2/18/1953 | $12.60 | 12/3/1997 | Hanari Carnes | 1029 - 12th Ave. S. | Tsawassen | Switzerland |
| 10011 | ALFKI | 5/15/1991 | $6.90 | 7/16/1996 | Simons bistro | Kirchgasse 6 | Berlin | Denmark |
| 10012 | ANATR | 4/4/1990 | $9.90 | 9/11/1996 | Queen Cozinha | Avda. Azteca 123 | Madrid | Brazil |
| 10013 | ANTON | 11/30/1957 | $12.90 | 10/7/1996 | Frankenversand | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Cholchester | Germany |
| 10014 | BLONP | 10/22/1930 | $15.90 | 12/30/1996 | Ernst Handel | Magazinweg 7 | Marseille | Austria |
| 10015 | BOLID | 2/18/1953 | $18.90 | 12/3/1997 | Hanari Carnes | 1029 - 12th Ave. S. | Tsawassen | Switzerland |
| 10016 | ALFKI | 5/15/1991 | $9.20 | 7/16/1996 | Simons bistro | Kirchgasse 6 | Berlin | Denmark |
| 10017 | ANATR | 4/4/1990 | $13.20 | 9/11/1996 | Queen Cozinha | Avda. Azteca 123 | Madrid | Brazil |
| 10018 | ANTON | 11/30/1957 | $17.20 | 10/7/1996 | Frankenversand | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Cholchester | Germany |
| 10019 | BLONP | 10/22/1930 | $21.20 | 12/30/1996 | Ernst Handel | Magazinweg 7 | Marseille | Austria |
| 10020 | BOLID | 2/18/1953 | $25.20 | 12/3/1997 | Hanari Carnes | 1029 - 12th Ave. S. | Tsawassen | Switzerland |
| 10021 | ALFKI | 5/15/1991 | $11.50 | 7/16/1996 | Simons bistro | Kirchgasse 6 | Berlin | Denmark |
| 10022 | ANATR | 4/4/1990 | $16.50 | 9/11/1996 | Queen Cozinha | Avda. Azteca 123 | Madrid | Brazil |
| 10023 | ANTON | 11/30/1957 | $21.50 | 10/7/1996 | Frankenversand | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Cholchester | Germany |
| 10024 | BLONP | 10/22/1930 | $26.50 | 12/30/1996 | Ernst Handel | Magazinweg 7 | Marseille | Austria |
| 10025 | BOLID | 2/18/1953 | $31.50 | 12/3/1997 | Hanari Carnes | 1029 - 12th Ave. S. | Tsawassen | Switzerland |
| 10026 | ALFKI | 5/15/1991 | $13.80 | 7/16/1996 | Simons bistro | Kirchgasse 6 | Berlin | Denmark |
| 10027 | ANATR | 4/4/1990 | $19.80 | 9/11/1996 | Queen Cozinha | Avda. Azteca 123 | Madrid | Brazil |
| 10028 | ANTON | 11/30/1957 | $25.80 | 10/7/1996 | Frankenversand | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Cholchester | Germany |
| 10029 | BLONP | 10/22/1930 | $31.80 | 12/30/1996 | Ernst Handel | Magazinweg 7 | Marseille | Austria |
| 10030 | BOLID | 2/18/1953 | $37.80 | 12/3/1997 | Hanari Carnes | 1029 - 12th Ave. S. | Tsawassen | Switzerland |
| 10031 | ALFKI | 5/15/1991 | $16.10 | 7/16/1996 | Simons bistro | Kirchgasse 6 | Berlin | Denmark |
| 10032 | ANATR | 4/4/1990 | $23.10 | 9/11/1996 | Queen Cozinha | Avda. Azteca 123 | Madrid | Brazil |
| 10033 | ANTON | 11/30/1957 | $30.10 | 10/7/1996 | Frankenversand | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Cholchester | Germany |
| 10034 | BLONP | 10/22/1930 | $37.10 | 12/30/1996 | Ernst Handel | Magazinweg 7 | Marseille | Austria |
| 10035 | BOLID | 2/18/1953 | $44.10 | 12/3/1997 | Hanari Carnes | 1029 - 12th Ave. S. | Tsawassen | Switzerland |
| 10036 | ALFKI | 5/15/1991 | $18.40 | 7/16/1996 | Simons bistro | Kirchgasse 6 | Berlin | Denmark |
| 10037 | ANATR | 4/4/1990 | $26.40 | 9/11/1996 | Queen Cozinha | Avda. Azteca 123 | Madrid | Brazil |
| 10038 | ANTON | 11/30/1957 | $34.40 | 10/7/1996 | Frankenversand | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Cholchester | Germany |
| 10039 | BLONP | 10/22/1930 | $42.40 | 12/30/1996 | Ernst Handel | Magazinweg 7 | Marseille | Austria |
| 10040 | BOLID | 2/18/1953 | $50.40 | 12/3/1997 | Hanari Carnes | 1029 - 12th Ave. S. | Tsawassen | Switzerland |
| 10041 | ALFKI | 5/15/1991 | $20.70 | 7/16/1996 | Simons bistro | Kirchgasse 6 | Berlin | Denmark |
| 10042 | ANATR | 4/4/1990 | $29.70 | 9/11/1996 | Queen Cozinha | Avda. Azteca 123 | Madrid | Brazil |
| 10043 | ANTON | 11/30/1957 | $38.70 | 10/7/1996 | Frankenversand | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Cholchester | Germany |
| 10044 | BLONP | 10/22/1930 | $47.70 | 12/30/1996 | Ernst Handel | Magazinweg 7 | Marseille | Austria |
| 10045 | BOLID | 2/18/1953 | $56.70 | 12/3/1997 | Hanari Carnes | 1029 - 12th Ave. S. | Tsawassen | Switzerland |
| 10046 | ALFKI | 5/15/1991 | $23.00 | 7/16/1996 | Simons bistro | Kirchgasse 6 | Berlin | Denmark |
| 10047 | ANATR | 4/4/1990 | $33.00 | 9/11/1996 | Queen Cozinha | Avda. Azteca 123 | Madrid | Brazil |
| 10048 | ANTON | 11/30/1957 | $43.00 | 10/7/1996 | Frankenversand | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Cholchester | Germany |
| 10049 | BLONP | 10/22/1930 | $53.00 | 12/30/1996 | Ernst Handel | Magazinweg 7 | Marseille | Austria |
| 10050 | BOLID | 2/18/1953 | $63.00 | 12/3/1997 | Hanari Carnes | 1029 - 12th Ave. S. | Tsawassen | Switzerland |
| 10051 | ALFKI | 5/15/1991 | $25.30 | 7/16/1996 | Simons bistro | Kirchgasse 6 | Berlin | Denmark |
| 10052 | ANATR | 4/4/1990 | $36.30 | 9/11/1996 | Queen Cozinha | Avda. Azteca 123 | Madrid | Brazil |
| 10053 | ANTON | 11/30/1957 | $47.30 | 10/7/1996 | Frankenversand | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Cholchester | Germany |
| 10054 | BLONP | 10/22/1930 | $58.30 | 12/30/1996 | Ernst Handel | Magazinweg 7 | Marseille | Austria |
| 10055 | BOLID | 2/18/1953 | $69.30 | 12/3/1997 | Hanari Carnes | 1029 - 12th Ave. S. | Tsawassen | Switzerland |
| 10056 | ALFKI | 5/15/1991 | $27.60 | 7/16/1996 | Simons bistro | Kirchgasse 6 | Berlin | Denmark |
| 10057 | ANATR | 4/4/1990 | $39.60 | 9/11/1996 | Queen Cozinha | Avda. Azteca 123 | Madrid | Brazil |
| 10058 | ANTON | 11/30/1957 | $51.60 | 10/7/1996 | Frankenversand | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Cholchester | Germany |
| 10059 | BLONP | 10/22/1930 | $63.60 | 12/30/1996 | Ernst Handel | Magazinweg 7 | Marseille | Austria |
| 10060 | BOLID | 2/18/1953 | $75.60 | 12/3/1997 | Hanari Carnes | 1029 - 12th Ave. S. | Tsawassen | Switzerland |
| 10061 | ALFKI | 5/15/1991 | $29.90 | 7/16/1996 | Simons bistro | Kirchgasse 6 | Berlin | Denmark |
| 10062 | ANATR | 4/4/1990 | $42.90 | 9/11/1996 | Queen Cozinha | Avda. Azteca 123 | Madrid | Brazil |
| 10063 | ANTON | 11/30/1957 | $55.90 | 10/7/1996 | Frankenversand | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Cholchester | Germany |
| 10064 | BLONP | 10/22/1930 | $68.90 | 12/30/1996 | Ernst Handel | Magazinweg 7 | Marseille | Austria |
| 10065 | BOLID | 2/18/1953 | $81.90 | 12/3/1997 | Hanari Carnes | 1029 - 12th Ave. S. | Tsawassen | Switzerland |
| 10066 | ALFKI | 5/15/1991 | $32.20 | 7/16/1996 | Simons bistro | Kirchgasse 6 | Berlin | Denmark |
| 10067 | ANATR | 4/4/1990 | $46.20 | 9/11/1996 | Queen Cozinha | Avda. Azteca 123 | Madrid | Brazil |
| 10068 | ANTON | 11/30/1957 | $60.20 | 10/7/1996 | Frankenversand | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Cholchester | Germany |
| 10069 | BLONP | 10/22/1930 | $74.20 | 12/30/1996 | Ernst Handel | Magazinweg 7 | Marseille | Austria |
| 10070 | BOLID | 2/18/1953 | $88.20 | 12/3/1997 | Hanari Carnes | 1029 - 12th Ave. S. | Tsawassen | Switzerland |
| 10071 | ALFKI | 5/15/1991 | $34.50 | 7/16/1996 | Simons bistro | Kirchgasse 6 | Berlin | Denmark |
| 10072 | ANATR | 4/4/1990 | $49.50 | 9/11/1996 | Queen Cozinha | Avda. Azteca 123 | Madrid | Brazil |
| 10073 | ANTON | 11/30/1957 | $64.50 | 10/7/1996 | Frankenversand | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | Cholchester | Germany |
| 10074 | BLONP | 10/22/1930 | $79.50 | 12/30/1996 | Ernst Handel | Magazinweg 7 | Marseille | Austria |
| 10075 | BOLID | 2/18/1953 | $94.50 | 12/3/1997 | Hanari Carnes | 1029 - 12th Ave. S. | Tsawassen | Switzerland |
The Grid headers can be fixed while scrolling its first scrollable parent element. It can be done by setting the EnableStickyHeader property as true
More information about the Sticky Header feature can be found in this documentation section.