Example of Column Reorder in Blazor DataGrid Component
This example shows how to reorder the DataGrid columns. You can reorder columns by dragging and dropping them into the desired column position.
Order ID | Customer ID | Freight | Ship City | Ship Country |
|---|
| 10001 | ALFKI | $2.30 | Berlin | Denmark |
| 10002 | ANATR | $3.30 | Madrid | Brazil |
| 10003 | ANTON | $4.30 | Cholchester | Germany |
| 10004 | BLONP | $5.30 | Marseille | Austria |
| 10005 | BOLID | $6.30 | Tsawassen | Switzerland |
| 10006 | ALFKI | $4.60 | Berlin | Denmark |
| 10007 | ANATR | $6.60 | Madrid | Brazil |
| 10008 | ANTON | $8.60 | Cholchester | Germany |
| 10009 | BLONP | $10.60 | Marseille | Austria |
| 10010 | BOLID | $12.60 | Tsawassen | Switzerland |
| 10011 | ALFKI | $6.90 | Berlin | Denmark |
| 10012 | ANATR | $9.90 | Madrid | Brazil |
The Blazor DataGrid Reordering feature can be enabled by setting AllowReordering property as true.
Reordering can be accomplished in this demo by dragging and dropping the column header from one index to another within the DataGrid. Two arrow symbols indicate the location where the column will be placed.
More information about the column Reordering feature can be found in this documentation section.