Example of Column Template in Blazor DataGrid Component
This sample shows how to use the DataGrid component's column template feature.
Employee Image | Employee ID | Name | Title | Hire Date |
|---|
 | 1 | Nancy | Sales Representative | 5/1/1992 |
 | 2 | Andrew | Vice President, Sales | 8/14/1992 |
 | 3 | Janet | Sales Representative | 4/1/1992 |
 | 4 | Margaret | Sales Representative | 5/3/1993 |
 | 5 | Steven | Sales Manager | 10/17/1993 |
 | 6 | Michael | Sales Representative | 10/17/1993 |
 | 7 | Robert | Sales Representative | 1/2/1994 |
 | 8 | Laura | Inside Sales Coordinator | 3/5/1994 |
 | 9 | Anne | Sales Representative | 11/15/1994 |
Using the Template property, the Blazor DataGrid allows you to use a custom layout to display custom element values or content for each column. To specify custom content, use the GridColumn component's of Template component. You can access the data within the Template by using the implicit named parameter Context.
In this demo, the column template displays an Employee Image column with an employee photo.
More information about the Column Template feature can be found in this documentation section.