Blazorise DataGrid: Columns

DataGrid provides many types of columns. You can use built-in columns such as text, numeric, date, checkbox, select, etc to automatically create specialized content.

DataGridColumn

Default column template for text editor
Email
Samuel.Collier62@gmail.com
Irvin.Ziemann@gmail.com
Gerald82@yahoo.com
Cora27@yahoo.com
Alfonso.DAmore@hotmail.com
<DataGrid TItem="Employee" Data="@employeeList" PageSize="5" Responsive Editable Filterable>
        <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable />
        <DataGridCommandColumn />
</DataGrid>

@code {
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

DataGridCheckColumn

Column template for boolean values
Active
 
<DataGrid TItem="Employee" Data="@employeeList" PageSize="5" Responsive Editable Filterable>
        <DataGridCheckColumn Field="@nameof(Employee.IsActive)" Caption="Active" Editable />
    <DataGridCommandColumn />
</DataGrid>

@code {
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

DataGridDateColumn

Column template for datetime values
Date Of Birth
8/26/1970 12:04:15 PM
5/25/1974 3:58:51 AM
4/29/1969 7:52:08 PM
2/12/1984 9:18:03 PM
11/6/1983 2:08:14 PM
<DataGrid TItem="Employee" Data="@employeeList" PageSize="5" Responsive Editable Filterable>
        <DataGridDateColumn Field="@nameof(Employee.DateOfBirth)" Caption="Date Of Birth" Editable />
        <DataGridCommandColumn />
</DataGrid>

@code {
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

DataGridNumericColumn

Column template for numeric values
Salary
86030.41
61781.31
58810.75
84414.66
69318.29
<DataGrid TItem="Employee" Data="@employeeList" PageSize="5" Responsive Editable Filterable>
        <DataGridNumericColumn Field="@nameof(Employee.Salary)" Caption="Salary" Editable />
    <DataGridCommandColumn />
</DataGrid>

@code {
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

DataGridSelectColumn

Column template for selectable values
Gender
M
M
M
D
F
<DataGrid TItem="Employee" Data="@employeeList" PageSize="5" Responsive Editable Filterable>
    <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable
                          Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" />
    <DataGridCommandColumn />
</DataGrid>

@code {
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        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.

On this page