SamovarGrid 10.1.0

.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher.
There is a newer version of this package available.
See the version list below for details. 
dotnet add package SamovarGrid --version 10.1.0
                    


                    

                
NuGet\Install-Package SamovarGrid -Version 10.1.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="SamovarGrid" Version="10.1.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="SamovarGrid" Version="10.1.0" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="SamovarGrid" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add SamovarGrid --version 10.1.0
                    


                    

                
#r "nuget: SamovarGrid, 10.1.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package SamovarGrid@10.1.0
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=SamovarGrid&version=10.1.0
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=SamovarGrid&version=10.1.0
                    


                            Install as a Cake Tool

SamovarGrid

A full-featured data grid component for Blazor (.NET 10).

NuGet License: MIT

Features

  • Paging and virtual scrolling
  • Sorting
  • Filtering — filter row, filter menu, or custom programmatic filter
  • Inline and popup editing with built-in and custom edit templates
  • Row insertion and deletion
  • Single and multiple row selection
  • Column resizing (block and sliding modes)
  • Cell display templates
  • Detail (expandable) rows
  • Auto-generated columns from model properties
  • Command bar with bulk selection, delete, and data export (Excel / CSV)
  • Cell content alignment (left, center, right)
  • Grid size modes (default, small, large)
  • CSS customization via Bootstrap classes and CSS custom properties
  • Works with Interactive Server, WebAssembly, and Auto render modes

Getting Started

1. Install the NuGet package
dotnet add package SamovarGrid
2. Register services
// Program.cs
builder.Services.AddSamovarGrid();
3. Add the stylesheet

Option A — Automatic CSS injection (recommended)

// Program.cs
builder.Services.AddSamovarGrid(options => options.InjectCss = true);

@* App.razor *@
<head>
    ...
    <SamovarGridStyles />
</head>

Option B — Manual link

<link href="_content/SamovarGrid/samovar.grid.css" rel="stylesheet" />
4. Add the using directive
@* _Imports.razor *@
@using Samovar.Grid

Basic Usage

@page "/"
@rendermode InteractiveServer
@inject EmployeeService EmployeeService

<SmGrid Data=employees Height="600px">
    <Columns>
        <Column Field="@nameof(Employee.FirstName)" />
        <Column Field="@nameof(Employee.LastName)" />
        <Column Field="@nameof(Employee.Department)" />
        <Column Field="@nameof(Employee.HireDate)" />
        <Column Field="@nameof(Employee.Salary)" TextAlign="GridTextAlign.Right" />
    </Columns>
</SmGrid>

@code {
    private List<Employee>? employees;

    protected override async Task OnInitializedAsync()
    {
        employees = (await EmployeeService.GetEmployeesAsync()).ToList();
    }
}

Auto-Generated Columns

Set AutoGenerateColumns=true to let the grid reflect over the data model and generate columns for all public properties with simple types (string, int, DateTime, bool, decimal, etc.):

<SmGrid Data=employees AutoGenerateColumns=true />

Use [Browsable(false)] to exclude a property. Use [DisplayName] or [Display(Name=...)] to customize column headers:

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

public class Employee
{
    [DisplayName("Full Name")]
    public string Name { get; set; }

    [Display(Name = "Annual Salary")]
    public decimal Salary { get; set; }

    [Browsable(false)]
    public string InternalId { get; set; }
}

Filtering

The grid supports four filter modes:

<SmGrid Data=employees FilterMode=GridFilterMode.FilterRow Height="600px">
    <Columns>
        <Column Field="@nameof(Employee.FirstName)" />
        <Column Field="@nameof(Employee.LastName)" />
        <Column Field="@nameof(Employee.IsActive)" />
    </Columns>
</SmGrid>
Mode Description
GridFilterMode.None No filtering
GridFilterMode.FilterRow Per-column filter inputs in a dedicated row
GridFilterMode.FilterMenu Dropdown filter menus with value selection per column
GridFilterMode.Custom Programmatic filter via ApplyCustomFilter() / ResetCustomFilter()

Custom filter example:

