DataGrid Column Picker

Enable default column picker by setting the AllowColumnPicking grid property to true. You can disable picking for specific columns by setting their Pickable property to false. The example below also sets ColumnsPickerAllowFiltering on the grid to make picking columns easier. Use QueryOnlyVisibleColumns to tell the grid to only include currently visible columns in the IQueryable query.

Documentation: grid, column.

In this demo the Photo column has Pickable="false" to prevent hiding it, the Extension column uses ColumnPickerTitle="Phone Number Extension" for a custom picker label, and ColumnsPickerAllowFiltering adds a search box in the picker.

ID
Photo
First Name
Last Name
Title
Title Of Courtesy
Birth Date
Hire Date
Address
City
Region
Postal Code
Country
Home Phone
Extension
Notes
No records to display.

Console log

Picking columns with Context Menu

You could also create your own custom column picker using the context menu. In this case you will have to track column visibility yourself.

ID
Photo
First Name
Last Name
Title
Title Of Courtesy
Birth Date
Hire Date
Address
City
Region
Postal Code
Country
Home Phone
Extension
Notes
No records to display.

Console log

✨ 오늘의 명언 & 마음의 양식

“언제나 불가능해 보이던 일도 이루어지기 전까지는 그렇다.”

— 넬슨 만델라 (남아프리카 공화국의 정치가, 인권 운동가)

Demos Configuration

Premium Themes

  • Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark

Free Themes

  • Material
  • Material Dark
  • Standard
  • Standard Dark
  • Default
  • Dark
  • Humanistic
  • Humanistic Dark
  • Software
  • Software Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