This library simplifies the integration of DataTables into Blazor applications, providing access to options, events, etc. A demo project showcasing common usages is included.
Diligence was taken to align the Blazor API with JS. Refer to the DataTables documentation for details. This is a work-in-progress; contribution is welcomed.
Installation
dotnet add package Soenneker.Blazor.DataTables
Add the following to your Startup.cs file
public void ConfigureServices(IServiceCollection services)
{
services.AddDataTablesInteropAsScoped();
}
When using server-side processing, you can override the default DataTables processing indicator with custom Blazor content. This feature allows you to:
Display custom Blazor components as the processing indicator
The DataTables component supports continuation token-based pagination, which is useful for services like Azure Table Storage, Cosmos DB, or other cloud storage solutions that use continuation tokens instead of traditional offset-based pagination.
How Continuation Tokens Work
The component automatically emulates traditional DataTables pagination behavior while using continuation tokens under the hood:
First Request: No continuation token is sent
Server Response: Server returns data along with a continuation token for the next page
Subsequent Requests: The continuation token from the previous response is sent with the next request
Last Page: When there are no more pages, the server returns null for the continuation token
Pagination Display: DataTables shows traditional pagination controls (Previous/Next buttons, page numbers) that work seamlessly with continuation tokens
Basic Usage
<DataTable @ref="_dataTable"
OnServerSideRequest="HandleServerSideRequest"
Options="_tableOptions">
<thead>
<tr>
<th data-data="id">ID</th>
<th data-data="name">Name</th>
<th data-data="email">Email</th>
</tr>
</thead>
<tbody>
</tbody>
</DataTable>
@code {
private DataTable _dataTable = null!;
private readonly DataTableOptions _tableOptions = new()
{
ServerSide = true,
PageLength = 10
};
private async Task<DataTableServerResponse> HandleServerSideRequest(DataTableServerSideRequest request)
{
// The request.ContinuationToken will contain the token from the previous response
// or null for the first request
var result = await YourService.GetDataAsync(
pageSize: request.Length,
continuationToken: request.ContinuationToken,
searchTerm: request.Search?.Value,
orderBy: GetOrderByColumn(request.Order)
);
// Return the response with the continuation token for the next page
// Note: The component automatically calculates appropriate TotalRecords and TotalFilteredRecords
// to make DataTables think it's using traditional pagination
return DataTableServerResponse.Success(
draw: request.Draw,
recordsTotal: result.TotalRecords,
recordsFiltered: result.TotalFilteredRecords,
data: result.Data,
continuationToken: result.NextContinuationToken // null when no more pages
);
}
}
Controlling Continuation Tokens
You can programmatically control continuation tokens using the DataTable component methods:
// Reset pagination to start from the beginning
_dataTable.ResetContinuationToken();
// Set a specific continuation token for the next request
_dataTable.SetContinuationToken("your-custom-token");
Backward Navigation Support
The component automatically stores continuation tokens for visited pages, enabling backward navigation:
Original Token Storage: When you navigate to a page, the component stores the original continuation token used to reach that page
Consistent Backward Navigation: When you click "Previous" or navigate to a previous page, the component uses the same original token for that page
Token Consistency: Navigating back to a page multiple times will always use the same continuation token that was originally used to reach that page
Efficient Navigation: If a direct token isn't available for a requested page, the component finds the closest available token and uses it
Seamless UX: Users can navigate forward and backward through pages just like with traditional pagination
This ensures that your server-side logic receives the same continuation tokens when users navigate back to previously visited pages, maintaining consistency with your data source.
Implementation Notes
Automatic Handling: The component automatically manages continuation tokens between requests
Pagination Emulation: The component automatically calculates appropriate TotalRecords and TotalFilteredRecords values to make DataTables think it's using traditional offset-based pagination
Virtual Page Tracking: The component maintains a virtual page state that maps to continuation tokens, allowing DataTables pagination controls to work seamlessly
Backward Navigation: The component stores continuation tokens for visited pages, enabling backward navigation to previous pages
Token Storage: Continuation tokens are stored for each visited page, allowing efficient navigation in both directions
Fingerprinting: The component uses request fingerprinting to detect when search/filter parameters change and automatically resets the continuation token
Soenneker.Blazor.DataTables