Blazor DataGrid Example - Column Reordering
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 |
This sample demonstrates the DataGrid column reordering feature for customizing column arrangement.
The Blazor DataGrid reordering feature enables users to reorganize columns by dragging and dropping them to new positions. To enable this feature, set the AllowReordering property to true.
In this demo:
- Click and drag column headers to reorder them
- Two arrow symbols indicate where the column will be placed during dragging
- Release the mouse to drop the column in its new position
This feature provides an intuitive way for users to customize their data view by arranging columns in their preferred order, improving usability and data accessibility.
For more detailed information about column reordering, refer to the column reordering documentation.