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.
RowStyling and SelectedRowStyling are applied to the table row element. Some CSS frameworks, especially Bootstrap table styles, can also style table cells directly and override row-level text or background styles.
If you need the styling to apply reliably to the full rendered row, prefer CellStyling and SelectedCellStyling, or assign a custom class and target the row cells with a selector like tr.my-row > td.
As a last resort, you can also use an explicit !important in your custom CSS or style string.
The example below uses cell styling so the row colors remain consistent across providers.
Examples
Custom Row Colors
<DataGrid TItem="Employee" Data="" @bind-SelectedRow="" CellStyling="" SelectedCellStyling="" 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 OnCellStyling( Employee employee, DataGridColumn<Employee> column, DataGridCellStyling styling ) { if ( !employee.IsActive ) styling.TextColor = TextColor.Danger; } private void OnSelectedCellStyling( Employee employee, DataGridColumn<Employee> column, DataGridCellStyling 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.