async Task ApplyCustomFilter()
{
    Func<Employee, bool> filter = e => e.IsActive;
    await grid!.ApplyCustomFilter(filter);
}

async Task ResetCustomFilter()
{
    await grid!.ResetCustomFilter();
}

Editing

Enable inline or popup editing with the EditMode parameter. Add a CommandColumn to display edit/insert/delete buttons:

<SmGrid Data=employees
        EditMode=GridEditMode.Popup
        RowEditBegin="@((Employee e) => { })"
        RowInserting="@((Employee e) => { employees.Insert(0, e); })"
        RowsRemoving="@((List<Employee> items) => { employees = employees.Except(items).ToList(); })"
        Height="600px">
    <Columns>
        <Column Field="@nameof(Employee.FirstName)" />
        <Column Field="@nameof(Employee.LastName)" />
        <Column Field="@nameof(Employee.Salary)" />
        <CommandColumn EditButtonVisible=true DeleteButtonVisible=true NewButtonVisible=true Width="150px" />
    </Columns>
</SmGrid>
Mode Description
GridEditMode.None No editing
GridEditMode.Form Edit form renders below the row
GridEditMode.Popup Edit form in a modal popup
Custom Edit / Insert Templates

For full control over the edit form, use EditFormTemplate and InsertFormTemplate:

<SmGrid Data=employees EditMode=GridEditMode.Form Height="600px">
    <Columns>
        <CommandColumn EditButtonVisible=true NewButtonVisible=true Width="150px" />
        <Column Field="@nameof(Employee.FirstName)" />
        <Column Field="@nameof(Employee.Salary)" />
    </Columns>
    <EditFormTemplate>
        <EditForm Model="@editContext" OnValidSubmit="HandleEditSubmit">
            <DataAnnotationsValidator />
            <InputText @bind-Value="editContext.FirstName" />
            <button type="submit">Save</button>
            <button type="button" @onclick="() => grid.CancelCustomRowEdit(editContext)">Cancel</button>
        </EditForm>
    </EditFormTemplate>
</SmGrid>

Row Selection

<SmGrid Data=employees
        SelectionMode=RowSelectionMode.Multiple
        @bind-MultipleSelectedDataRows=selectedRows
        Height="600px">
    <Columns>
        <Column Field="@nameof(Employee.FirstName)" />
        <Column Field="@nameof(Employee.LastName)" />
    </Columns>
</SmGrid>

@code {
    IEnumerable<Employee> selectedRows = [];
}
Mode Description
RowSelectionMode.None No selection
RowSelectionMode.Single One row at a time (bind with @bind-SingleSelectedDataRow)
RowSelectionMode.Multiple Multiple rows with checkboxes (bind with @bind-MultipleSelectedDataRows)

Command Bar

Enable the command bar for bulk actions and data export:

<SmGrid Data=employees
        ShowCommandBar=true
        SelectionMode=RowSelectionMode.Multiple
        Height="600px">
    ...
</SmGrid>

The command bar provides:

  • Select current page / Select all filtered rows / Deselect all buttons
  • Delete selected rows
  • Export dropdown: Excel (all / selected), CSV (all / selected)

Cell Templates

Customize how individual cells render:

<Column Field="@nameof(Employee.Salary)">
    <CellShowTemplate>
        @{
            var salary = (context as Employee)!.Salary;
            <span class="@(salary > 100000 ? "text-success fw-bold" : "")">
                @salary.ToString("C")
            </span>
        }
    </CellShowTemplate>
</Column>

Detail Rows

Expandable detail rows below each data row:

<SmGrid Data=employees ShowDetailRow=true Height="600px">
    <Columns>
        <Column Field="@nameof(Employee.FirstName)" />
        <Column Field="@nameof(Employee.LastName)" />
    </Columns>
    <DetailRowTemplate Context="item">
        @{
            var employee = item as Employee;
            <div>Email: @employee!.Email</div>
            <div>Phone: @employee.Phone</div>
        }
    </DetailRowTemplate>
</SmGrid>

Collapse all detail rows programmatically: await grid.CollapseAllDetailRows();

