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	04/11/2026	True
2	Employee 2	HR	43,000	03/12/2026	True
3	Employee 3	Marketing	44,500	02/10/2026	False
4	Employee 4	Finance	46,000	01/11/2026	True
5	Employee 5	Engineering	47,500	12/12/2025	True
6	Employee 6	Sales	49,000	11/12/2025	False
7	Employee 7	HR	50,500	10/13/2025	True
8	Employee 8	Marketing	52,000	09/13/2025	True
9	Employee 9	Finance	53,500	08/14/2025	False
10	Employee 10	Engineering	55,000	07/15/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
    }
}