Loading data

Rows from a database or an API, paging by cursor, loading on scroll, and a failed load.

The members for loading data, and the types they use. Every member of IzzyBlazor.Table<TItem> is on the Table API.

Properties (11)

MaxHeightLength?

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

ItemsIEnumerable<TItem>?

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

ItemsProviderFunc<DataRequest<TItem>, ValueTask<DataResult<TItem>>>?

Loads the items yourself, in place of Items: the request has the range (and in a Table the sort, the filter and the columns as fields), so request.ToResultAsync(query, ...) or request.Apply(query) does the work. An exception it throws shows "Couldn't load the rows." with Retry (and is logged); a request that was canceled is ignored.

@bind-PageSizeint? @bind: Interactive only

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

@bind-Pageint? @bind: Interactive only

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

PagingDataPaging = DataPaging.PagesAdded in 0.1.0-alpha.20

How it moves through its pages when it has a PageSize: numbered pages (DataPaging.Pages, the default, which needs a total), or by cursor, with no total needed: First, Previous and Next (DataPaging.NextPrevious), a "Load more" button after the items (DataPaging.LoadMore, ListView only), or loading as the last item comes into view (DataPaging.LoadOnScroll).

Without JavaScript: With JavaScript off, LoadOnScroll doesn't load as you scroll: its Load more button shows, which reloads the page with one more page.

LoadMoreTextstring? = "Load more"Added in 0.1.0-alpha.20

The "Load more" button's text, such as "Load earlier". Defaults to "Load more".

@bind-Cursorstring?Added in 0.1.0-alpha.20 @bind: Interactive only

The cursor of the page shown when paging by cursor (Paging); null for the first page. Binding it (@bind-Cursor) on an interactive page keeps it in the component instead of the URL; Page is then the page's position.

ErrorContentRenderFragment?Added in 0.1.0-alpha.20

Shown in place of "Couldn't load the rows." when loading fails, before the Retry button.

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.

Loadingbool = false

Shows it as loading: items dim, or placeholders show while there are none. Set automatically while an ItemsProvider loads on interactive pages.

Methods (1)

ReloadAsyncAdded in 0.1.0-alpha.20

Task ReloadAsync()

Loads the items again, such as after an edit. With DataPaging.LoadMore it starts over from the page the list began at, dropping the pages added since.

Parts (2)

Components written inside Table, and the columns' members, which PropertyColumn and TemplateColumn share.

`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).

FilterFunc<FieldFilter, Expression<Func<TItem, bool>>?>?Added in 0.1.0-alpha.20

Builds this column's filter condition yourself, for a computed value or one stored differently from how it's shown. It gets the condition (operator and values parsed for the column's type) and returns the filter on the item, or null for the usual one. See Filter.

`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).

FilterFunc<FieldFilter, Expression<Func<TItem, bool>>?>?Added in 0.1.0-alpha.20

Types (5)

`DataPaging`

enum

How a Table<T> or ListView with a PageSize moves through its pages.

DataPaging values
Value	Description
`Pages`	Numbered pages and "1–10 of 42". Needs the total (`Total`). The default.
`NextPrevious`	First, previous and next only, by cursor (`Next`): for data that has no total, or that pages by a token. Each page replaces the one shown.
`LoadMore`	A "Load more" button after the items that adds the next page to them, by cursor: for a `ListView` (a Table pages by number, by cursor or on scroll). On static pages and with JavaScript off it's a link to the same list with one more page (`?page=3` shows the first three pages, asked of the provider as one request from the start); with script, focus goes to the first item it added.
`LoadOnScroll`	The next page loads when the last item scrolls into view and is added to the items: in place on interactive pages, and on static pages by following the Load more link, which enhanced navigation patches in with the scroll kept. The button is there only for the keyboard: out of sight until it has focus, with a spinner in its place while a page loads. With JavaScript off it shows, and grows the list by a page as for `DataPaging.LoadMore`. Best with a `MaxHeight`, so content under it stays within reach.

`DataRequest`

record

What a data component (a Table<T>) asks its ItemsProvider for: a range of rows, sorted and filtered, or the page after a cursor. Apply it to a query with ToResultAsync or Apply; the component's columns say how each key reads an item, so a provider never maps keys to properties itself. It travels: to JSON with System.Text.Json, and to a query string with ToQueryString, for a WebAssembly app that calls an API, where Apply applies it through the fields the server declares.

