Blazor DataGrid Example - Default Scrolling
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 component with horizontal and vertical scrollbars for viewing content that exceeds the container dimensions.
The Blazor DataGrid displays scrollbars automatically when content exceeds the available space. Scrollbar visibility is determined as follows:
- The vertical scrollbar appears when the total height of DataGrid rows exceeds the element height.
- The horizontal scrollbar appears when the total width of DataGrid columns exceeds the element width.
Use the Height and Width properties to specify the DataGrid dimensions. These properties accept numeric values, pixel (px), or percentage (%) formats.
In this demo, the DataGrid's Height is set to 410 and Width is set to auto.
For more detailed information about scrolling, refer to the scrolling documentation.