DataGrid

A row's detail: drawn under it, across the grid, while it's open. Setting it adds a column of buttons that open and close it. It needs an ItemKey, which open rows are kept by. Only open rows draw it, so a component in it loads its own data when it's opened.

Which rows have a detail; all of them when it's not set. A row without one has no button, except while the grid hides columns to fit, when its detail shows their values.

Which rows' details are open, by key; "*" is all of them, and "!key" an exception to that. Binding it on an interactive page keeps it in the component; otherwise it's in the address.

Whether every row's detail starts open.

Opening a row's detail closes the one that was open. There's no button to open them all.

Lets people group by columns, from a header's menu. Grouped, the grid's pages count top-level groups, so a group is never split, and each group's count and aggregates are the whole group's. With an ItemsProvider, it needs a GroupsProvider.

The grouping, outermost first, such as "status,-customer" (- for descending); null for InitialGroup. Works without Groupable, for a grouping people can't change. Binding it (@bind-Group) on an interactive page keeps it in the component instead of the URL.

The grouping when the URL has none, such as "status".

Whether groups start open. They start closed by default, which is what a page of groups is for.

Which groups are open, each by its values joined with /, escaped, such as "Shipped/Acme"; "*" is all of them, and "!Shipped" an exception to that. Binding it on an interactive page keeps it in the component.

The most rows drawn in one open group. Past it, the group says how many it has and links to showing only that group, with the grid's pages. Defaults to 100.

Keeps the bar of what's grouped above the grid while nothing is, saying a header can be dragged there. Without it the bar shows only while grouped, and the first grouping is from a header's menu. Dragging needs script and a mouse or pen; the menu works everywhere.

Keeps a grouped column in the table. By default it leaves, as each group's row says its value.

What it does when its columns don't fit its width: DataGridSmallScreen.Scroll (the default) scrolls sideways; DataGridSmallScreen.HideColumns hides columns by their Priority and shows their values in the row's detail. Hiding needs an ItemKey, can't be used with Virtualize, and makes the grid as wide as its space. A hidden column's header is hidden with it, so sort or filter it from the column picker or the filter chips. Widths dragged by ResizableColumns count from the next time the server draws the grid.

A CSP nonce for the style element that holds the widths where columns hide. Defaults to the IzzyTheme's Nonce on the page; set it on interactive pages, which don't see the theme's.

How a row is edited. Needs OnSave and an ItemKey.

Finds a row that isn't among those loaded, by its key, for the edit dialog and the delete confirmation: a link to a row on another page, say. A grid that loads rows as they're needed (Virtualize, or Paging by loading more) has to have it. Return null for a row this person can't reach: ItemEditable and ItemDeletable are checked on what it returns.

A new row's starting values. Setting it adds an Add button to the toolbar, and OnSave gets the row with IsNew set.

Which rows can be edited; all of them when it's not set. It's checked on a save too, not just when drawing the button.

Which rows can be deleted; all of them when it's not set. It's checked on a delete too, not just when drawing the button.

The key of the row being edited, or null. Binding it (@bind-EditKey) on an interactive page keeps it, with sort and page, in the component. Otherwise it's in the address (?edit=42), or where another of them is bound, such as Page, kept in the component.

Makes the copy of a row that's edited, on an interactive page, in place of a shallow copy: for a type that holds what a copy mustn't share.

Remembers how each person has arranged the columns, in a cookie under this name, so the server draws it on the first paint. Letters, digits, - and _. With neither this nor Layout, nothing is stored.

How the columns are arranged, in place of the cookie: bind it (@bind-Layout) to keep layouts yourself, such as per user in a database. Null leaves them as declared.

With script, an address the app maps to save a person's layout: the grid posts it there as JSON when it changes, for a static page that passes its own Layout.

Lets people resize columns: by dragging a handle at the header's end, by double-clicking it to fit, by Shift+Left and Shift+Right, or from the header's menu. The grid scrolls if it grows. Needs script, and on a static page a LayoutKey or LayoutSaveUrl.

Lets people move columns: by dragging a header, by Alt+Left and Alt+Right, or from the header's menu, which can also freeze them. Frozen columns move among themselves. Needs script, and on a static page a LayoutKey or LayoutSaveUrl.

A button above the grid listing the columns to show or hide, and to put back as declared. Needs script, and on a static page a LayoutKey or LayoutSaveUrl.

Draws only the rows in view, on an interactive page; on a static page they load on scroll instead, by PageSize (50 if not set), up to 2,000 rows. Needs a MaxHeight, and rows of one line, as tall as RowHeight. An ItemsProvider must return a Total, and read each window's Skip and Take, not Page, as a window needn't start on a page. It can't take paging by cursor. Pages, and their footer, don't apply.

The height of every row, in pixels, with Virtualize. Text past it is cut short. A control in a cell can't be cut short: a row with a checkbox or a ⋮ button needs at least 33. Defaults to 48.

Text beside the icons of the toolbar's own tools, for a grid people use now and then. Without it they're icons with a tooltip, for one used all day. A tool's own ShowText goes first.

