Blazor DataGrid Example - Column Resizing and AutoFit
Order ID | Customer ID | Freight | Shipped Date | Ship Country |
|---|
| 10001 | ALFKI | $2.30 | 7/16/1996 | Denmark |
| 10002 | ANATR | $3.30 | 9/11/1996 | Brazil |
| 10003 | ANTON | $4.30 | 10/7/1996 | Germany |
| 10004 | BLONP | $5.30 | 12/30/1996 | Austria |
| 10005 | BOLID | $6.30 | 12/3/1997 | Switzerland |
| 10006 | ALFKI | $4.60 | 7/16/1996 | Denmark |
| 10007 | ANATR | $6.60 | 9/11/1996 | Brazil |
| 10008 | ANTON | $8.60 | 10/7/1996 | Germany |
| 10009 | BLONP | $10.60 | 12/30/1996 | Austria |
| 10010 | BOLID | $12.60 | 12/3/1997 | Switzerland |
| 10011 | ALFKI | $6.90 | 7/16/1996 | Denmark |
| 10012 | ANATR | $9.90 | 9/11/1996 | Brazil |
| 10013 | ANTON | $12.90 | 10/7/1996 | Germany |
| 10014 | BLONP | $15.90 | 12/30/1996 | Austria |
| 10015 | BOLID | $18.90 | 12/3/1997 | Switzerland |
| 10016 | ALFKI | $9.20 | 7/16/1996 | Denmark |
| 10017 | ANATR | $13.20 | 9/11/1996 | Brazil |
| 10018 | ANTON | $17.20 | 10/7/1996 | Germany |
| 10019 | BLONP | $21.20 | 12/30/1996 | Austria |
| 10020 | BOLID | $25.20 | 12/3/1997 | Switzerland |
| 10021 | ALFKI | $11.50 | 7/16/1996 | Denmark |
| 10022 | ANATR | $16.50 | 9/11/1996 | Brazil |
| 10023 | ANTON | $21.50 | 10/7/1996 | Germany |
| 10024 | BLONP | $26.50 | 12/30/1996 | Austria |
| 10025 | BOLID | $31.50 | 12/3/1997 | Switzerland |
| 10026 | ALFKI | $13.80 | 7/16/1996 | Denmark |
| 10027 | ANATR | $19.80 | 9/11/1996 | Brazil |
| 10028 | ANTON | $25.80 | 10/7/1996 | Germany |
| 10029 | BLONP | $31.80 | 12/30/1996 | Austria |
| 10030 | BOLID | $37.80 | 12/3/1997 | Switzerland |
| 10031 | ALFKI | $16.10 | 7/16/1996 | Denmark |
| 10032 | ANATR | $23.10 | 9/11/1996 | Brazil |
| 10033 | ANTON | $30.10 | 10/7/1996 | Germany |
| 10034 | BLONP | $37.10 | 12/30/1996 | Austria |
| 10035 | BOLID | $44.10 | 12/3/1997 | Switzerland |
| 10036 | ALFKI | $18.40 | 7/16/1996 | Denmark |
| 10037 | ANATR | $26.40 | 9/11/1996 | Brazil |
| 10038 | ANTON | $34.40 | 10/7/1996 | Germany |
| 10039 | BLONP | $42.40 | 12/30/1996 | Austria |
| 10040 | BOLID | $50.40 | 12/3/1997 | Switzerland |
| 10041 | ALFKI | $20.70 | 7/16/1996 | Denmark |
| 10042 | ANATR | $29.70 | 9/11/1996 | Brazil |
| 10043 | ANTON | $38.70 | 10/7/1996 | Germany |
| 10044 | BLONP | $47.70 | 12/30/1996 | Austria |
| 10045 | BOLID | $56.70 | 12/3/1997 | Switzerland |
| 10046 | ALFKI | $23.00 | 7/16/1996 | Denmark |
| 10047 | ANATR | $33.00 | 9/11/1996 | Brazil |
| 10048 | ANTON | $43.00 | 10/7/1996 | Germany |
| 10049 | BLONP | $53.00 | 12/30/1996 | Austria |
| 10050 | BOLID | $63.00 | 12/3/1997 | Switzerland |
| 10051 | ALFKI | $25.30 | 7/16/1996 | Denmark |
| 10052 | ANATR | $36.30 | 9/11/1996 | Brazil |
| 10053 | ANTON | $47.30 | 10/7/1996 | Germany |
| 10054 | BLONP | $58.30 | 12/30/1996 | Austria |
| 10055 | BOLID | $69.30 | 12/3/1997 | Switzerland |
| 10056 | ALFKI | $27.60 | 7/16/1996 | Denmark |
| 10057 | ANATR | $39.60 | 9/11/1996 | Brazil |
| 10058 | ANTON | $51.60 | 10/7/1996 | Germany |
| 10059 | BLONP | $63.60 | 12/30/1996 | Austria |
| 10060 | BOLID | $75.60 | 12/3/1997 | Switzerland |
| 10061 | ALFKI | $29.90 | 7/16/1996 | Denmark |
| 10062 | ANATR | $42.90 | 9/11/1996 | Brazil |
| 10063 | ANTON | $55.90 | 10/7/1996 | Germany |
| 10064 | BLONP | $68.90 | 12/30/1996 | Austria |
| 10065 | BOLID | $81.90 | 12/3/1997 | Switzerland |
| 10066 | ALFKI | $32.20 | 7/16/1996 | Denmark |
| 10067 | ANATR | $46.20 | 9/11/1996 | Brazil |
| 10068 | ANTON | $60.20 | 10/7/1996 | Germany |
| 10069 | BLONP | $74.20 | 12/30/1996 | Austria |
| 10070 | BOLID | $88.20 | 12/3/1997 | Switzerland |
| 10071 | ALFKI | $34.50 | 7/16/1996 | Denmark |
| 10072 | ANATR | $49.50 | 9/11/1996 | Brazil |
| 10073 | ANTON | $64.50 | 10/7/1996 | Germany |
| 10074 | BLONP | $79.50 | 12/30/1996 | Austria |
| 10075 | BOLID | $94.50 | 12/3/1997 | Switzerland |
This sample demonstrates the DataGrid column resizing feature and how columns are rendered with specified widths.
Columns in the Blazor DataGrid can be resized by clicking and dragging the right corner of the column header. To enable column resizing, set the AllowResizing property to true. You can prevent a specific column from being resized by setting AllowResizing to false in the column definition.
By default, when the total width of columns is less than the DataGrid width, columns automatically expand to fill the available space. Setting the AutoFit property to true ensures columns do not exceed their specified width.
When you right-click the right corner of a column header, the AutoFitColumnsAsync method automatically adjusts the column width to fit the content.
In this demo, column resizing is enabled with the following constraints:
- The Order ID column can be resized between MinWidth of 120px and MaxWidth of 300px.
- Resizing is disabled for the Shipped Date column.
For more detailed information about column resizing, refer to the column resizing documentation.