Soenneker.Quark.Table 3.0.38

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

<QuarkTable TotalRecords="100" OnInteraction="OnInteraction">
    <QuarkTableSearch Placeholder="Search employees..." />
    
    <QuarkTableElement>
        <QuarkThead>
            <QuarkTr>
                <QuarkTh Sortable="true" Searchable="true">Name</QuarkTh>
                <QuarkTh Sortable="true" Searchable="true">Email</QuarkTh>
                <QuarkTh Sortable="false" Searchable="true">Age</QuarkTh>
            </QuarkTr>
        </QuarkThead>
        
        <QuarkTbody>
            @foreach (var person in people)
            {
                <QuarkTr Key="@person.Id">
                    <QuarkTd>@person.Name</QuarkTd>
                    <QuarkTd>@person.Email</QuarkTd>
                    <QuarkTd>@person.Age</QuarkTd>
                </QuarkTr>
            }
        </QuarkTbody>
    </QuarkTableElement>
    
    <QuarkTablePagination />
</QuarkTable>

Custom Components

QuarkTableNoData

Display a custom "no data" state when there are no records to show:

<QuarkTableNoData>
    <div style="text-align: center; padding: 2rem;">
        <h4>No records found</h4>
        <p>Try adjusting your search criteria.</p>
    </div>
</QuarkTableNoData>

QuarkTableInfo

Display table information independently of pagination:

<QuarkTableInfo />

<QuarkTableInfo>
    <span>Showing @start-@end of @total records</span>

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:

<QuarkTableBottomBar LayoutClass="only-right">
    <QuarkTableRight>
        <QuarkTableInfo />
        <QuarkTablePagination />
    </QuarkTableRight>
</QuarkTableBottomBar>

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:

<QuarkTableTopBar LayoutClass="only-left">
    <QuarkTableLeft>
        <QuarkTableSearch Placeholder="Search..." />
    </QuarkTableLeft>
</QuarkTableTopBar>

Standard Layout

When both left and right sections are present, no layout class is needed:

<QuarkTableBottomBar>
    <QuarkTableLeft>
        <QuarkTableInfo />
    </QuarkTableLeft>
    <QuarkTableRight>
        <QuarkTablePagination />
    </QuarkTableRight>
</QuarkTableBottomBar>

</QuarkTableInfo>

### QuarkTableBottomBar
Layout wrapper that combines info and pagination components with flexible layout options:

```razor

<QuarkTableBottomBar>
    <QuarkTableLeft>
        <QuarkTableInfo />
    </QuarkTableLeft>
    <QuarkTableRight>
        <QuarkTablePagination />
    </QuarkTableRight>
</QuarkTableBottomBar>


<QuarkTableBottomBar ControlsLayout="QuarkTableControlsLayout.InfoRightPaginationLeft">
    <QuarkTableInfo />
    <QuarkTablePagination />
</QuarkTableBottomBar>


<QuarkTableBottomBar>
    <QuarkTableLeft>
        <QuarkTableInfo />
        <QuarkTablePageSizeSelector />
    </QuarkTableLeft>
    <QuarkTableRight>
        <QuarkTablePagination />
    </QuarkTableRight>
</QuarkTableBottomBar>

Server-Side Processing

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

private async Task OnInteraction(DataTableServerSideRequest request)
{
    PagedResult<Employee> pagedResult = await EmployeeService.GetEmployeesPaged(request);
    _currentEmployees = pagedResult.Items;

    if (_quarkTable != null)
    {
        _quarkTable.UpdateContinuationTokenPaging(
            pagedResult.Items.Count,
            pagedResult.ContinuationToken,
            request.ContinuationToken);
    }
}

Key Parameters

QuarkTable

QuarkTh

QuarkTableOptions

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