A link in the toolbar, in a menu with ExportExcelHref, to an endpoint that writes the rows as CSV with DataExport, for a grid that offers CSV besides Excel. It adds the current filter, sort, search and columns to the address. The endpoint's fields need the grid's keys, and its FilterCase as their Case, for the file to match the screen.

A link in the toolbar, in a menu with ExportCsvHref, to an endpoint that writes the rows as an Excel workbook with DataExport. It adds the current filter, sort, search and columns to the address. The endpoint's fields need the grid's keys, and its FilterCase as their Case, for the file to match the screen.

The page's own controls in the toolbar above the grid: ToolbarButton, ToolbarMenu and the like. Write DataGridSearch, DataGridExport or DataGridColumnPicker here to place the grid's own among them. While rows are selected, the selection bar takes its place. The grid reads this once more on each render, to see which of its tools are here, so nothing in it should count or consume anything.

A search box in the toolbar, across the text columns. The words go in the address (?search=) and reach an ItemsProvider as the request's Search. With no script they apply on Enter.

The words searched for. Binding it (@bind-Search) on an interactive page keeps them, with sort and page, in the component.

The search box's name and placeholder. Defaults to "Search".

Adds a row of filters under the titles: a field for each column, then its filter button, which opens the column's panel, where the operator is chosen. A list, a range or a date shows what it's set to, and opens the panel too.

Adds a Filter builder button to the toolbar, for groups of conditions no column's filter can hold. What it builds goes in the address as ?filter=, and applies along with the columns' filters.

Counts and aggregates for an ItemsProvider, which a column's Aggregate needs. It gets one request for each level of groups, and one with no keys for the grand total. Answer it from a query with request.ToResultAsync. With Items, the grid works these out itself.

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

The sort when the URL has none, such as "name" or "-date" (descending). A DataGrid takes several: "status,-date".

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

The filter: Filter.All of a condition per filtered column (contains for text, between for numbers, equals for dates, equals or in for choices), or null for none. Binding it (@bind-Filter) on an interactive page keeps filters, sort and page in the component instead of the URL. Set it in C#, such as Filter.Where("status", FilterOperator.Equals, "Paid"); a condition no column's panel can show still applies, and shows as a tag that removes it.

How text compares in the column filters and search. Defaults to FilterCase.IgnoreCase, which lowers both sides. FilterCase.Database compares text as it is and leaves it to the database's collation, so an index can serve it. An export endpoint sets Case on its own fields, or the file and the screen can differ.

A row below the rows that lists the active filters, each with a button to remove it, and Clear for all of them. It's there whether or not anything is filtered, so nothing moves.

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

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

Highlights the row under the pointer, to help follow a wide one across. Defaults to false, as a highlight suggests a row does something. A row with a RowHref always has it, and a row being edited never does.

Alternating row backgrounds.

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

A line between columns. Defaults to false.

Shades the header, and a DataGrid's FilterRow with it, so they read apart from the rows; its color is --ib-table-head-bg. Defaults to false. With Striped too, the header is a little lighter than a stripe.

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

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

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

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.

The row for what the page is showing, such as the one whose details are in a panel beside the table: drawn as selected, and marked aria-current (on its link with RowHref).

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

Applies a whole filter from the address (?filter=, with the QueryPrefix), as a FilterBuilder<T> on the page writes it, along with the columns' own. Off by default, as the page may use that name itself.

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

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.

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

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

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.

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

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

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.

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

Shown when there are no items. Defaults to EmptyText.

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

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

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

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

Whether items can be selected: one (a radio button on each) or several (a checkbox on each). Inside a form, the selected items post their ItemKey under SelectionName; bind Selection to follow them.

The form field name the selection posts under, read back as a Selection with [SupplyParameterFromForm(Name = ...)]. Defaults to "{QueryPrefix}selected": give two selectable views in one form a QueryPrefix (or a name) each.

The selected items: keys on any page, or every item matching the filter except some. On a static page pass back the posted one. Selecting all that match is cleared when the filter or search changes.

Whether an item can be selected; others show a disabled, unchecked box, and selecting the page or a range leaves them out. "Select all" (every matching item) can't know this rule: leave them out of the query you apply the Selection to.

What the select-all checkbox selects: the items on this page, or every item the filters match, on any page. Those aren't loaded, so act on them with Selection.Apply. With virtual rows, SelectAllMode.Page reaches only the rows drawn.

Actions on the selection, in a bar above the items, disabled until something is selected (on a DataGrid with a toolbar, the bar takes the toolbar's place while something is). Submit buttons in the surrounding form post the selection. A link can't be disabled, so it stays live. Without these there's no bar.

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

The start of each item checkbox's name for screen readers, before the item's label. Defaults to "Select".

Saves an edited row. With no errors added, the editor closes and the rows load again; with errors, it stays open and shows them. It's called only when the row is valid by its rules.

Deletes a row, once someone has confirmed it. Setting it adds a Delete action to each row. With no error added, the dialog closes and the rows load again.

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.