DataTables.Blazor
3.6.2
dotnet add package DataTables.Blazor --version 3.6.2
NuGet\Install-Package DataTables.Blazor -Version 3.6.2
<PackageReference Include="DataTables.Blazor" Version="3.6.2" />
paket add DataTables.Blazor --version 3.6.2
#r "nuget: DataTables.Blazor, 3.6.2"
// Install DataTables.Blazor as a Cake Addin #addin nuget:?package=DataTables.Blazor&version=3.6.2 // Install DataTables.Blazor as a Cake Tool #tool nuget:?package=DataTables.Blazor&version=3.6.2
DataTables.Blazor
A basic port for jquery DataTables into Blazor.
About:
This was written purely for fun, if you'd like to use it you're welcome to do so, it's under an MIT License.
If you've found it useful, and want to say thanks, feel free to buy me a coffee, otherwise enjoy.
Disclaimer.
- This project is still pretty immature, and needs a lot of work and is liable to be buggy.
- Its functionality may not yet fully replicate all the options available in DataTables.
- However, DataTables comes with a lot of great features out of the box which can be easily utilised straight away.
Setup:
Prerequisites:
You will need to include jquery Datatables in your project, some of the options are not available to older versions so to be on the safe side, v1.10.24 would be best. Steps to complete can be found here.
Configuration:
Below are the steps required to configure the package in a client-side Blazor WebAssembly app.
- Install the
DataTables.Blazor
package using your preferred method. - Add the following using statement to the top of your
Program.cs
:
using DataTables.Blazor.Extensions;
- Then add the following line to add the necessary services to your
Program.cs
.
builder.Services.AddDataTables();
- Add the following line to your
index.html
, below where you include DataTables.
<script src="_content/DataTables.Blazor/datatables.blazor.min.js"></script>
- Finally, add the following statement to your
_Imports.razor
@using DataTables.Blazor
You should now be ready to get started with DataTables.Blazor!
Usage:
- At the moment there are two basic components,
DataTable
andDataTableColumn
. DataTableColumn
components should be nested inside theDataTable
component.- This is then transformed into a jquery DataTable configured with the DataTable defaults. As is shown in the demo, adding a datatable is then as easy as adding the below to your page/component.
<DataTable SourceUrl="sample-data/weather.json" Class="table table-striped table-bordered w-100">
<DataTableColumn Title="Date" Data="Date" />
<DataTableColumn Title="Temp. (C)" Data="TemperatureC" />
<DataTableColumn Title="Summary" ClassName="dt-body-center" Data="Summary" />
</DataTable>
- There is also an
Options
parameter on the DataTable which can expose more advanced configuration options.
Code
DataTables.Blazor
A Razor class library that brings the functionality of jquery Datatables into Blazor.
DataTables.Blazor.Demo
A client-side Blazor WebAssembly application to demo the package.
DataTables.Blazor.Tests
Xunit/Bunit tests for the DataTables.Blazor project.
Release Notes:
3.6.0
- Adds .NET 8 support.
3.2.0
- Add reload and reinitialize methods as well as
AutoReload
for theDataTable
component.
3.1.0
- Add support for datatables
Button
extension.
3.0.0
- Rename
Column
component toDataTableColumn
to reduce risk of naming clash.
2.1.0
- Added
Data
attribute toDataTable
andDataset<T>
to allow specifying a C# object as a data source.
2.0.0
- Update packages for .NET 5 and add .NET 6 target.
1.0.0
- Add
JavaScriptFunction
to allow JS callbacks to be set where available in jQuery datatables.
0.x.x
- Early implementations with little functionality.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 was computed. net5.0-windows was computed. 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 is compatible. 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 is compatible. 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. net9.0 was computed. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. |
.NET Core | netcoreapp3.0 was computed. netcoreapp3.1 was computed. |
.NET Standard | netstandard2.1 is compatible. |
MonoAndroid | monoandroid was computed. |
MonoMac | monomac was computed. |
MonoTouch | monotouch was computed. |
Tizen | tizen60 was computed. |
Xamarin.iOS | xamarinios was computed. |
Xamarin.Mac | xamarinmac was computed. |
Xamarin.TVOS | xamarintvos was computed. |
Xamarin.WatchOS | xamarinwatchos was computed. |
-
.NETStandard 2.1
- Microsoft.AspNetCore.Components (>= 3.1.6)
- Microsoft.AspNetCore.Components.Web (>= 3.1.6)
-
net6.0
- Microsoft.AspNetCore.Components (>= 6.0.26)
- Microsoft.AspNetCore.Components.Web (>= 6.0.26)
-
net7.0
- Microsoft.AspNetCore.Components (>= 7.0.15)
- Microsoft.AspNetCore.Components.Web (>= 7.0.15)
-
net8.0
- Microsoft.AspNetCore.Components (>= 8.0.10)
- Microsoft.AspNetCore.Components.Web (>= 8.0.10)
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 |
---|---|---|
3.6.2 | 1,135 | 10/31/2024 |
3.6.1 | 3,879 | 1/10/2024 |
3.5.0 | 2,937 | 5/7/2023 |
3.4.0 | 3,579 | 12/30/2022 |
3.3.0 | 2,166 | 8/8/2022 |
3.2.0 | 500 | 7/14/2022 |
3.1.0 | 835 | 6/18/2022 |
3.0.0 | 1,858 | 1/22/2022 |
2.1.0 | 472 | 1/19/2022 |
2.0.0 | 316 | 12/29/2021 |
1.0.0 | 781 | 5/9/2021 |
0.1.3 | 409 | 4/25/2021 |
0.1.2 | 333 | 4/25/2021 |
0.1.1 | 694 | 7/17/2020 |
0.1.0 | 428 | 7/17/2020 |
Basic support for JavaScript function callbacks.