[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.
Blazor Grid Column Options Overview
The Ignite UI for Blazor Data Grid supports the ability to group, hide, sort, move, pin, filter, and sort columns directly from a UI exposed on each column header.
To enable the column options ui you can set the grid's IsColumnOptionsEnabled
property to true.
Blazor Grid Column Options Example
Column Options Configurations
Filtering can be toggled per column by setting the column's IsFilteringEnabled
property. Setting true or false will show or hide the filtering section in the column's options ui.
Sorting can be toggled for the entire grid if the HeaderClickAction
property is applied. Setting this to None
for example will completely remove sorting from grid and reflect in the options ui for each column. And setting SortByOneColumnOnly
for example will continue to allow one column to be sorted at a time.
Code Snippet
The following code demonstrates how to programmatically enable the column options ui adjust filtering and sorting in the column options ui by adjusting the grid and column.
<IgbDataGrid Height="100%" Width="100%"
DataSource="DataSource"
HeaderClickAction="HeaderClickAction.SortByOneColumnOnly"
IsColumnOptionsEnabled="true">
<IgbTextColumn Field="ID" IsFilteringEnabled="false" />
</IgbDataGrid>
API References
HeaderClickAction
IsColumnOptionsEnabled
IsFilteringEnabled
SortByOneColumnOnly