PSC.Blazor.Components.DataTable 1.0.3

.NET 5.0 This package targets .NET 5.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 PSC.Blazor.Components.DataTable --version 1.0.3                

                    
                

            
NuGet\Install-Package PSC.Blazor.Components.DataTable -Version 1.0.3
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="PSC.Blazor.Components.DataTable" Version="1.0.3" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add PSC.Blazor.Components.DataTable --version 1.0.3                

                    
                

            
#r "nuget: PSC.Blazor.Components.DataTable, 1.0.3"
#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. 
// Install PSC.Blazor.Components.DataTable as a Cake Addin
#addin nuget:?package=PSC.Blazor.Components.DataTable&version=1.0.3

// Install PSC.Blazor.Components.DataTable as a Cake Tool
#tool nuget:?package=PSC.Blazor.Components.DataTable&version=1.0.3

DataTable for Blazor

Blazor DataTable component with support for client/server side paging, filtering and sorting, build on top of Bootstrap.

Installation

  1. Install the NuGet package:

    > dotnet add package PSC.Blazor.Components.DataTable

OR

PM> Install-Package PSC.Blazor.Components.DataTable

    Use the --version option to specify a specific version to install.

  2. Import the components:

    Add in your _Imports.razor file the following using:

    @using PSC.Blazor.Components.DataTable
@using PSC.Blazor.Components.DataTable.Models
@using PSC.Blazor.Components.DataTable.EventsArgs

  3. Reference js interop file:

    Add to your _Host.cshtml or your index.html the following:

    1. link for the CSS code in the head
    <link href="/_content/PSC.Blazor.Components.DataTable/css/DataTable.css" rel="stylesheet" />
    1. script after <script src="_framework/blazor.webassembly.js"></script>
    <script src="/_content/PSC.Blazor.Components.DataTable/js/DataTable.js"></script>

The component requires same external libraries to work properly:

  • jQuery
  • Bootstrap
  • Font Awasome

Usage

DataTable properties

