Blazorise DataGrid: Column Chooser

Enable Column Chooser to allow users to show or hide columns in the DataGrid.

Overview

Enable the feature by setting ColumnChooser to true.

Examples

Basic

The column chooser will display a list of all columns in the DataGrid, allowing users to toggle their visibility. You can also handle the ColumnDisplayingChanged event to perform custom actions when a column's display state changes.

1 - 10 of 25 items

25 items

<DataGrid TItem="Employee"
          Data="inMemoryData"
          Responsive
          ShowColumnChooser
          PagerPosition="DataGridPagerPosition.Top"
          ShowPager
          ShowPageSizes
          ColumnDisplayingChanged="@ColumnDisplayChanged">
</DataGrid>

@code {
    [Inject] EmployeeData EmployeeData { get; set; }

    private IEnumerable<Employee> inMemoryData;

    protected override async Task OnInitializedAsync()
    {
        inMemoryData = ( await EmployeeData.GetDataAsync().ConfigureAwait( false ) ).Take( 25 );
        await base.OnInitializedAsync();
    }

    protected void ColumnDisplayChanged( ColumnDisplayChangedEventArgs<Employee> args )
    {
        Console.WriteLine( $"Column: {args.Column.Field} | Display: {args.Display}" );
    }
}

Hidden Columns

To change the default visibility of a column, set the Displaying property to false. This will hide the column by default, but it will still be available in the column chooser for users to show if they wish.

Name
John
Sarah

<DataGrid TItem="Employee"
          Data="Data"
          ShowColumnChooser>
    <DataGridColumns>
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Name )" Caption="Name" />
        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Salary )" Caption="Salary" Displaying="false" />
    </DataGridColumns>
</DataGrid>

@code {
    public IEnumerable<Employee> Data { get; set; } = new List<Employee>()
    {
        new() { Name = "John", Salary = 1000m },
        new() { Name = "Sarah", Salary = 2000m },
    };

    public class Employee
    {
        public string Name { get; set; }

        public decimal Salary { get; set; }
    }
}

Positioning

By default, the column chooser is positioned in the top right corner of the DataGrid. You can change its position by setting the ColumnChooserPosition property.

<DataGrid TItem="Employee"
          Data="inMemoryData"
          Responsive
          ShowColumnChooser
          PagerPosition="DataGridPagerPosition.Top"
          PagerOptions="new DataGridPagerOptions() { ColumnChooserPosition = PagerElementPosition.End }">
</DataGrid>

@code {
    [Inject] EmployeeData EmployeeData { get; set; }

    private IEnumerable<Employee> inMemoryData;

    protected override async Task OnInitializedAsync()
    {
        inMemoryData = ( await EmployeeData.GetDataAsync().ConfigureAwait( false ) ).Take( 25 );
        await base.OnInitializedAsync();
    }
}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<DataGrid />