Grid

IsabyteGrid

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

Grid Parameters

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

Items per page:

Showing 1–10 of 50

Current Configuration

📋

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

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

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

        _filterColumns = new()
        {
            new() { Id = "Name", HeaderName = "Name", DataType = IsabyteFilterDataType.String, Placeholder = "Search name..." },
            new() { Id = "Department", HeaderName = "Department", DataType = IsabyteFilterDataType.Dropdown,
                    Items = new() { "Engineering", "Sales", "HR", "Marketing", "Finance" } },
            new() { Id = "Salary", HeaderName = "Salary", DataType = IsabyteFilterDataType.Decimal, MinValue = 0m, MaxValue = 200000m, Step = 1000m },
            new() { Id = "StartDate", HeaderName = "Started", DataType = IsabyteFilterDataType.DateRange },
            new() { Id = "IsActive", HeaderName = "Active", DataType = IsabyteFilterDataType.Boolean },
        };
    }

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

Related learning

See the Admin Dashboard tutorial for a step-by-step walkthrough.