Blazor DataGrid Example - Sticky Header
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 |
This sample demonstrates the DataGrid sticky header feature for maintaining header visibility during page scrolling.
The DataGrid sticky header feature keeps the column headers fixed at the top of the grid's parent element while scrolling through the data. This ensures headers remain visible at all times, improving navigation and data context awareness.
To enable the sticky header feature, set the EnableStickyHeader property to true.
In this demo:
- Scroll the page vertically while observing the DataGrid
- The grid headers remain fixed at the top of the grid's parent container
- Data rows scroll normally while headers stay accessible
This feature is particularly useful for large datasets where users need consistent header reference while scrolling through many rows.
For more detailed information about the sticky header feature, refer to the scrolling documentation.