Component

BOBDataGrid

Strongly-typed tabular data with sorting, filtering, pagination, selection, custom templates, and more — declaratively.

API reference ↗

Basic usage

Bind Items and declare BOBDataColumn elements inside Columns.

5 rows.
IDNameEmailAge
1Alice Johnsonalice@example.com29
2Marcus Chenmarcus@example.com34
3Priya Patelpriya@example.com41
4Diego Martinezdiego@example.com26
5Hana Nakamurahana@example.com38
RAZOR 
<BOBDataGrid Items="_people">
    <Columns>
        <BOBDataColumn TItem="Person" Property="@(p => p.Id)" Header="ID" />
        <BOBDataColumn TItem="Person" Property="@(p => p.Name)" Header="Name" />
        <BOBDataColumn TItem="Person" Property="@(p => p.Email)" Header="Email" />
        <BOBDataColumn TItem="Person" Property="@(p => p.Age)" Header="Age" />
    </Columns>
</BOBDataGrid>

Sortable

Enable Sortable on the grid and on the columns you want clickable.

5 rows.
Email
1Alice Johnsonalice@example.com29
2Marcus Chenmarcus@example.com34
3Priya Patelpriya@example.com41
4Diego Martinezdiego@example.com26
5Hana Nakamurahana@example.com38
RAZOR 
<BOBDataGrid Items="_people" Sortable="true">
    <Columns>
        <BOBDataColumn TItem="Person" Property="@(p => p.Id)" Header="ID" Sortable="true" />
        <BOBDataColumn TItem="Person" Property="@(p => p.Name)" Header="Name" Sortable="true" />
        <BOBDataColumn TItem="Person" Property="@(p => p.Email)" Header="Email" />
        <BOBDataColumn TItem="Person" Property="@(p => p.Age)" Header="Age" Sortable="true" />
    </Columns>
</BOBDataGrid>

Filter + pagination

35 rows. Page 1 of 4.
IDNameEmailAge
1Person 01person1@example.com21
2Person 02person2@example.com22
3Person 03person3@example.com23
4Person 04person4@example.com24
5Person 05person5@example.com25
6Person 06person6@example.com26
7Person 07person7@example.com27
8Person 08person8@example.com28
9Person 09person9@example.com29
10Person 10person10@example.com30
Showing 1 to 10 of 35
RAZOR 
<BOBDataGrid Items="_big"
             Filterable="true"
             FilterPlaceholder="Search..."
             PageSize="10"
             ShowPageSizeSelector="true"
             PageSizeOptions="@(new[] { 5, 10, 25 })">
    <Columns>
        <BOBDataColumn TItem="Person" Property="@(p => p.Id)" Header="ID" Filterable="true" />
        <BOBDataColumn TItem="Person" Property="@(p => p.Name)" Header="Name" Filterable="true" />
        <BOBDataColumn TItem="Person" Property="@(p => p.Email)" Header="Email" Filterable="true" />
        <BOBDataColumn TItem="Person" Property="@(p => p.Age)" Header="Age" Filterable="true" />
    </Columns>
</BOBDataGrid>

Multiple selection

5 rows.
NameEmailAge
Alice Johnsonalice@example.com29
Marcus Chenmarcus@example.com34
Priya Patelpriya@example.com41
Diego Martinezdiego@example.com26
Hana Nakamurahana@example.com38
RAZOR 
<BOBDataGrid TItem="Person"
             Items="_people"
             SelectionMode="SelectionMode.Multiple"
             SelectedItems="_selected"
             SelectedItemsChanged="@(s => { _selected = s; StateHasChanged(); })">
    <Columns>
        <BOBDataColumn TItem="Person" Property="@(p => p.Name)" Header="Name" />
        <BOBDataColumn TItem="Person" Property="@(p => p.Email)" Header="Email" />
        <BOBDataColumn TItem="Person" Property="@(p => p.Age)" Header="Age" />
    </Columns>
</BOBDataGrid>

Custom templates

Use Template with context to render any markup inside a cell.

5 rows.
PersonAge
Alice Johnson
alice@example.com
29
Marcus Chen
marcus@example.com
34
Priya Patel
priya@example.com
41
Diego Martinez
diego@example.com
26
Hana Nakamura
hana@example.com
38
RAZOR 
<BOBDataGrid Items="_people">
    <Columns>
        <BOBDataColumn TItem="Person" Header="Person">
            <Template>
                <strong>@context.Name</strong>
                <div style="font-size: 0.85em; opacity: 0.7;">@context.Email</div>
            </Template>
        </BOBDataColumn>
        <BOBDataColumn TItem="Person" Property="@(p => p.Age)" Header="Age" Align="ColumnAlign.Right" />
    </Columns>
</BOBDataGrid>

