Installation Guide

Get up and running

KBlazor is published on NuGet.org and runs in both Blazor Server and Blazor WebAssembly. Follow the steps below to add it to your project.

1

Install the package

Add KBlazor from the public NuGet.org feed using your preferred tool. No custom package source is required.

.NET CLI
dotnet add package KBlazor
Package Manager Console
Install-Package KBlazor
PackageReference (csproj)
<PackageReference Include="KBlazor" Version="1.1.0" />
Package page: nuget.org/packages/KBlazor. Source and releases are on GitHub.
KBlazor requires MudBlazor 8.x and .NET 10 or later. If MudBlazor isn't in your project yet, it will be added automatically as a transitive dependency.
2

Register services in Program.cs

KBlazor needs three scoped services and MudBlazor's service collection. Two more (IClientTimeZoneProvider, ITextMeasurer) are optional with built-in defaults.

Program.cs
using KBlazor.Services;
using MudBlazor.Services;

// MudBlazor (required by KBlazor components)
builder.Services.AddMudServices();

// KBlazor — provide your own implementations or use the in-memory stubs
builder.Services.AddScoped<IFlexTableSettings,    YourFlexTableSettings>();
builder.Services.AddScoped<IListViewSettingStore, YourListViewSettingStore>();
builder.Services.AddScoped<IEntityLookupProvider, YourEntityLookupProvider>();

// Optional — show DateTimes in the browser's local time (Server or WebAssembly)
builder.Services.AddScoped<IClientTimeZoneProvider, BrowserTimeZoneProvider>();
IFlexTableSettings
Controls whether personal views are enabled and which roles have admin access.
IListViewSettingStore
Persists named FlexTable views (column selection, sort, filters) per user.
IEntityLookupProvider
Resolves related entities for lookup dropdowns, entity column filters, and [AutoComplete] fields.
3

Include kblazor.js

FlexTable uses a small script for column resizing, font detection, and auto-size. Add it to your host page.

Blazor Server — _Host.cshtml / App.razor
<script src="_content/KBlazor/kblazor.js"></script>
Blazor WebAssembly — wwwroot/index.html
<script src="_framework/blazor.webassembly.js"></script>
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
<script src="_content/KBlazor/kblazor.js"></script>
4

Add namespaces to _Imports.razor

Add these usings so every component in your project can reference KBlazor types without qualification.

_Imports.razor
@using KBlazor.Components
@using KBlazor.Models
@using KBlazor.Services
@using MudBlazor
5

Decorate your model with attributes

KBlazor reads [Display] attributes to build columns and form fields automatically. Additional attributes control editing behaviour, sorting, and rendering. Models implement IKBusinessEntity.

Order.cs
public class Order : IKBusinessEntity
{
    [Key]
    public Guid Id { get; set; }

    [Display(Name = "Order #", Order = 1)]
    [ReadOnlyOnEdit]
    public string Name { get; set; }

    [ForeignKey("Customer")]
    public Guid? CustomerId { get; set; }

    // Entity column — filters by CustomerId, sorts by Customer.Name,
    // edits with an autocomplete backed by IEntityLookupProvider
    [Display(Name = "Customer", Order = 2)]
    [AutoComplete]
    [SortAndFilterOn(FilterPath = "CustomerId", SortPath = "Customer.Name")]
    public virtual Customer? Customer { get; set; }

    [Display(Name = "Amount", Order = 3)]
    public decimal Amount { get; set; }

    [Display(Name = "Notes", Order = 4)]
    [MemoDisplay]
    public string Notes { get; set; }
}
The Fields parameter on FlexTable and BasicEdit matches against [Display(Name = "...")] values. See the Attributes reference for the full list of available attributes.
✓

You're ready

Drop a component into any page and start building. Route the SortFilter callback through ApplyFilter / ApplySort so entity columns filter and sort correctly.

Example.razor
<FlexTable TItem="Order"
           Items="@_orders"
           Fields="Order #,Customer,Amount,Notes"
           SortFilter="OnSortFilter" />

@code {
    private IQueryable<Order> _orders = db.Orders.AsQueryable();

    private void OnSortFilter(ListViewSetting setting)
    {
        _orders = db.Orders.AsQueryable().ApplyFilter(setting).ApplySort(setting);
        StateHasChanged();
    }
}
FlexTable demo BasicEdit demo Attributes reference