Name Type Default Description
Items IList List The list of items to display
UsePaging bool false Boolean indicating whether to use paging or not
PageNumber int 1 The number of the current page (only applicable when property UsePaging is true)
PageSize int 10 The amount of items shown on a page (only applicable when property UsePaging is true)
PageCount int 1 The total amount of pages (only applicable when property UsePaging is true)
FetchData Func<RequestArgs, Task>? null The method used for fetching and manipulating data (paging, filtering, sorting) on the server. When this method is null, all these actions will be performed on the initial dataset on the client.
ShowHeaderFilters bool true Indicates whether or not to show the header/grid filters
AllowRowSelection bool false Indicates whether or not it's possible to select a row
RowClickedEvent EventCallback null The callback for when a row is clicked (only applicable when property AllowRowSelection is true)
SelectedItem TModel null The selected item
SelectedItemCssClass string bg-info The css class for the selected row
EmptyGridText string "No records to show" The text to show when the Items list is empty
IsLoading bool false Indicates whether or not data is being fetched, used to show a spinner
Id string "" The html identifier of the table tag
ContainerCssClass string "table-responsive" The css class for the container/parent tag of the table
CssClass string "table" The css class for the table tag
ApplyButtonCssClass string "" The css class for the "apply" buttons on grid/header filters
InputCssClass string "" The css class for the input tags in the grid/header filters
Styles TableStyle [Enum FLAGS] null The style flags used for the table
TableAttributes Dictionary<string, object>? null Any custom attributes for the table tag (see Blazor docs for more info)
RowAttributes Dictionary<string, object>? null Any custom attributes for the rows (see Blazor docs for more info)
ContainerHeight int 300 The height of the table container in pixels
ContainerHeightUnit CssUnit CssUnit.Px The unit of the container height
IncludeAdvancedFilters bool true Indicates whether to allow advanced filtering or not
IncludeHeaderFilters bool false Indicates whether or not to include grid/header filters
IncludeSearchButton bool false Indicates whether or not to include a search icon. When clicked filters, sorting and paging is performed on the server is FetchData has a value otherwise it happens on the client
IncludeToggleFilters bool false Indicates whether or not to include a toggle icon. When clicked header/grid filters will re or disappear (only applicable when property
SearchOnApplyHeaderFilter bool true Indicates whether or not a search is instantly triggered when a header/grid filter is applied
AutoAddFilterWhenClickedAndNoneActive bool true Indicates whether or not to add an empty filter rule when a filterable column is clicked an no other filter rules exist.
ItemHeight int? null The pixel height of a an item (tr) in the grid. Customize this to get better virtualization.

DataTableColumn properties

Name Type Default Description
Property Expression<Func<TModel, object>>? null The selector of a field/property of TModel to use for the column
IsSortable bool false Indicates whether or not sorting is enabled for this column
IsFilterable bool false Indicates whether or not filtering is enabled for this column
IsResizable bool false Indicates whether the column is resizable
IsVisible bool true Indicates whether the column should be rendered
CustomTitle string null The name of the column header (by default the name of the property is used)
HeaderTemplate RenderFragment<string> null The template to use for the grid header, the string is the name of the column
Id string "" The html identifier of the table tag
ContainerCssClass string "table-responsive" The css class for the container/parent tag of the table
CssClass string "table" The css class for the table tag
IsDefaultSortColumn bool false Indicates whether or not this column is sorted on by default
DefaultSortDirection SortDirection [Enum] SortDirection.Ascending The sort direction of the default sorting column
TextAlignment TextAlignment [Enum] TextAlignment.Left The text alignment for the column
VerticalAlignment VerticalAlignment [Enum] VerticalAlignment.Bottom The vertical alignment for the column
Styles TableStyle [Enum FLAGS] null The style flags used for the table
Attributes Dictionary<string, object>? null Any custom attributes for the table tag (see Blazor docs for more info)
HeaderFilterAttributes Dictionary<string, object>? null Any custom attributes for the header inputs
ContainerHeight int 300 The height of the table container in pixels
MinWidthHeader int 10 The height of the table container in the set units (default vw)
MinWidthHeaderUnit CssUnit CssUnit.Vw The unit of the minWidthHeader property
IncludeHeaderFilter bool false Indicates whether or not to add header/grid filters
IncludeSearchButton bool false Indicates whether or not to include a search icon. When clicked filters, sorting and paging is performed on the server is FetchData has a value otherwise it happens on the client
IncludeToggleFilters bool false Indicates whether or not to include a toggle icon. When clicked header/grid filters will re or disappear (only applicable when property
SearchOnApplyHeaderFilter bool false Indicates whether or not a search is instantly triggered when a header/grid filter is applied
AutoAddFilterWhenClickedAndNoneActive bool true Indicates whether or not to add an empty filter rule when a filterable column is clicked an no other filter rules exist.
RowTemplate RenderFragment? null The custom render fragment to use for the column
RowAttributes Dictionary<string, object>? null Any custom attributes for the rows (see Blazor docs for more info)
ContainerHeight int 300 The height of the table container in pixels
MaxWidth int 100 The max width in pixels of a column
MaxWidthUnit CssUnit CssUnit.Px The unit of the MaxWidth property
DateTimeFormat DateTimeFormat DateTimeFormat.Date The DateTimeFormat to use in header/grid filters
IsHeaderVisible bool true Indicates whether the column is visible or not
IncludeAdvancedFilters bool false Indicates whether to allow advanced filtering or not
IncludeSearchButton bool false Indicates whether or not to include a search icon. When clicked filters, sorting and paging is performed on the server is FetchData has a value otherwise it happens on the client
IncludeToggleFilters bool false Indicates whether or not to include a toggle icon. When clicked header/grid filters will re or disappear (only applicable when property
SearchOnApplyHeaderFilter bool false Indicates whether or not a search is instantly triggered when a header/grid filter is applied
AutoAddFilterWhenClickedAndNoneActive bool true Indicates whether or not to add an empty filter rule when a filterable column is clicked an no other filter rules exist.

Basic table

<DataTable TModel="WeatherForecast" Items="forecasts">
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.Date" />
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.TemperatureC" CustomTitle="Celsius"/>
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit"/>
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.MyNullableInt"/>
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.Summary"/>
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.Country"/>
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.UpdatedRecently" CustomTitle="Recently updated"/>
</DataTable>

Custom template

<DataTable TModel="WeatherForecast" Items="forecasts">
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.Date" />
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.TemperatureC" CustomTitle="Celsius" />
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit" />
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.MyNullableInt" />
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.Summary" />
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.Country" />
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.UpdatedRecently" CustomTitle="Recently updated">
        <Template Context="forecast">
            @if (forecast.UpdatedRecently)
            {
                <i class="fas fa-check-circle" style="color: green;"></i>
            }
            else
            {
                <i class="far fa-times-circle" style="color: red;"></i>
            }
        </Template>
    </DataTableColumn>
</DataTable>

Sorting

<DataTable TModel="WeatherForecast" Items="forecasts">
    <DataTableColumn TModel="WeatherForecast" IsSortable="true" Property="(e) => e.Date"/>
    <DataTableColumn TModel="WeatherForecast" IsSortable="true" Property="(e) => e.TemperatureC" CustomTitle="Celsius"/>
    <DataTableColumn TModel="WeatherForecast" IsSortable="true" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit"/>
    <DataTableColumn TModel="WeatherForecast" IsSortable="true" Property="(e) => e.MyNullableInt"/>
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.Summary"/>
    <DataTableColumn TModel="WeatherForecast" IsSortable="true" Property="(e) => e.Country"/>
    <DataTableColumn TModel="WeatherForecast" IsSortable="true" Property="(e) => e.UpdatedRecently" CustomTitle="Recently updated"/>
</DataTable>

Pagination

<DataTable TModel="WeatherForecast" Items="forecasts" UsePaging="true">
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.Date"/>
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.TemperatureC" CustomTitle="Celsius"   />
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit" />
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.MyNullableInt"/>
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.Summary"/>
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.Country"/>
    <DataTableColumn TModel="WeatherForecast" Property="(e) => e.UpdatedRecently" CustomTitle="Recently updated"/>
</DataTable>

Filtering

<DataTable TModel="WeatherForecast" Items="forecasts">
    <DataTableColumn TModel="WeatherForecast" IsFilterable="true" Property="(e) => e.Date"/>
    <DataTableColumn TModel="WeatherForecast" IsFilterable="true" Property="(e) => e.TemperatureC" CustomTitle="Celsius"   />
    <DataTableColumn TModel="WeatherForecast" IsFilterable="true" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit"/>
    <DataTableColumn TModel="WeatherForecast" IsFilterable="true" Property="(e) => e.MyNullableInt"/>
    <DataTableColumn TModel="WeatherForecast" IsFilterable="true" Property="(e) => e.Summary"/>
    <DataTableColumn TModel="WeatherForecast" IsFilterable="true" Property="(e) => e.Country"/>
    <DataTableColumn TModel="WeatherForecast" IsFilterable="true" Property="(e) => e.UpdatedRecently" CustomTitle="Recently updated"/>
    </DataTable>

Header/Grid filters

<DataTable TModel="WeatherForecast" Items="forecasts" SearchOnApplyHeaderFilter="true">
    <DataTableColumn TModel="WeatherForecast" IsFilterable="true" IncludeHeaderFilter="true" Property="(e) => e.Date"/>
    <DataTableColumn TModel="WeatherForecast" IsFilterable="true" IncludeHeaderFilter="true" Property="(e) => e.TemperatureC" CustomTitle="Celsius"   />
    <DataTableColumn TModel="WeatherForecast" IsFilterable="true" IncludeHeaderFilter="true" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit"/>
    <DataTableColumn TModel="WeatherForecast" IsFilterable="true" IncludeHeaderFilter="true" Property="(e) => e.MyNullableInt"/>
    <DataTableColumn TModel="WeatherForecast" IsFilterable="true" IncludeHeaderFilter="true" Property="(e) => e.Summary"/>
    <DataTableColumn TModel="WeatherForecast" IsFilterable="true" IncludeHeaderFilter="true" Property="(e) => e.Country"/>
    <DataTableColumn TModel="WeatherForecast" IsFilterable="true" IncludeHeaderFilter="true" Property="(e) => e.UpdatedRecently" CustomTitle="Recently updated"/>
    </DataTable>

Server side support

<DataTable TModel="WeatherForecast" Items="pagedForecasts.Data" UsePaging="true" FetchData="DoFetchData" PageCount="@pagedForecasts.Paging.PageCount" PageSize="@pagedForecasts.Paging.PageSize">
    <DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.Date"/>
    <DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.TemperatureC" CustomTitle="Celsius"   />
    <DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit"/>
    <DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.MyNullableInt"/>
    <DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.Summary"/>
    <DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.Country"/>
    <DataTableColumn TModel="WeatherForecast" IsSortable="true" IsFilterable="true" Property="(e) => e.UpdatedRecently" CustomTitle="Recently updated"/>
</DataTable>

// Method will be called by the DataTable when necessary
private async Task DoFetchData(RequestArgs<WeatherForecast> args)
{
    pagedForecasts = await ForecastService.SearchForecastAsync(args);
    // Don't forget to call StateHasChanged() since your component is the owner of the DataTable
    StateHasChanged();
}

// ForecastService:
public async Task SearchForecastAsync(RequestArgs<WeatherForecast> args)
{
    IQueryable<WeatherForecast> result = context.Forecasts.AsQueryable();

    // RequestArgs contains all the information about sorting, paging and filtering
    foreach (var filter in args.AppliedFilters)
    {
        // Filters can easily be translated into expressions, 
        // or use the filtering info to create your own filtering solution
        result = result.Where(filter.GenerateExpression());
    }
    
    // Use the Core.Utils to easily apply paging and sorting
    // Or use the paging info in RequestArgs to build your own paging solution
    pagedResult = Sve.Blazor.Core.Utils.ApplyPaging(result, pager);

    return Task.FromResult(pagedResult);
}

Support bootstrap table styles

<DataTable TModel="WeatherForecast" Items="forecasts" Styles="TableStyle.Sm">
....
</DataTable>

<DataTable TModel="WeatherForecast" Items="forecasts" Styles="TableStyle.Bordered">
....
</DataTable>

Bordered table example

<br /> <br />

<DataTable TModel="WeatherForecast" Items="forecasts" Styles="TableStyle.Borderless">
....
</DataTable>

<DataTable TModel="WeatherForecast" Items="forecasts" Styles="TableStyle.Dark">
....
</DataTable>

<DataTable TModel="WeatherForecast" Items="forecasts" Styles="TableStyle.Hover">
....
</DataTable>

<DataTable TModel="WeatherForecast" Items="forecasts" Styles="TableStyle.Striped">
....
</DataTable>

Alignment

<DataTable TModel="WeatherForecast" Items="forecasts">
    <DataTableColumn TModel="WeatherForecast" TextAlignment="Core.Models.TextAlignment.Center" IsSortable="true" Property="(e) => e.Date"/>
    <DataTableColumn TModel="WeatherForecast" TextAlignment="Core.Models.TextAlignment.End" IsSortable="true" Property="(e) => e.TemperatureC" CustomTitle="Celsius"   />
    <DataTableColumn TModel="WeatherForecast" TextAlignment="Core.Models.TextAlignment.Left" IsSortable="true" Property="(e) => e.TemperatureF" CustomTitle="Fahrenheit"/>
    <DataTableColumn TModel="WeatherForecast" TextAlignment="Core.Models.TextAlignment.Right" IsSortable="true" Property="(e) => e.MyNullableInt"/>
    <DataTableColumn TModel="WeatherForecast" TextAlignment="Core.Models.TextAlignment.Start" IsSortable="true" Property="(e) => e.Summary"/>
</DataTable>
Product Compatible and additional computed target framework versions.
.NET net5.0 is compatible.  net5.0-windows was computed.  net6.0 was computed.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.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
6.0.13 814 11/13/2023
6.0.12 155 10/23/2023
6.0.11 131 10/23/2023
6.0.10 150 10/23/2023
6.0.9 3,722 11/22/2021
6.0.6 395 11/19/2021
6.0.4 339 11/17/2021
6.0.2 326 11/16/2021
6.0.1 340 11/16/2021
1.0.24 452 11/16/2021
1.0.18 320 11/16/2021
1.0.17 328 11/15/2021
1.0.16 329 11/15/2021
1.0.15 346 11/15/2021
1.0.14 395 11/14/2021
1.0.13 339 11/13/2021
1.0.12 351 11/13/2021
1.0.10 357 11/13/2021
1.0.9 380 11/13/2021
1.0.8 342 11/12/2021
1.0.7 359 11/12/2021
1.0.6 396 11/12/2021
1.0.5 350 11/12/2021
1.0.4 366 11/11/2021
1.0.3 333 11/11/2021
1.0.2 358 11/11/2021