Alignment & width

5 rows.
Name (left)Email (center)Age (right)
Alice Johnsonalice@example.com29
Marcus Chenmarcus@example.com34
Priya Patelpriya@example.com41
Diego Martinezdiego@example.com26
Hana Nakamurahana@example.com38
RAZOR 
<BOBDataGrid Items="_people">
    <Columns>
        <BOBDataColumn TItem="Person" Property="@(p => p.Name)" Header="Name (left)" Align="ColumnAlign.Left" Width="200px" />
        <BOBDataColumn TItem="Person" Property="@(p => p.Email)" Header="Email (center)" Align="ColumnAlign.Center" />
        <BOBDataColumn TItem="Person" Property="@(p => p.Age)" Header="Age (right)" Align="ColumnAlign.Right" Width="80px" />
    </Columns>
</BOBDataGrid>

Shadow & Border

5 rows.
NameAge
Alice Johnson29
Marcus Chen34
Priya Patel41
Diego Martinez26
Hana Nakamura38
5 rows.
NameAge
Alice Johnson29
Marcus Chen34
Priya Patel41
Diego Martinez26
Hana Nakamura38
RAZOR 
<BOBDataGrid Items="_people" Shadow="@BOBShadowPresets.Elevation(3)">
    <Columns>
        <BOBDataColumn TItem="Person" Property="@(p => p.Name)" Header="Name" />
        <BOBDataColumn TItem="Person" Property="@(p => p.Age)" Header="Age" />
    </Columns>
</BOBDataGrid>
<BOBDataGrid Items="_people" Border="@BOBBorderPresets.RoundedLarge">
    <Columns>
        <BOBDataColumn TItem="Person" Property="@(p => p.Name)" Header="Name" />
        <BOBDataColumn TItem="Person" Property="@(p => p.Age)" Header="Age" />
    </Columns>
</BOBDataGrid>

Properties

37 rows.
PropertyTypeDefaultDescription
FixedHeaderboolWhen , the header row stays fixed while scrolling.
RowTemplateRenderFragment<TItem>?Custom template for rendering each data row.
FooterTemplateRenderFragment?Custom template rendered inside the table footer.
CellBorderBorderStyle?Border style applied to individual cells.
RowBorderBorderStyle?Border style applied to rows.
ColumnsRenderFragment?Column definitions rendered inside the data collection.
ItemsIEnumerable<TItem>?Data items to display.
DensityBOBDensityBOBDensity.StandardVertical density (gap) of rows.
SizeBOBSizeBOBSize.MediumVisual size of the data collection.
HoverableBooleantrueWhen true (default), rows highlight on hover.
ShadowShadowStyle?Shadow style applied to the container.
SelectionModeSelectionModeSelectionMode.NoneRow selection mode.
SelectedItemsHashSet<TItem>?Currently selected items. Use with two-way binding.
SelectedItemsChangedEventCallback<HashSet<TItem>>Raised when the selection changes.
SortableBooleanWhen true, column headers are clickable for sorting.
DefaultSortColumnString?Name of the column to sort by on initial render.
DefaultSortDirectionSortDirection?Initial sort direction. Defaults to Ascending.
FilterableBooleanWhen true, a search box filters the displayed items.
FilterPlaceholderString"Search..."Placeholder text for the filter search box.
CustomFilterFunc<TItem, String, Boolean>?Custom predicate used to filter items. Receives the item and the search text.
PageSizeInt32?Number of items per page. When null, pagination is disabled.
PageSizeOptionsInt32[][10, 20, 50, 100]Available page sizes shown in the page-size selector.
ShowPageSizeSelectorBooleanWhen true, a dropdown lets the user change the page size.
EnableVirtualizationBooleanWhen true, only visible rows are rendered (improves performance for large lists).
HeightString?Fixed height of the container. Required for virtualization and fixed header.
EmptyContentRenderFragment?Custom template rendered when there are no items to display.
LoadingContentRenderFragment?Custom template rendered while Loading is true.
LoadingBooleanWhen true, the loading template is shown.
BorderBorderStyle?Border style applied to the container.
BackgroundColorString?Background color of the container. Accepts any valid CSS color value.
ItemPatternRowStylePattern?Alternating row style pattern (e.g. zebra striping).
OnRowClickEventCallback<TItem>Raised when a row is clicked and SelectionMode is not active.
OnSortEventCallback<DataCollectionSortEventArgs>Raised when the sort column or direction changes.
OnFilterEventCallback<DataCollectionFilterEventArgs>Raised when the filter text changes.
OnPageChangeEventCallback<DataCollectionPageChangeEventArgs>Raised when the current page changes.
VariantTVariant?
AdditionalAttributesIReadOnlyDictionary<String, Object>?