Loading data

Since 0.1.0-alpha.20

The list loads items a page at a time, from memory or a database, with a Load more button or as the user scrolls.

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

Properties (14)

@bind-ItemsIEnumerable<TItem>?Added in 0.1.0-alpha.20 @bind: Interactive only

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>>>?Added in 0.1.0-alpha.20

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?Added in 0.1.0-alpha.20 @bind: Interactive only

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

PageSizeOptionsIReadOnlyList<int>?Added in 0.1.0-alpha.20

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

@bind-Pageint?Added in 0.1.0-alpha.20 @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.

QueryPrefixstring = ""Added in 0.1.0-alpha.20

Prefix for its query-string keys, so several can share a page: QueryPrefix="orders-" uses ?orders-page= (and a Table's ?orders-sort=).

EmptyContentRenderFragment? (computed)Added in 0.1.0-alpha.20

Shown when there are no items. Defaults to EmptyText.

EmptyTextstring? = "No items"Added in 0.1.0-alpha.20

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

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)Added in 0.1.0-alpha.20

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 = falseAdded in 0.1.0-alpha.20

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.

Types (3)

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