data-display datatable

Data Table

Sortable, filterable, paginated table — the flagship.

$ ndui add datatable

Sort · search · paginate · everything client-side



No results found

Showing to of results

Per page:

Source — view + PageModel

@* In your view: *@
<noundry-data-table items="Model.PageItems" per-page="8" show-search="true" striped="true">
    <noundry-data-table-column key="Sku"   label="SKU"   sortable="true" />
    <noundry-data-table-column key="Name"  label="Name"  sortable="true" />
    <noundry-data-table-column key="Price" label="Price" type="currency" sortable="true" align="right" />
    <noundry-data-table-column key="Stock" label="Stock" sortable="true" align="right" />
</noundry-data-table>

@* In the PageModel: *@
public IReadOnlyList<Product> PageItems { get; private set; } = [];
public async Task OnGetAsync(CancellationToken ct)
    => PageItems = (await _products.ListAsync(null, "name", "asc", 1, 1000, ct)).Items;