DataGrid

When adding Blazor components conditionally they always render at the end. Use this technique to render conditionally specific DataGrid column(s) and keep the render order as declared in the markup/code.

In this demo the Photo column uses showPhoto within a RenderFragment to conditionally render in the correct position (between ID and First Name), with a switch to toggle its visibility while preserving column order.

Show employee photo:
ID
 
First Name
 
Last Name
 
Job Title
 
Title
 
Birth Date
 
Hire Date
 
Address
 
City
 
Region
 
Postal Code
 
Country
 
Home Phone
 
Extension
 
Notes
 
No records to display.
✨ 오늘의 명언 & 마음의 양식

“어제로부터 배우고, 오늘을 살며, 내일을 희망하라. 중요한 것은 질문을 멈추지 않는 것이다.”

— 알베르트 아인슈타인 (물리학자)

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 🗙