Example of Column Menu in Blazor DataGrid Component
This sample demonstrates the DataGrid column menu feature's default functionality. To open the column menu, click on the multiple icon in each column.
Drag a column header here to group its column
Order ID | Customer ID | Freight | Ship Name | Ship Country | Ship City |
|---|
| 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 |
When you click the multiple icon in a column, the Blazor DataGrid will display a column menu. The column menu includes options for interacting with features such as sorting, grouping, filtering, column chooser, and autofit. By setting the ShowColumnMenu property value to true, you can enable the column menu. 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 the current column.
- Ungroup - Ungroup the current column.
- AutoFit - Auto fit current column.
- AutoFitAll - Auto fit all columns.
- ColumnChooser - Choose the column visibility.
- Filter - Show the filter option as given in Type property of the GridFilterSettings component.
Column menu functionality is enabled in this demo, including sorting, grouping, filtering, column chooser, and autofit options.
More information about the Column menu feature can be found in this documentation section.