Data Table

<rhx-data-table id="products" rhx-striped="true"
                rhx-hoverable="true" rhx-caption="Product inventory">
    <rhx-column rhx-field="name" rhx-header="Name" />
    <rhx-column rhx-field="category" rhx-header="Category" />
    <rhx-column rhx-field="price" rhx-header="Price" />
    <rhx-column rhx-field="stock" rhx-header="Stock" />
    @foreach (var p in Model.Items)
    {
        <tr><td>@p.Name</td><td>@p.Category</td>
            <td>@p.Price.ToString("C")</td><td>@p.Stock</td></tr>
    }
</rhx-data-table>

<!-- Bordered + Compact -->
<rhx-data-table rhx-bordered="true" rhx-compact="true" ...>
    ...
</rhx-data-table>

<rhx-data-table id="pag-table" rhx-striped="true">
    <rhx-column rhx-field="name" rhx-header="Name" />
    <rhx-column rhx-field="category" rhx-header="Category" />
    <!-- rows... -->
    <rhx-data-table-pagination rhx-page="1" rhx-page-size="5"
        rhx-total-items="12" />
</rhx-data-table>

<!-- The table is in a partial view: _DataTablePartial.cshtml -->
<div id="htmx-table-container">
    @await Html.PartialAsync("_DataTablePartial", state)
</div>

<!-- Partial re-renders the full table on each request -->
<!-- Sort buttons and pagination target #htmx-table-container -->
<!-- Server handler uses DataTableRequest model binder: -->
public IActionResult OnGetTableData(DataTableRequest request)
{
    // sort, filter, paginate...
    return Partial("_DataTablePartial", state);
}