Skip to content
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Add .gitignore and .gitattributes. Feb 4, 2019

Blazor Virtual Grid

If you like my work on blazor and want to see more open sourced demos please support me with donations.

donate via paypal

Please send email if you consider to hire me.


Component is live here

In this repo there are component itself and consumer blazor app where you can see how component can be used.

Here I will also give some basic usage info.

Component can be downloaded from nuget, also we need four more nuget packages to install:

  1. BlazorSpitter;
  2. BlazorScrollbar;
  3. Mono.WebAssembly.Interop;
  4. System.Linq.Dynamic.Core.

Client app csproj file should have configured linker

    <BlazorLinkerDescriptor Include="Linker.xml" />

and have linker file inside app folder with this content:

<?xml version="1.0" encoding="UTF-8" ?>
  <assembly fullname="mscorlib">
    <type fullname="System.Threading.WasmRuntime" />
  <assembly fullname="System.Core">
    <type fullname="System.Linq*" />
  <assembly fullname="System.Linq.Dynamic.core">
  <assembly fullname="BlazorVirtualGrid" />

Last item - BlazorVirtualGrid should be replaced with your blazor app name. This is necessary because linker can remove libraries which are used by component, for example without System.Linq.Dynamic.Core sorting will not work.

Index.html and Indexbase.cs have example how component can be configured and consumed.

Component can receive any list object in parameter SourceList, table name and configuration settings.

<CompBlazorVirtualGrid ref="Bvg1" SourceList="@list1" TableName="@TableName1" bvgSettings="@bvgSettings1"></CompBlazorVirtualGrid>

For BvgSettings you will provide TItem and all desired configurations.

public BvgSettings<MyItem> bvgSettings1 { get; set; } = new BvgSettings<MyItem>();

You can configure styles and global properties:

  bvgSettings1.NonFrozenCellStyle = new BvgStyle
        BackgroundColor = "#cccccc",
        ForeColor = "#00008B",
        BorderColor = "#000000",
        BorderWidth = 1,

    bvgSettings1.RowHeight = 40;
    bvgSettings1.HeaderHeight = 50;
    bvgSettings1.ColWidthMin = 220;
    bvgSettings1.ColWidthMax = 400;

    bvgSettings1.VerticalScrollStyle = new BvgStyleScroll
        ButtonColor = "#008000",
        ThumbColor = "#FF0000",
        ThumbWayColor = "#90EE90",

Set frozen columns if any:

bvgSettings1.FrozenColumnsListOrdered = new ValuesContainer<string>();

Hide columns:


Set columns order, code will organize columns by provided order, after this by default:

bvgSettings1.NonFrozenColumnsListOrdered = new ValuesContainer<string>();

Set column widths if you like any of them to have individual width:

  bvgSettings1.ColumnWidthsDictionary = new ValuesContainer<Tuple<string, ushort>>();
      .Add(Tuple.Create(nameof(MyItem.C3), (ushort)200))
      .Add(Tuple.Create(nameof(MyItem.Date), (ushort)200));

Please also check this youtube video about BlazorVirtualGrid.

You can always open new issue or make PR, also ask questions at or reach me out in twitter @lupusa1

Thank you for your interest and happy coding with blazor.

You can’t perform that action at this time.