https://github.com/soenneker/soenneker.quark.table
A native Blazor table component.
https://github.com/soenneker/soenneker.quark.table
blazor blazorlibrary csharp data dotnet html quark quarktable table tables
Last synced: 11 months ago
JSON representation
A native Blazor table component.
- Host: GitHub
- URL: https://github.com/soenneker/soenneker.quark.table
- Owner: soenneker
- License: mit
- Created: 2025-07-31T23:10:32.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-07T15:27:21.000Z (11 months ago)
- Last Synced: 2025-08-10T17:47:01.510Z (11 months ago)
- Topics: blazor, blazorlibrary, csharp, data, dotnet, html, quark, quarktable, table, tables
- Language: HTML
- Homepage: https://soenneker.com
- Size: 202 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
[](https://www.nuget.org/packages/soenneker.quark.table/)
[](https://github.com/soenneker/soenneker.quark.table/actions/workflows/publish-package.yml)
[](https://www.nuget.org/packages/soenneker.quark.table/)
[](https://soenneker.github.io/soenneker.quark.table/)
# Soenneker.Quark.Table
A modern, component-driven Blazor table library that provides complete control over table structure and behavior through Razor components.
## Features
- **Component-Driven**: Every part of the table is a separate Razor component
- **Full Control**: Users define table structure using Blazor markup
- **Sortable Headers**: Individual column headers can be made sortable
- **Search Integration**: Built-in search functionality with debouncing
- **Pagination**: Server-side pagination with customizable controls
- **Server-Side Processing**: Full support for server-side data processing
- **Continuation Token Support**: Advanced pagination with continuation tokens
- **Loading States**: Smooth loading behavior with overlay
## Components
### Core Components
- **QuarkTable**: Main container component that manages state and events
- **QuarkTableElement**: Table wrapper component
- **QuarkThead**: Table header container
- **QuarkTh**: Table header cell with optional sorting
- **QuarkTbody**: Table body container
- **QuarkTr**: Table row component
- **QuarkTd**: Table data cell component
### Feature Components
- **QuarkTableSearch**: Standalone search component
- **QuarkTablePagination**: Pagination controls component
- **QuarkTableInfo**: Information display component (shows "x-y of z" format)
- **QuarkTableBottomBar**: Bottom bar layout wrapper for info and pagination components
- **QuarkTableTopBar**: Top bar layout component for header content
- **QuarkTableLeft**: Left-aligned container component for use in topbar/bottombar
- **QuarkTableRight**: Right-aligned container component for use in topbar/bottombar
- **QuarkTableBarControls**: Container for buttons and custom controls
- **QuarkTableNoData**: No data state component with customizable content
- **QuarkTableLoader**: Loading state component
- **QuarkTablePageSizeSelector**: Page size selector component
### Legacy Components
- **QuarkTableControls**: Legacy name for QuarkTableBottomBar (still supported)
## Basic Usage
```razor
Name
Email
Age
@foreach (var person in people)
{
@person.Name
@person.Email
@person.Age
}
```
## Custom Components
### QuarkTableNoData
Display a custom "no data" state when there are no records to show:
```razor
No records found
Try adjusting your search criteria.
```
### QuarkTableInfo
Display table information independently of pagination:
```razor
Showing @start-@end of @total records
```
### Bar Layout Positioning
The `QuarkTableBottomBar` and `QuarkTableTopBar` components support layout classes to control positioning when only one section is present:
#### Bottom Bar - Right Only
When only `QuarkTableRight` is specified in the bottom bar, use the `only-right` layout class to position it to the right:
```razor
```
#### Top Bar - Left Only
When only `QuarkTableLeft` is specified in the top bar, use the `only-left` layout class to anchor it to the right:
```razor
```
#### Standard Layout
When both left and right sections are present, no layout class is needed:
```razor
```
```
### QuarkTableBottomBar
Layout wrapper that combines info and pagination components with flexible layout options:
```razor
```
## Server-Side Processing
```csharp
private async Task OnInteraction(DataTableServerSideRequest request)
{
var query = dbContext.Employees.AsQueryable();
// Apply search
if (!string.IsNullOrEmpty(request.Search?.Value))
{
var searchTerm = request.Search.Value.ToLower();
query = query.Where(e =>
e.Name.ToLower().Contains(searchTerm) ||
e.Email.ToLower().Contains(searchTerm));
}
// Apply sorting
if (request.Order?.Any() == true)
{
foreach (var order in request.Order)
{
query = order.Column switch
{
0 => order.Dir == "asc" ? query.OrderBy(e => e.Name) : query.OrderByDescending(e => e.Name),
1 => order.Dir == "asc" ? query.OrderBy(e => e.Email) : query.OrderByDescending(e => e.Email),
_ => query
};
}
}
var totalRecords = await query.CountAsync();
var pagedData = await query.Skip(request.Start).Take(request.Length).ToListAsync();
currentData = pagedData;
totalRecords = totalRecords;
StateHasChanged();
}
```
## Continuation Token Support
```csharp
private async Task OnInteraction(DataTableServerSideRequest request)
{
PagedResult pagedResult = await EmployeeService.GetEmployeesPaged(request);
_currentEmployees = pagedResult.Items;
if (_quarkTable != null)
{
_quarkTable.UpdateContinuationTokenPaging(
pagedResult.Items.Count,
pagedResult.ContinuationToken,
request.ContinuationToken);
}
}
```
## Key Parameters
### QuarkTable
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `TotalRecords` | `int` | `0` | Total number of records for pagination |
| `Visible` | `bool` | `true` | Whether the table is visible |
| `OnManualRequest` | `EventCallback` | - | Server-side data processing callback |
| `OnOrder` | `EventCallback` | - | Called when column sorting changes |
| `Options` | `QuarkTableOptions` | `new()` | Table configuration options |
### QuarkTh
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `Sortable` | `bool` | `true` | Enable sorting for this column |
| `Searchable` | `bool` | `true` | Enable search for this column |
### QuarkTableOptions
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `DefaultPageSize` | `int` | `10` | Default page size |
| `SearchDebounceMs` | `int` | `300` | Search debounce delay in milliseconds |
| `SearchPosition` | `SearchPosition` | `End` | Position of the search box |
| `Debug` | `bool` | `false` | Enable debug logging |
## Events
- `OnInitialize`: Called when the table is initialized
- `OnManualRequest`: Called when data needs to be loaded
- `OnOrder`: Called when column sorting changes
- `OnPageSizeChanged`: Called when page size changes
- `OnGoToPage`: Called when navigating to a specific page