Blazorise DataGrid Columns

Default Column

Default column template for text values. In this example, we are using the default column template for the Employee.Email property.

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();
    }
}

Check Column

Column template for boolean values

<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();
    }
}

Date Column

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();
    }
}

Date Column with Native Mode

Column template for datetime values. Set NativeInputMode if you prefer to use the native html input variant of the date input.

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 NativeInputMode />
    <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();
    }
}

Numeric Column

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();
    }
}

Numeric Column with Native Mode

Column template for numeric values. Set NativeInputMode if you prefer to use the native html input variant of the numeric input.

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 NativeInputMode />
    <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();
    }
}

Select Column

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();
    }
}

Select Column Multiple

Column template for selectable values. Allow multiple values support by setting Multiple to true. Bind a string or value type array.

<DataGrid TItem="EmployeeActivity" Data="@employeeList" PageSize="5" Responsive Editable>
    <DataGridSelectColumn TItem="EmployeeActivity" Field="@nameof( EmployeeActivity.Activities )"
                          Caption="Activity" 
                          Editable
                          Multiple 
                          Data="activities"
                          ValueField="(x) => ((Activity)x).Code"
                          TextField="(x) => ((Activity)x).Description" />
    <DataGridCommandColumn />
</DataGrid>

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

    protected override async Task OnInitializedAsync()
    {
        employeeList = (await EmployeeData.GetDataAsync()).Select(x => new EmployeeActivity(x)
            {
                Activities = activities
                        .OrderBy(x => Random.Shared.Next())
                        .Take(Random.Shared.Next(5))
                        .Select(x => x.Code).ToArray()
            }).ToList();

        await base.OnInitializedAsync();
    }

    private List<Activity> activities = new List<Activity>
    {
        new Activity { Code = "MEET", Description = "Meeting" },
        new Activity { Code = "TRAIN", Description = "Training" },
        new Activity { Code = "CODE", Description = "Coding" },
        new Activity { Code = "R&D", Description = "Research" },
        new Activity { Code = "TEST", Description = "Testing" },
    };

    public class EmployeeActivity : Employee
    {
        public string[] Activities { get; set; }

        public EmployeeActivity(Employee employee)
        {
            this.City = employee.City;
            this.Email = employee.Email;
            this.FirstName = employee.FirstName;
            this.LastName = employee.LastName;
            this.Salary = employee.Salary;
            this.DateOfBirth = employee.DateOfBirth;
            this.Gender = employee.Gender;
            this.Childrens = employee.Childrens;
            this.Id = employee.Id;
            this.Zip = employee.Zip;
            this.Tax = employee.Tax;
            this.Salaries = employee.Salaries;
            this.IsActive = employee.IsActive;
        }
    }

    public class Activity
    {
        public string Code { get; set; }
        public string Description { get; set; }
    }
}

Activity

R&D, CODE, TEST
CODE, MEET
R&D, TRAIN, CODE
R&D

Blazorise DataGrid: Columns