PSC.Blazor.Components.DataTable 6.0.13

.NET 6.0

dotnet add package PSC.Blazor.Components.DataTable --version 6.0.13

NuGet\Install-Package PSC.Blazor.Components.DataTable -Version 6.0.13

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="6.0.13" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

paket add PSC.Blazor.Components.DataTable --version 6.0.13

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: PSC.Blazor.Components.DataTable, 6.0.13"

#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=6.0.13

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

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

DataTable for Blazor

DataTable component for Blazor WebAssembly and Blazor Server with support for client/server-side paging, filtering and sorting. For more info and examples, please visit my blog PureSourceCode.com at this page.

Try DataTable online!

DataTable in action

DataTable-InAction

Anatomy of DataTable

DataTable basis

IsLoading="true"

Header details

IncludeAdvancedFilters="true"

Advanced filters

Installation

Install the NuGet package:

> dotnet add package PSC.Blazor.Components.DataTable

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

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

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

Reference js interop file:

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

link for the CSS code in the head

<link href="/_content/PSC.Blazor.Components.DataTable/css/DataTable.css" rel="stylesheet" />

script after <script src="_framework/blazor.webassembly.js"></script>

<script src="/_content/PSC.Blazor.Components.DataTable/js/DataTable.js"></script>

If you want to use the filters, the popper script is required

<script src="/_content/PSC.Blazor.Components.DataTable/js/popper.DataTable.js"></script>
<script src="/_content/PSC.Blazor.Components.DataTable/js/bootstrap.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
UsePageSizeSelector	bool	true	Boolean indicating hether to show the page size dropdown list (10, 25, 50 records)
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)
PageSizeList	List<int>	{ 10, 25, 50 }	The list of number of record per page you want to display in the PageSizeSelector
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;" />
        }
        else
        {
            <i class="far fa-times-circle" style="color: red;" />
        }
            </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 = 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>

<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>

Other Blazor components

Component name	Forum	Description
DataTable for Blazor	Forum	DataTable component for Blazor WebAssembly and Blazor Server
Markdown editor for Blazor	Forum	This is a Markdown Editor for use in Blazor. It contains a live preview as well as an embeded help guide for users.
Modal dialog for Blazor	Forum	Simple Modal Dialog for Blazor WebAssembly
PSC.Extensions	Forum	A lot of functions for .NET5 in a NuGet package that you can download for free. We collected in this package functions for everyday work to help you with claim, strings, enums, date and time, expressions...
Quill for Blazor	Forum	Quill Component is a custom reusable control that allows us to easily consume Quill and place multiple instances of it on a single page in our Blazor application
Segment for Blazor	Forum	This is a Segment component for Blazor Web Assembly and Blazor Server
Tabs for Blazor	Forum	This is a Tabs component for Blazor Web Assembly and Blazor Server

Product	Compatible and additional computed target framework versions.
.NET	net6.0 is compatible. 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.

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	803	11/13/2023
6.0.12	153	10/23/2023
6.0.11	129	10/23/2023
6.0.10	148	10/23/2023
6.0.9	3,715	11/22/2021
6.0.6	393	11/19/2021
6.0.4	337	11/17/2021
6.0.2	324	11/16/2021
6.0.1	338	11/16/2021
1.0.24	450	11/16/2021
1.0.18	318	11/16/2021
1.0.17	326	11/15/2021
1.0.16	327	11/15/2021
1.0.15	344	11/15/2021
1.0.14	393	11/14/2021
1.0.13	337	11/13/2021
1.0.12	349	11/13/2021
1.0.10	355	11/13/2021
1.0.9	378	11/13/2021
1.0.8	340	11/12/2021
1.0.7	357	11/12/2021
1.0.6	394	11/12/2021
1.0.5	348	11/12/2021
1.0.4	364	11/11/2021
1.0.3	331	11/11/2021
1.0.2	355	11/11/2021

Add PageSizeList to customize the dropdown for page size selector - Fix CSS for macOS