Table

Sort, filter, page and select, with state in the URL.

IzzyBlazor.Table<TItem> in the IzzyBlazor.Core package, generated from the 0.1.0-alpha.17 assembly and its doc comments.

Properties (30)

ItemsIEnumerable<TItem>?

The items. A list is sorted and paged in memory; an IQueryable (such as an EF Core query) is sorted and paged by the database.

ItemsProviderFunc<TableRequest<TItem>, ValueTask<TableResult<TItem>>>?

Loads one page of items yourself, in place of Items. Use Apply on your query.

ChildContentRenderFragment?

The columns: PropertyColumn<T1, T2> and TemplateColumn<T>.

@bind-PageSizeint? @bind: Interactive only

Items per page. Leave it out to show every item.

PageSizeOptionsIReadOnlyList<int>?

Sizes to choose from in a "Rows per page" menu in the footer, such as new[] { 10, 25, 50 }. The URL carries the choice (?size=25); only these sizes are accepted from it. PageSize is the default (the first option when not set).

InitialSortstring?

The sort when the URL has none, such as "name" or "-date" (descending).

@bind-Sortstring? @bind: Interactive only

The sort, such as "name" or "-date" (descending); null for InitialSort. Binding it (@bind-Sort) on an interactive page keeps sort and page in the component instead of the URL.

@bind-Pageint? @bind: Interactive only

The page, from 1. Binding it (@bind-Page) on an interactive page keeps sort and page in the component instead of the URL. Set it back to 1 when your filters change.

FilterPlacementFilterPlacement = FilterPlacement.Header

Where the column filters go: a filter button in each header that opens the filter (FilterPlacement.Header, the default, with the active filters as removable tags above the table), or a row of fields under the headers (FilterPlacement.Row).

@bind-FiltersIReadOnlyDictionary<string, string>? @bind: Interactive only

The filter values of Filterable columns, by column key ("customer" → "ada"). Binding it (@bind-Filters) on an interactive page keeps filters, sort and page in the component instead of the URL.

QueryPrefixstring = ""

Prefix for this table's query-string keys, so several tables can share a page: QueryPrefix="orders-" uses ?orders-sort= and ?orders-page=.

Captionstring?

The table's name for screen readers (a visually hidden caption).

EmptyContentRenderFragment? (computed)

Shown when there are no items. Defaults to EmptyText.

EmptyTextstring? = "No items"

The text when there are no items. Defaults to "No items".

RowClassFunc<TItem, string?>?

A class for each row, such as one that highlights overdue orders.

Stripedbool = false

Alternating row backgrounds.

RowLinesbool = true

A line between rows. Defaults to true; the line under the header always shows.

ColumnLinesbool = false

A line between columns. Defaults to false.

Borderedbool = true

A rounded border around the table. Defaults to true; false for a table that sits inside a card or panel.

SizeControlSize = ControlSize.Md

Row height and text size. ControlSize.Sm for dense data. Defaults to ControlSize.Md.

MaxHeightLength?

A height limit: the rows scroll and the header stays in view.

ItemKeyFunc<TItem, string>? (computed)

A unique, stable key for each item, such as its id. Selection posts and binds these keys. Defaults to the item's string form.

Selectablebool = false

Adds a checkbox to each row. Inside a form, the checked rows post their ItemKey under SelectionName; on interactive pages @bind-SelectedKeys follows them. With script, a header checkbox selects every row on the page.

SelectionNamestring? = "{QueryPrefix}selected"

The form field name the checked rows post under. Defaults to "{QueryPrefix}selected".

@bind-SelectedKeysIReadOnlyCollection<string>? @bind: Interactive only

The keys of the selected rows (on any page). Read the posted ones with [SupplyParameterFromForm] on static pages.

RowHrefFunc<TItem, string?>?

Makes each row a link, such as to the item's details page. The whole row is clickable; links, buttons and checkboxes inside it still work on their own.

RowLabelFunc<TItem, string>? (computed)

Names a row for screen readers, in its link and its checkbox. Defaults to ItemKey.

Loadingbool = false

Shows the table as loading: rows dim, or placeholder rows show while there are none. Set automatically while an ItemsProvider loads on interactive pages.

