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 theColumnDisplayingChanged event to perform custom actions when a column's display state changes.
1 - 10 of 25 items
25 items
@using System @using System.Collections.Generic @using System.ComponentModel.DataAnnotations @using System.Linq @using System.Threading.Tasks <DataGrid TItem="Employee" Data="inMemoryData" Responsive ShowColumnChooser PagerPosition="DataGridPagerPosition.Top" ShowPager ShowPageSizes ColumnDisplayingChanged=""> </DataGrid>
@code { private readonly EmployeeData EmployeeData = new(); 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}" ); } public class Gender { public string Code { get; set; } public string Description { get; set; } } public class EmployeeData { private static readonly string[] FirstNames = ["Samuel", "Irvin", "Cora", "Jessie", "Maryann", "Kara"]; private static readonly string[] LastNames = ["Collier", "Ziemann", "Conn", "Wilkinson", "Hilpert", "Brekke"]; private static readonly string[] Cities = ["London", "Paris", "New York", "Berlin", "Lisbon", "Zagreb"]; public static IEnumerable<Gender> Genders = [ new() { Code = null, Description = string.Empty }, new() { Code = "M", Description = "Male" }, new() { Code = "F", Description = "Female" }, new() { Code = "D", Description = "Diverse" } ]; public Task<List<Employee>> GetDataAsync() => Task.FromResult( Enumerable.Range( 1, 500 ) .Select( index => { string firstName = FirstNames[( index - 1 ) % FirstNames.Length]; string lastName = LastNames[( index - 1 ) % LastNames.Length]; return new Employee { Id = index, FirstName = firstName, LastName = lastName, Email = $"{firstName}.{lastName}{index}@example.com", City = Cities[( index - 1 ) % Cities.Length], Zip = $"{10000 + index}", DateOfBirth = new DateTime( 1950 + index % 50, 1 + index % 12, 1 + index % 28 ), Childrens = index % 6, Gender = index % 3 == 0 ? "D" : index % 2 == 0 ? "F" : "M", Salary = 50000m + index * 137m % 50000m, IsActive = index % 2 == 0, Salaries = Enumerable.Range( 1, index % 4 ) .Select( month => new Salary { Date = new DateTime( 2025, month, 1 ), Total = 1000m + index * month * 11m } ) .ToList() }; } ) .ToList() ); } public class Employee { public Employee() { } public Employee( Employee other ) { Id = other.Id; Childrens = other.Childrens; DateOfBirth = other.DateOfBirth; City = other.City; Email = other.Email; FirstName = other.FirstName; LastName = other.LastName; Gender = other.Gender; IsActive = other.IsActive; Salaries = other.Salaries; Salary = other.Salary; Tax = other.Tax; Zip = other.Zip; } [Display( Name = "Id" )] public int Id { get; set; } [Required] public string FirstName { get; set; } [Required] public string LastName { get; set; } [Required] [EmailAddress] [Display( Name = "Email" )] public string Email { get; set; } [Display( Name = "City" )] public string City { get; set; } [Display( Name = "Zip" )] public string Zip { get; set; } [Display( Name = "DOB" )] public DateTime? DateOfBirth { get; set; } [Display( Name = "Childrens" )] public int? Childrens { get; set; } [Display( Name = "Gender" )] public string Gender { get; set; } [Display( Name = "Salary" )] public decimal Salary { get; set; } [Display( Name = "Tax" )] public decimal Tax { get { if ( tax == 0 && Salary > 0 ) { tax = Salary * TaxPercentage; } return tax; } set { tax = value; } } [Display( Name = "Active" )] public bool IsActive { get; set; } public List<Salary> Salaries { get; set; } = new(); public decimal ChildrensPerSalary => Salary == 0m ? 0m : ( Childrens is null || Childrens == 0 ? 1 : Childrens.Value ) / Salary; public decimal TaxPercentage = 0.25m; private decimal tax; } public class Salary { public DateTime Date { get; set; } public decimal Total { get; set; } } }
Hidden Columns
To change the default visibility of a column, set theDisplaying 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.
@using System @using System.Collections.Generic @using System.ComponentModel.DataAnnotations @using System.Linq @using System.Threading.Tasks <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; } } public class Gender { public string Code { get; set; } public string Description { get; set; } } public class EmployeeData { private static readonly string[] FirstNames = ["Samuel", "Irvin", "Cora", "Jessie", "Maryann", "Kara"]; private static readonly string[] LastNames = ["Collier", "Ziemann", "Conn", "Wilkinson", "Hilpert", "Brekke"]; private static readonly string[] Cities = ["London", "Paris", "New York", "Berlin", "Lisbon", "Zagreb"]; public static IEnumerable<Gender> Genders = [ new() { Code = null, Description = string.Empty }, new() { Code = "M", Description = "Male" }, new() { Code = "F", Description = "Female" }, new() { Code = "D", Description = "Diverse" } ]; public Task<List<Employee>> GetDataAsync() => Task.FromResult( Enumerable.Range( 1, 500 ) .Select( index => { string firstName = FirstNames[( index - 1 ) % FirstNames.Length]; string lastName = LastNames[( index - 1 ) % LastNames.Length]; return new Employee { Id = index, FirstName = firstName, LastName = lastName, Email = $"{firstName}.{lastName}{index}@example.com", City = Cities[( index - 1 ) % Cities.Length], Zip = $"{10000 + index}", DateOfBirth = new DateTime( 1950 + index % 50, 1 + index % 12, 1 + index % 28 ), Childrens = index % 6, Gender = index % 3 == 0 ? "D" : index % 2 == 0 ? "F" : "M", Salary = 50000m + index * 137m % 50000m, IsActive = index % 2 == 0, Salaries = Enumerable.Range( 1, index % 4 ) .Select( month => new Salary { Date = new DateTime( 2025, month, 1 ), Total = 1000m + index * month * 11m } ) .ToList() }; } ) .ToList() ); } public class Employee { public Employee() { } public Employee( Employee other ) { Id = other.Id; Childrens = other.Childrens; DateOfBirth = other.DateOfBirth; City = other.City; Email = other.Email; FirstName = other.FirstName; LastName = other.LastName; Gender = other.Gender; IsActive = other.IsActive; Salaries = other.Salaries; Salary = other.Salary; Tax = other.Tax; Zip = other.Zip; } [Display( Name = "Id" )] public int Id { get; set; } [Required] public string FirstName { get; set; } [Required] public string LastName { get; set; } [Required] [EmailAddress] [Display( Name = "Email" )] public string Email { get; set; } [Display( Name = "City" )] public string City { get; set; } [Display( Name = "Zip" )] public string Zip { get; set; } [Display( Name = "DOB" )] public DateTime? DateOfBirth { get; set; } [Display( Name = "Childrens" )] public int? Childrens { get; set; } [Display( Name = "Gender" )] public string Gender { get; set; } [Display( Name = "Salary" )] public decimal Salary { get; set; } [Display( Name = "Tax" )] public decimal Tax { get { if ( tax == 0 && Salary > 0 ) { tax = Salary * TaxPercentage; } return tax; } set { tax = value; } } [Display( Name = "Active" )] public bool IsActive { get; set; } public List<Salary> Salaries { get; set; } = new(); public decimal ChildrensPerSalary => Salary == 0m ? 0m : ( Childrens is null || Childrens == 0 ? 1 : Childrens.Value ) / Salary; public decimal TaxPercentage = 0.25m; private decimal tax; } public class Salary { public DateTime Date { get; set; } public decimal Total { 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 theColumnChooserPosition property.
@using System @using System.Collections.Generic @using System.ComponentModel.DataAnnotations @using System.Linq @using System.Threading.Tasks <DataGrid TItem="Employee" Data="inMemoryData" Responsive ShowColumnChooser PagerPosition="DataGridPagerPosition.Top" PagerOptions="new DataGridPagerOptions() { ColumnChooserPosition = PagerElementPosition.End }"> </DataGrid>
@code { private readonly EmployeeData EmployeeData = new(); private IEnumerable<Employee> inMemoryData; protected override async Task OnInitializedAsync() { inMemoryData = ( await EmployeeData.GetDataAsync().ConfigureAwait( false ) ).Take( 25 ); await base.OnInitializedAsync(); } public class Gender { public string Code { get; set; } public string Description { get; set; } } public class EmployeeData { private static readonly string[] FirstNames = ["Samuel", "Irvin", "Cora", "Jessie", "Maryann", "Kara"]; private static readonly string[] LastNames = ["Collier", "Ziemann", "Conn", "Wilkinson", "Hilpert", "Brekke"]; private static readonly string[] Cities = ["London", "Paris", "New York", "Berlin", "Lisbon", "Zagreb"]; public static IEnumerable<Gender> Genders = [ new() { Code = null, Description = string.Empty }, new() { Code = "M", Description = "Male" }, new() { Code = "F", Description = "Female" }, new() { Code = "D", Description = "Diverse" } ]; public Task<List<Employee>> GetDataAsync() => Task.FromResult( Enumerable.Range( 1, 500 ) .Select( index => { string firstName = FirstNames[( index - 1 ) % FirstNames.Length]; string lastName = LastNames[( index - 1 ) % LastNames.Length]; return new Employee { Id = index, FirstName = firstName, LastName = lastName, Email = $"{firstName}.{lastName}{index}@example.com", City = Cities[( index - 1 ) % Cities.Length], Zip = $"{10000 + index}", DateOfBirth = new DateTime( 1950 + index % 50, 1 + index % 12, 1 + index % 28 ), Childrens = index % 6, Gender = index % 3 == 0 ? "D" : index % 2 == 0 ? "F" : "M", Salary = 50000m + index * 137m % 50000m, IsActive = index % 2 == 0, Salaries = Enumerable.Range( 1, index % 4 ) .Select( month => new Salary { Date = new DateTime( 2025, month, 1 ), Total = 1000m + index * month * 11m } ) .ToList() }; } ) .ToList() ); } public class Employee { public Employee() { } public Employee( Employee other ) { Id = other.Id; Childrens = other.Childrens; DateOfBirth = other.DateOfBirth; City = other.City; Email = other.Email; FirstName = other.FirstName; LastName = other.LastName; Gender = other.Gender; IsActive = other.IsActive; Salaries = other.Salaries; Salary = other.Salary; Tax = other.Tax; Zip = other.Zip; } [Display( Name = "Id" )] public int Id { get; set; } [Required] public string FirstName { get; set; } [Required] public string LastName { get; set; } [Required] [EmailAddress] [Display( Name = "Email" )] public string Email { get; set; } [Display( Name = "City" )] public string City { get; set; } [Display( Name = "Zip" )] public string Zip { get; set; } [Display( Name = "DOB" )] public DateTime? DateOfBirth { get; set; } [Display( Name = "Childrens" )] public int? Childrens { get; set; } [Display( Name = "Gender" )] public string Gender { get; set; } [Display( Name = "Salary" )] public decimal Salary { get; set; } [Display( Name = "Tax" )] public decimal Tax { get { if ( tax == 0 && Salary > 0 ) { tax = Salary * TaxPercentage; } return tax; } set { tax = value; } } [Display( Name = "Active" )] public bool IsActive { get; set; } public List<Salary> Salaries { get; set; } = new(); public decimal ChildrensPerSalary => Salary == 0m ? 0m : ( Childrens is null || Childrens == 0 ? 1 : Childrens.Value ) / Salary; public decimal TaxPercentage = 0.25m; private decimal tax; } public class Salary { public DateTime Date { get; set; } public decimal Total { get; set; } } }
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.