N
data-display data-grid

Data Grid

Modern API-driven grid — server-side sort/search/paginate.

$ ndui add data-grid
Component docs

API-driven grid (server-side sort + search + paginate)

Live against /api/products — 120 seeded rows.
Source — view + endpoint 
@* In your view *@
<noundry-data-grid api-url="/api/products"
                   page-size="10"
                   default-sort-column="name"
                   striped="true" hoverable="true">
    <noundry-data-grid-col key="sku"      label="SKU"      sortable="true" />
    <noundry-data-grid-col key="name"     label="Name"     sortable="true" />
    <noundry-data-grid-col key="category" label="Category" sortable="true" />
    <noundry-data-grid-col key="price"    label="Price"    sortable="true" type="currency" align="right" />
    <noundry-data-grid-col key="stock"    label="Stock"    sortable="true" align="right" />
</noundry-data-grid>

// Endpoint — the grid sends ?page=&pageSize=&sortColumn=&sortDirection=&search=
app.MapGet("/api/products", (HttpContext ctx) => {
    var page  = int.Parse(ctx.Request.Query["page"]);
    var size  = int.Parse(ctx.Request.Query["pageSize"]);
    var sort  = ctx.Request.Query["sortColumn"].ToString();
    var dir   = ctx.Request.Query["sortDirection"].ToString();
    var query = ctx.Request.Query["search"].ToString();
    // …apply to your IQueryable, then…
    return Results.Ok(new { data = pageRows, total = filteredCount });
});