Blazor DataGrid Example - Column Menu
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 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 |
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.