Grid

The BptGrid component displays tabular data with sorting, paging, inline editing, and row selection.

Grid Parameters

Selection Mode

Page Size

Paging

Paging bar

Headers

Editable

Stripes

Hover

Cell borders

ID	Name	Department	Salary	Started	Active
1	Employee 1	Sales	41,500	03/11/2026	True
2	Employee 2	HR	43,000	02/09/2026	True
3	Employee 3	Marketing	44,500	01/10/2026	False
4	Employee 4	Finance	46,000	12/11/2025	True
5	Employee 5	Engineering	47,500	11/11/2025	True
6	Employee 6	Sales	49,000	10/12/2025	False
7	Employee 7	HR	50,500	09/12/2025	True
8	Employee 8	Marketing	52,000	08/13/2025	True
9	Employee 9	Finance	53,500	07/14/2025	False
10	Employee 10	Engineering	55,000	06/14/2025	True

Items per page:

Showing 1–10 of 50

Current Configuration

📋 [+]

<BptGrid Items="@_items"
         IsEditable="true"
         OnSave="HandleSave">
    <BptGridColumn Property="@(e => e.Id)" Title="ID" Width="60px" Editable="false" />
    <BptGridColumn Property="@(e => e.Name)" Title="Name" />
    <BptGridColumn Property="@(e => e.Department)" Title="Department" />
    <BptGridColumn Property="@(e => e.Salary)" Title="Salary" Format="N0" />
    <BptGridColumn Property="@(e => e.StartDate)" Title="Started" Format="d" />
    <BptGridColumn Property="@(e => e.IsActive)" Title="Active" />
</BptGrid>

@code {
    private List<GridDemoItem> _items = new();

    protected override void OnInitialized()
    {
        _items = LoadEmployees();
    }

    private void HandleSave(BptGridSaveEventArgs<GridDemoItem> args)
    {
        // args.ChangedItems — modified items
        // args.Changes — per-row details with originals
    }
}