Components

Table

A templated table: you write the header cells and one row template, the table draws every row, the empty state, stripes and hover.

Basic

HeaderTemplate holds the header cells, RowTemplate one row's cells with the item as context, and FooterTemplate an optional totals row.

Recent orders
Order	Customer	Total
#1001	Ada Lovelace	42.50
#1002	Alan Turing	120.00
#1003	Grace Hopper	18.75
Total		181.25

razor

<Table TItem="Order" Items="_orders" Caption="Recent orders">
    <HeaderTemplate>
        <th>Order</th>
        <th>Customer</th>
        <th>Total</th>
    </HeaderTemplate>
    <RowTemplate>
        <td>@context.Number</td>
        <td>@context.Customer</td>
        <td>@context.Total.ToString("0.00")</td>
    </RowTemplate>
    <FooterTemplate>
        <td colspan="2">Total</td>
        <td>@_orders.Sum(o => o.Total).ToString("0.00")</td>
    </FooterTemplate>
</Table>

Empty state

With no items - or a null list - the body says so instead of collapsing to nothing. EmptyText for a sentence, EmptyContent for markup.

Order	Customer
No data to show.

Order	Customer
No orders yet. They show up here as they come in.

razor

<Table TItem="Order" Items="_orders" EmptyText="No orders yet." ... />

<Table TItem="Order" Items="_orders">
    ...
    <EmptyContent><strong>No orders yet.</strong> They show up here as they come in.</EmptyContent>
</Table>

Look

Striped, Bordered and Hover are on by default and can each be turned off. Dense tightens the cells.

Order	Customer	Total
#1001	Ada Lovelace	42.50
#1002	Alan Turing	120.00
#1003	Grace Hopper	18.75

razor

<Table TItem="Order" Items="_orders"
       Striped="false" Bordered="false" Hover="false" Dense="true">
    ...
</Table>

Clickable rows, row classes and a sticky header

OnRowClick makes every row focusable and raises the item on click, Enter or Space. RowClass adds classes worked out from the item. StickyHeader keeps the header in view while the rows scroll inside RootMaxHeight.

Order	Customer	Total
#2001	Customer 1	11.50
#2002	Customer 2	23.00
#2003	Customer 3	34.50
#2004	Customer 4	46.00
#2005	Customer 5	57.50
#2006	Customer 6	69.00
#2007	Customer 7	80.50
#2008	Customer 8	92.00
#2009	Customer 9	103.50
#2010	Customer 10	115.00
#2011	Customer 11	126.50
#2012	Customer 12	138.00
#2013	Customer 13	149.50
#2014	Customer 14	161.00
#2015	Customer 15	172.50
#2016	Customer 16	184.00
#2017	Customer 17	195.50
#2018	Customer 18	207.00
#2019	Customer 19	218.50
#2020	Customer 20	230.00

none

razor

<Table TItem="Order" Items="_orders"
       StickyHeader="true" RootMaxHeight="12rem"
       OnRowClick="o => _picked = o.Number"
       RowClass='o => o.Total > 100 ? "large-order" : null'
       ItemKey="o => o.Number">
    ...
</Table>

Parameters

Parameter	Type	Default	Description
`Items`	`IEnumerable<TItem>?`	`null`	The items, one row each. Null is shown as empty.
`HeaderTemplate`	`RenderFragment?`	`null`	The header row's cells. No header without it.
`RowTemplate`	`RenderFragment<TItem>`	`—`	One row's cells; the item is context.
`FooterTemplate`	`RenderFragment?`	`null`	The footer row's cells. No footer without it.
`EmptyText`	`string`	`"No data to show."`	What the body says with no items.
`EmptyContent`	`RenderFragment?`	`null`	The empty state as markup, instead of EmptyText.
`Caption`	`string?`	`null`	A caption naming the table.
`Striped`	`bool`	`true`	Shade every other row.
`Bordered`	`bool`	`true`	Border every cell; off leaves only the lines between rows.
`Hover`	`bool`	`true`	Highlight the row under the pointer.
`Dense`	`bool`	`false`	Tighter cell padding.
`StickyHeader`	`bool`	`false`	Keep the header in view while rows scroll. Pair with RootMaxHeight.
`OnRowClick`	`EventCallback<TItem>`	`—`	Raised on click, Enter or Space. Makes rows focusable.
`RowClass`	`Func<TItem, string?>?`	`null`	Extra classes for a row, from its item.
`ItemKey`	`Func<TItem, object?>?`	`null`	A unique key per item, so rows keep their DOM when re-ordered.