Blazor DataGrid Example - Column Menu
Drag a column header here to group its column
Order ID Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu. Press Alt Down to open Column Menu | Customer ID Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu. Press Alt Down to open Column Menu | Freight Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu. Press Alt Down to open Column Menu | Ship Name Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu. Press Alt Down to open Column Menu | Ship Country Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu. Press Alt Down to open Column Menu | Ship City Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu. Press Alt Down to open Column Menu |
|---|
| 10001 | ALFKI | $2.30 | Simons bistro | Denmark | Berlin |
| 10002 | ANATR | $3.30 | Queen Cozinha | Brazil | Madrid |
| 10003 | ANTON | $4.30 | Frankenversand | Germany | Cholchester |
| 10004 | BLONP | $5.30 | Ernst Handel | Austria | Marseille |
| 10005 | BOLID | $6.30 | Hanari Carnes | Switzerland | Tsawassen |
| 10006 | ALFKI | $4.60 | Simons bistro | Denmark | Berlin |
| 10007 | ANATR | $6.60 | Queen Cozinha | Brazil | Madrid |
| 10008 | ANTON | $8.60 | Frankenversand | Germany | Cholchester |
| 10009 | BLONP | $10.60 | Ernst Handel | Austria | Marseille |
| 10010 | BOLID | $12.60 | Hanari Carnes | Switzerland | Tsawassen |
| 10011 | ALFKI | $6.90 | Simons bistro | Denmark | Berlin |
| 10012 | ANATR | $9.90 | Queen Cozinha | Brazil | Madrid |
This sample demonstrates the DataGrid column menu feature, which provides convenient access to column operations.
The Blazor DataGrid column menu appears when you click the menu icon in a column header, providing quick access to various column operations. To enable the column menu, set the ShowColumnMenu property to true.
The column menu's default items are:
- SortAscending - Sort the current column in ascending order.
- SortDescending - Sort the current column in descending order.
- Group - Group records by the current column.
- Ungroup - Remove grouping by the current column.
- AutoFit - Automatically adjust the current column width to fit content.
- AutoFitAll - Automatically adjust all column widths to fit their content.
- ColumnChooser - Open the column visibility chooser.
- Filter - Display the filter options as configured in the Type property of the GridFilterSettings component.
In this demo, the column menu is enabled with all available operations including sorting, grouping, filtering, column chooser, and autofit.
For more detailed information about the column menu feature, refer to the column menu documentation.