Blazorise DataGrid: Custom Row Colors

Control the look and feel of each row.

Overview

You have full control over appearance of each row, including the selected rows.

Examples

Custom Row Colors

#
First Name
Last Name
Email
Salary
1SamuelCollierSamuel.Collier62@gmail.com86 030,41 €
2IrvinZiemannIrvin.Ziemann@gmail.com61 781,31 €
3GeraldPollichGerald82@yahoo.com58 810,75 €
4CoraConnCora27@yahoo.com84 414,66 €
5AlfonsoD'AmoreAlfonso.DAmore@hotmail.com69 318,29 €
6JessieWilkinsonJessie_Wilkinson@gmail.com78 566,12 €
7GregoryRennerGregory63@hotmail.com57 456,82 €
8MaryannHilpertMaryann.Hilpert12@gmail.com89 153,38 €
9MerlePacochaMerle3@gmail.com55 349,94 €
10AngelinaWardAngelina42@gmail.com73 625,86 €
<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          RowStyling="@OnRowStyling"
          SelectedRowStyling="@OnSelectedRowStyling"
          Responsive>
    <DataGridCommandColumn />
    <DataGridColumn Field="@nameof( Employee.Id )" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="First Name" Editable />
    <DataGridColumn Field="@nameof( Employee.LastName )" Caption="Last Name" Editable />
    <DataGridColumn Field="@nameof( Employee.Email )" Caption="Email" Editable />
    <DataGridColumn Field="@nameof( Employee.Salary )" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo( "fr-FR" )" Editable>
        <EditTemplate>
            <NumericInput TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@(v => context.CellValue = v)" />
        </EditTemplate>
    </DataGridColumn>
</DataGrid>

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

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

    private void OnRowStyling( Employee employee, DataGridRowStyling styling )
    {
        if ( !employee.IsActive )
            styling.Style = "color: red;";
    }

    private void OnSelectedRowStyling( Employee employee, DataGridRowStyling styling )
    {
        styling.Background = Background.Info;
    }
}

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