DataRequest members
Member	Description
`Sort IReadOnlyList<SortField>`	The sort, first key first; empty for the source's own order.
`Filter Filter?`	The filter, or null for none.
`Search string?`	Free text to look for, in the searchable fields (text, by default); null for none.
`Skip int = 0`	Rows to skip: any offset, such as 1,036 for a virtual-scrolling grid.
`Take int?`	Rows to take; null for every row.
`Cursor string?`	When the component pages by cursor (`DataPaging`), the `Next` or `Previous` of an earlier page, as it was given; null for the first page. `Skip` is then the page's position (rows 401–600 at 200 a page).
`NeedsTotal bool = true`	Whether the component needs the total count. False when it pages by cursor, where the total is optional.
`CancellationToken CancellationToken = CancellationToken.None`	Canceled when the component no longer needs this answer (a newer request, or it went away).
`Page int = 1`	The page, from 1, for a source that thinks in pages: `Skip` / `Take` + 1.
`Apply(IQueryable<TItem> source)`	Filters, searches, sorts and takes the range of a query, with the component's fields. EF Core translates it.
`Apply(IQueryable<TItem> source, IReadOnlyList<DataField<TItem>> fields)`	Filters, searches, sorts and takes the range of a query, mapping keys through these fields only: on a server, for a request that came over the wire. A filter on a key that isn't one of them (or isn't filterable) matches nothing, and a sort by one is left out, so a request can't reach other properties.
`ApplyFiltering(IQueryable<TItem> source)`	Keeps what the filter and search match, with the component's fields: count this for the total.
`ApplyFiltering(IQueryable<TItem> source, IReadOnlyList<DataField<TItem>> fields)`	Keeps what the filter and search match, through these fields only.
`ApplySorting(IQueryable<TItem> source)`	Sorts a query, with the component's fields.
`ApplySorting(IQueryable<TItem> source, IReadOnlyList<DataField<TItem>> fields)`	Sorts a query by the sortable fields named in `Sort`, through these fields only.
`ToODataQuery()`	The request as OData query options, for a provider whose API is an OData endpoint: `$filter=...&$orderby=customer,total desc&$skip=20&$top=10&$count=true&$search=...`. Text that ignores case compares lower-cased (`contains(tolower(customer),'ada')`), as OData matches case; field paths use `/`. A cursor isn't part of OData: pass `Cursor` (or its `$skiptoken`) yourself. Values are written as the component's fields' types, so a Guid or a date that came back from JSON as text is written as one.
`ToODataQuery(IReadOnlyList<DataField<TItem>> fields)`	The request as OData query options, with values written as these fields' types.
`ToQueryString()`	The request as a query string, for a GET API: `sort=customer,-total&skip=20&take=10&filter=...&search=...&cursor=...`, with `total=false` when it doesn't need the total. The filter is in the form `Parse` reads (`MatchCase` isn't written). Read it back with `Parse`.
`ToResult(IQueryable<TItem> source)`	The count of what the filter keeps (when `NeedsTotal`) and this range's items, with the component's fields, from an in-memory list or a synchronous query.
`ToResult(IQueryable<TItem> source, IReadOnlyList<DataField<TItem>> fields)`	The count and items, through these fields only (see `Apply`).
`ToResultAsync(IQueryable<TItem> source, Func<IQueryable<TItem>, CancellationToken, Task<int>> count, Func<IQueryable<TItem>, CancellationToken, Task<List<TItem>>> list)`	The count of what the filter keeps (only when `NeedsTotal`) and this range's items, with the component's fields, through your async methods, so Core needs no EF Core: `count: (q, ct) => q.CountAsync(ct), list: (q, ct) => q.ToListAsync(ct)`. Both get the request's `CancellationToken`.
`ToResultAsync(IQueryable<TItem> source, IReadOnlyList<DataField<TItem>> fields, Func<IQueryable<TItem>, CancellationToken, Task<int>> count, Func<IQueryable<TItem>, CancellationToken, Task<List<TItem>>> list)`	The count and items through your async methods, mapping keys through these fields only.

`DataResult`

record

What an ItemsProvider returns: the rows asked for, and the total count or the cursors of the pages around them.

DataResult members
Member	Description
`Items IReadOnlyList<TItem>`	The rows.
`Total int?`	How many rows match in all. A Table with numbered pages (`DataPaging.Pages`) needs it; paging by cursor, it's optional and adds "of 1,234" to the range.
`Next string?`	The cursor of the page after this one, or null on the last page. Used when the component pages by cursor.
`Previous string?`	The cursor of the page before this one, if your data source gives one. Without it a Table goes back to cursors it has seen on interactive pages; on static pages Previous is unavailable past the second page (First still works).

`FieldFilter`

record

A condition on one field: total ge 100. The values are parsed for the field's type when the filter is applied (text as the person writes it in the current culture, or the invariant form); a value that doesn't parse matches nothing.

FieldFilter members
Member	Description
`Field string`	The field's key.
`Operator FilterOperator`	How the field's value compares.
`Value object?`	The value to compare with. For `FilterOperator.In` and `FilterOperator.NotIn`, a list of values; for `FilterOperator.Between`, the lower end (null for none).
`Value2 object?`	The upper end for `FilterOperator.Between` (null for none).
`MatchCase bool`	For text: match upper and lower case exactly, and for equality, spaces too. Text ignores case by default.
`Values IReadOnlyList<object?>`	The values of an `FilterOperator.In` or `FilterOperator.NotIn` condition (a single value is a list of one).

`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.