Example of AutoFit and Resizing in Blazor DataGrid Component
This sample demonstrates how the DataGrid renders columns with a specified width and how to use the column resizing feature. To resize a column, click and drag the right edge of the column header.
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 |
By default, if the total width of the columns is less than the DataGrid width, the columns will automatically expand to fill the available space. Setting the DataGrid AutoFit feature to true ensures that columns do not exceed their specified width.
Columns in the Blazor DataGrid can be resized by clicking and dragging the right corner of the column header. Set the AllowResizing property to true to enable column resizing. You can also prevent a specific column from being resized by setting the AllowResizing property to false in the column definition. Furthermore, when the right corner of a column header is right clicked, the AutoFitColumnsAsync method will automatically adjust the column width.
The resizing feature has been enabled in this demo by setting the AllowResizing property to true. The Order ID column can be resized between the range of MinWidth of 120px and MaxWidth of 300px. Column resizing has also been disabled for the Shipped Date column.
More information about the column Resizing feature can be found in the documentation section.