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 and DataTableColumn.
DataTableColumn components should be nested inside the DataTable 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