SelectAllLabelstring? = "Select all rows"

The header checkbox's name for screen readers. Defaults to "Select all rows".

SelectRowLabelstring? = "Select"

The start of each row checkbox's name for screen readers, before RowLabel. Defaults to "Select".

Item props (from LayoutItemBase)

MarginResponsive<int>Responsive

Margin on all sides, in spacing steps (-16 to 16; one step = 4px).

MarginXResponsive<int>Responsive

Horizontal margin. When set, replaces Margin on this axis.

MarginYResponsive<int>Responsive

Vertical margin. When set, replaces Margin on this axis.

MarginTopResponsive<int>Responsive

Top margin. When set, replaces MarginY and Margin on this side.

MarginBottomResponsive<int>Responsive

Bottom margin. When set, replaces MarginY and Margin on this side.

MarginStartResponsive<int>Responsive

Margin at the start (left in left-to-right text, right in right-to-left). Replaces MarginX and Margin on this side.

MarginEndResponsive<int>Responsive

Margin at the end (right in left-to-right text, left in right-to-left). Replaces MarginX and Margin on this side.

WidthResponsive<Length>Responsive

Width.

MinWidthResponsive<Length>Responsive

Minimum width.

MaxWidthResponsive<Length>Responsive

Maximum width.

Growbool = false

Whether to grow into free space inside a Stack, Row or Column: <Box Grow>.

Shrinkbool = true

Whether to shrink when space is short inside a Stack, Row or Column. Defaults to true; Shrink="false" keeps the size.

BasisResponsive<Length>Responsive

Starting size inside a Stack, before growing or shrinking.

AlignSelfResponsive<Align>Responsive

Alignment across the parent's direction, overriding the parent's Align for this component only, such as a button lined up with the bottom of labeled fields in a Row.

ColSpanResponsive<int>Responsive

How many columns it spans in a Form or Fieldset with Columns, or a Grid; GridSpan.Full for the whole row. Never more than the columns shown, so a form that narrows to one column needs no breakpoints.

NewRowbool = false

Starts a new row in a Form or Fieldset with Columns, or a Grid, leaving the rest of the row before it empty.

Common props (from IzzyComponentBase)

Classstring?

Extra CSS classes, merged after the component's own classes.

Stylestring?

Inline style, appended after the component's generated custom properties.

HiddenFromBreakpoint?

Hides the component from this breakpoint up, such as a menu button only phones need.

VisibleFromBreakpoint?

Shows the component only from this breakpoint up, such as header links for wide screens.

Events (0)

No events.

Parts (2)

Components written inside Table, documented here with it.

`PropertyColumn<TItem, TValue>`

A column that shows one property of each item, formatted, and can sort by it. The title and sort key come from the property ([Display(Name)] is used when present).

PropertyExpression<Func<TItem, TValue>> required

The property to show, such as o => o.Customer.Name.

Formatstring?

A .NET format string for the value, such as C, N0 or yyyy-MM-dd.

Titlestring?

The header text.

Sortablebool = false

Lets people sort by this column, with a link in its header.

SortKeystring? (computed)

The name of this column in the URL's sort parameter (?sort=total, or ?sort=-total for descending) and its filter (?f-total=). Defaults to the property name in lower case.

Filterablebool = false

Adds a filter under this column's header: a text box for text (matching anywhere, ignoring case) and numbers (matching exactly), a date input for dates (matching the day), a select for enums and booleans. A TemplateColumn<T> filters by its FilterBy text.

FilterMultiplebool = false

For an enum filter: choose several values from a menu of checkboxes, and keep the items that have any of them. The URL repeats the key (?f-status=Paid&f-status=Pending).

AlignCellAlign? (computed)

How the cells line up. Defaults to the end for numbers and the start otherwise.

WidthLength?

The column width, such as Length.Rem(8).

Classstring?

A class for this column's cells and header.

FooterTextstring?

Text for this column in the table's footer row, such as a total.

`TemplateColumn<TItem>`

A column with any content per item, such as a badge or buttons. Give it SortBy to make it sortable.

ChildContentRenderFragment<TItem>?

The cell content; context is the item.

