Blazor Blueprint Blazor Blueprint
Previous Dashboard Grid Next Dialog

Data Grid

A headless data grid primitive with state management for sorting, pagination, row selection, column visibility/reorder/resize, and keyboard navigation. Designed to be composed into fully styled grid components.

Basic

A headless data grid using BbDataGridHeader, BbDataGridHeaderCell, BbDataGridBody, BbDataGridRow, and BbDataGridCell. Set Sortable on header cells to enable click-to-sort.
Name Age Email
Alice Johnson 30 [email protected]
Bob Smith 25 [email protected]
Charlie Brown 35 [email protected]

Row Selection

Set SelectionMode to Single or Multiple to enable row selection. Use OnSelectionChange to respond to selection changes.
Name Email
Alice Johnson [email protected]
Bob Smith [email protected]
Charlie Brown [email protected]

Selected: 0 rows

Anatomy

<BbDataGrid TData="TData" Items="...">         <!-- root: manages state, renders <table> -->
    <BbDataGridHeader>                           <!-- <thead> -->
        <tr>
            <BbDataGridHeaderCell ColumnId="..."> <!-- <th> with sort support -->
                ...
            </BbDataGridHeaderCell>
        </tr>
    </BbDataGridHeader>
    <BbDataGridBody>                             <!-- <tbody> -->
        <BbDataGridRow Item="...">               <!-- <tr> with selection support -->
            <BbDataGridCell>...</BbDataGridCell>  <!-- <td> -->
        </BbDataGridRow>
    </BbDataGridBody>
</BbDataGrid>
View source on GitHub
Previous Dashboard Grid Next Dialog