Awesome Open Source
Awesome Open Source


Demo Nuget (with prereleases) Nuget (with prereleases)

Blazor Table Component with Sorting, Paging and Filtering

Sample Gif


  • Add BlazorTable Nuget
    • dotnet add package BlazorTable
  • Add to the index.html or _Hosts.cshtml
    • <script src="_content/BlazorTable/BlazorTable.min.js"></script>
  • Add call to Program.cs or Startup.cs
    • Services.AddBlazorTable();


  • Column Reordering
  • Edit Mode (Template Switching)
  • Client Side
    • Paging
    • Sorting
    • Filtering
      • Strings
      • Numbers
      • Dates
      • Enums
      • Custom Component


  • Bootstrap 4 CSS


Example Page

<Table TableItem="PersonData" Items="data" PageSize="15">
    <Column TableItem="PersonData" Title="Id" Field="@(x =>" Sortable="true" Filterable="true" Width="10%" />
    <Column TableItem="PersonData" Title="First Name" Field="@(x => x.first_name)" Sortable="true" Filterable="true" Width="20%" />
    <Column TableItem="PersonData" Title="Last Name" Field="@(x => x.last_name)" Sortable="true" Filterable="true" Width="20%" />
    <Column TableItem="PersonData" Title="Email" Field="@(x =>" Sortable="true" Filterable="true" Width="20%">
            <a href=""></a>
    <Column TableItem="PersonData" Title="Confirmed" Field="@(x => x.confirmed)" Sortable="true" Filterable="true" Width="10%" />
    <Column TableItem="PersonData" Title="Price" Field="@(x => x.price)" Sortable="true" Filterable="true" Width="10%" Format="C" Align="Align.Right" />
    <Column TableItem="PersonData" Title="Created Date" Field="@(x => x.created_date)" Sortable="true" Width="10%">
    <Pager ShowPageNumber="true" ShowTotalCount="true" />

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
c-sharp (11,268
data (355
grid (206
aspnetcore (169
table (151
nuget (142
blazor (85
aspnet (49
sorting (45
filtering (36
paging (23

Find Open Source By Browsing 7,000 Topics Across 59 Categories