Blazorise DataGrid: Accessibility

Shows the DataGrid accessibility features.

Overview

Accessibility is a critical aspect of web development, ensuring that all users, including those with disabilities, can access and interact with web content. The Blazorise DataGrid provides several features to enhance accessibility, making it easier for users to navigate and understand the data presented in the grid.

Examples

Caption

The Caption property allows you to define a caption for the DataGrid. This caption will be rendered as a <caption> element in the table. It is useful for providing additional context or information about the data being displayed in the grid.
This is a caption for the DataGrid.
#
First Name
Last Name
Email
1SamuelCollierSamuel.Collier62@gmail.com
2IrvinZiemannIrvin.Ziemann@gmail.com
3GeraldPollichGerald82@yahoo.com
4CoraConnCora27@yahoo.com
5AlfonsoD'AmoreAlfonso.DAmore@hotmail.com
6JessieWilkinsonJessie_Wilkinson@gmail.com
7GregoryRennerGregory63@hotmail.com
8MaryannHilpertMaryann.Hilpert12@gmail.com
9MerlePacochaMerle3@gmail.com
10AngelinaWardAngelina42@gmail.com
<DataGrid TItem="Employee" Data="@employeeList" Responsive Caption="This is a caption for the DataGrid.">
    <DataGridColumn Field="@nameof( Employee.Id )" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="First Name" />
    <DataGridColumn Field="@nameof( Employee.LastName )" Caption="Last Name" />
    <DataGridColumn Field="@nameof( Employee.Email )" Caption="Email" />
</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();
    }
}

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