Blazor DataGrid Example - Default Scrolling
This sample shows the DataGrid component with horizontal and vertical scrollbars to view the DataGrid content that has been exceeded.
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 |
When the content exceeds the element width or height, the Blazor DataGrid will display a scrollbar. The vertical and horizontal scrollbars will be displayed based on the criteria listed below.
- When the total height of the rows in DataGrid exceeds the element height, the vertical scrollbar appears.
- When the total width of the columns in DataGrid exceeds the element width, the horizontal scrollbar appears.
The Height and Width properties are used to specify the height and width of the DataGrid, respectively. These properties values should be in numeric, pixel (px), or percentage (%) form.
The DataGrid's Height and Width properties are set to 410 and auto respectively, in this demo.
More information about the Scrolling feature can be found in this documentation section.