Virtual Scrolling

For large datasets, use virtual scrolling instead of paging:

<SmGrid Data=employees DataNavigationMode=NavigationMode.Virtual>
    <Columns>
        <Column Field="@nameof(Employee.FirstName)" />
        <Column Field="@nameof(Employee.LastName)" />
    </Columns>
</SmGrid>

Column Resizing

<SmGrid Data=employees ColumnResizeMode=GridColumnResizeMode.Sliding Height="600px">
    ...
</SmGrid>
Mode Description
GridColumnResizeMode.None No resizing
GridColumnResizeMode.Sliding Resize a column without affecting others
GridColumnResizeMode.Block Resize a column, adjacent columns adjust

Styling

Bootstrap CSS classes

Apply any Bootstrap table classes via CssClass and PaginationCssClass:

<SmGrid Data=employees
        CssClass="table-bordered table-sm table-striped"
        PaginationCssClass="pagination-sm"
        Height="600px">
    ...
</SmGrid>
Grid size modes
<SmGrid Data=employees SizeMode=GridSizeMode.Small Height="600px">
    ...
</SmGrid>
Mode Description
GridSizeMode.Default Standard spacing
GridSizeMode.Small Compact spacing
GridSizeMode.Large Generous spacing
CSS custom properties

Override these CSS variables to customize the grid appearance:

:root {
    --sm-row-selected-bg: rgba(69, 46, 222, 0.5);
    --sm-no-data-color: #999;
    --sm-detail-icon-size: 16px;
    --sm-scrollbar-size: 8px;
    --sm-scrollbar-thumb-color: #888;
    --sm-scrollbar-thumb-hover-color: #555;
    --sm-scrollbar-thumb-active-color: #333;
    --sm-scrollbar-track-color: #f1f1f1;
    --sm-scrollbar-thumb-radius: 4px;
    --sm-detail-row-expanded-icon: url('data:image/svg+xml;utf8,...');
    --sm-detail-row-collapsed-icon: url('data:image/svg+xml;utf8,...');
}

Cell Content Alignment

<Column Field="@nameof(Employee.Salary)" TextAlign="GridTextAlign.Right" />
<Column Field="@nameof(Employee.FirstName)" TextAlign="GridTextAlign.Center" />

SmGrid Parameters Reference

Parameter Type Default Description
Data IEnumerable<T> — Data source
Height string — Grid height (CSS value)
Width string — Grid width (CSS value)
PageSize uint 50 Rows per page
PagerSize uint 10 Pagination button count
DataNavigationMode NavigationMode Paging Paging or Virtual
FilterMode GridFilterMode None Filter mode
EditMode GridEditMode None Edit mode
SelectionMode RowSelectionMode None Row selection mode
ColumnResizeMode GridColumnResizeMode None Column resize behavior
SizeMode GridSizeMode Default Grid density
CssClass string — Bootstrap table classes
PaginationCssClass string — Bootstrap pagination classes
ShowColumnHeader bool? true Show/hide column headers
ShowDetailRow bool? false Enable detail rows
ShowCommandBar bool false Show command bar
AutoGenerateColumns bool false Auto-generate columns from model
SingleSelectedDataRow T? — Selected row (single mode)
MultipleSelectedDataRows IEnumerable<T>? — Selected rows (multiple mode)

Column Parameters Reference

Parameter Type Default Description
Field string — Property name from data model
Title string? Field name Column header text
Width string? — Column width (px, %, or flex like "1*")
TextAlign GridTextAlign Left Cell content alignment
Resizable bool true Allow user resizing
MinWidth double 50 Minimum column width in px

CommandColumn Parameters Reference

Parameter Type Default Description
Width string — Column width
EditButtonVisible bool? true Show edit button
NewButtonVisible bool? true Show insert button
DeleteButtonVisible bool? true Show delete button

License

MIT

Product Compatible and additional computed target framework versions.
.NET net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
10.2.0 241 4/21/2026
10.1.0 214 4/16/2026
10.0.0 204 3/25/2026
8.0.0 1,310 2/26/2025
Loading failed