SortByExpression<Func<TItem, object?>>?

What to sort by when Sortable. Needs a SortKey.

FilterByExpression<Func<TItem, string?>>?

The text to filter by when Filterable, such as o => o.Customer.Name. It matches anywhere, ignoring case. Needs a SortKey.

Titlestring?

The header text.

Sortablebool = false

Lets people sort by this column, with a link in its header.

SortKeystring? (computed)

The name of this column in the URL's sort parameter (?sort=total, or ?sort=-total for descending) and its filter (?f-total=). Defaults to the property name in lower case.

Filterablebool = false

FilterMultiplebool = false

For an enum filter: choose several values from a menu of checkboxes, and keep the items that have any of them. The URL repeats the key (?f-status=Paid&f-status=Pending).

AlignCellAlign? (computed)

How the cells line up. Defaults to the end for numbers and the start otherwise.

WidthLength?

The column width, such as Length.Rem(8).

Classstring?

A class for this column's cells and header.

FooterTextstring?

Text for this column in the table's footer row, such as a total.

Types (6)

`CellAlign`

enum

How a table cell's content lines up.

CellAlign values
Value	Description
`Start`	The start (left in left-to-right languages). The default for text.
`Center`	Centered.
`End`	The end (right in left-to-right languages). The default for numbers.

`ControlSize`

enum

The height of interactive controls. Shared by buttons and form fields, so a button and an input of the same size line up in a row.

ControlSize values
Value	Description
`Sm`	32px tall, small text.
`Md`	36px tall (the default).
`Lg`	44px tall, large text. For touch-first and marketing pages.

`FilterPlacement`

enum

Where a Table<T> puts its column filters.

FilterPlacement values
Value	Description
`Header`	A filter button in each filterable column's header, opening the filter in a popover; the active filters show as removable tags above the table. The default.
`Row`	A row of filter fields under the headers, always in view: for tables people filter constantly.

`Length`

struct

A width, height or flex basis: a size token, a keyword, or a CSS length built with a factory such as Rem.

Length members
Member	Description
`Sm`	640px (matches the `sm` breakpoint).
`Md`	768px (matches the `md` breakpoint).
`Lg`	1024px (matches the `lg` breakpoint).
`Xl`	1280px (matches the `xl` breakpoint).
`Prose`	A comfortable reading width, 68 characters.
`Full`	100% of the containing block.
`Auto`	`auto`.
`FitContent`	`fit-content`: as wide as the content, up to the available space.
`MinContent`	`min-content`.
`MaxContent`	`max-content`.
`Px(double value)`	Pixels.
`Rem(double value)`	Root ems (16px each by default).
`Percent(double value)`	Percent of the containing block.
`Ch(double value)`	Character widths, for text measures.
`Vw(double value)`	Percent of the viewport width.
`Dvh(double value)`	Percent of the dynamic viewport height (accounts for mobile browser bars).
`Of(string css)`	Any CSS length, such as `calc(100% - 2rem)`. Checked for unsafe characters.
`Css string`	The CSS value this length renders as.

`TableRequest`

record

What a Table<T> asks its ItemsProvider for.

TableRequest members
Member	Description
`SortKey string?`	The sorted column's key, or null.
`Descending bool`	Whether the sort is descending.
`Page int`	The page, from 1.
`PageSize int?`	Items per page, or null when the table doesn't page.
`Filters IReadOnlyDictionary<string, string>`	The filter values, by column key (`"customer"` → `"ada"`). Empty when nothing is filtered.
`Skip int`	Items to skip for this page.
`Apply(IQueryable<TItem> source)`	Applies the requested filters, sort and page to a query. Count the total with `ApplyFiltering`, so it counts what the filters keep.
`ApplyFiltering(IQueryable<TItem> source)`	Keeps the items that match the requested filters, using each column's own expression (EF Core translates it).
`ApplySorting(IQueryable<TItem> source)`	Applies the requested sort to a query, using the column's own expression (EF Core translates it).

`TableResult`

record

What an ItemsProvider returns: one page of items and the total count.

TableResult members
Member	Description
`Items IReadOnlyList<TItem>`	The items on this page.
`TotalItems int`	How many items match in all, for the pager.