Columns

Since 0.1.0-alpha.20

Let people resize, move, hide and freeze columns.

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

Properties (6)

LayoutKeystring?Added in 0.1.0-alpha.20

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.

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

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.

LayoutSaveUrlstring?Added in 0.1.0-alpha.20

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.

ResizableColumnsbool = falseAdded in 0.1.0-alpha.20

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.

ReorderableColumnsbool = falseAdded in 0.1.0-alpha.20

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.

ColumnPickerbool = falseAdded in 0.1.0-alpha.20

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.

Parts (2)

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

`DataGridColumnPicker`

Puts a DataGrid's Columns button, from ColumnPicker, among your toolbar items. It stays in the bar, at the end unless Position says otherwise.

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

Its text beside its icon, or only its icon. Defaults to the grid's ToolbarLabels.

PositionToolbarPosition = ToolbarPosition.EndAdded in 0.1.0-alpha.20

Where it sits, among the items of that position in the order they're written.

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

Titlestring?

The header text.

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). In a grid, a fixed length: not a percent or a keyword.

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

How narrow a column without a Width can get before the grid scrolls sideways. Defaults to 8rem. Not for a Table, whose columns size to their content.

FrozenColumnFrozen = ColumnFrozen.NoneAdded in 0.1.0-alpha.20

Keeps this column in view at the grid's start or end while the rest scrolls sideways, and draws it at that edge wherever it's declared. It needs a Width. Not for a Table.

MaxWidthLength?Added in 0.1.0-alpha.20

In a grid with ResizableColumns, how wide people can make this column. No limit by default.

Resizablebool = trueAdded in 0.1.0-alpha.20

In a grid with ResizableColumns, whether people can resize this column. Defaults to true.

Reorderablebool = trueAdded in 0.1.0-alpha.20

In a grid with ReorderableColumns, whether people can move this column. Defaults to true.

Pickablebool = trueAdded in 0.1.0-alpha.20

In a grid with a ColumnPicker, whether people can hide this column. Defaults to true.

Visiblebool = trueAdded in 0.1.0-alpha.20

Whether the column shows at first in a DataGrid. Hidden, it's still in the column picker, where people can show it, unless Pickable is false, and can still be filtered by and edited. This isn't access control: its values are sent once it's shown, so leave out a column someone mustn't see.

Types (5)

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

`ColumnFrozen`

enum

Where a DataGrid column stays in view while the rest scrolls sideways.

ColumnFrozen values
Value	Description
`None`	It scrolls with the rest. The default.
`Start`	At the grid's start (the left, or the right in a right-to-left page).
`End`	At the grid's end.

`DataGridLayout`

record

How one person has arranged a DataGrid's columns: only what differs from the columns as declared. Serializable, to keep per user in a database. Sort, filter and page aren't part of it: they're in the address, so one link shows the same rows to everyone.

DataGridLayout members
Member	Description
`Parse(string? json)`	A layout from `ToJson`, or null if it isn't one. It may come from a cookie, so whatever doesn't hold up is left out: a width that isn't plain pixels or rems, an unknown frozen side, a column past the limit.
`Columns IReadOnlyList<DataGridColumnLayout>`	The columns that differ from their declaration.
`Column(string key)`	A column's entry, by its key (its `SortKey` or property, else its title), or null.
`ToJson()`	The layout as JSON, as a cookie holds it.

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

`ToolbarPosition`

enum

Where an item of a Toolbar sits.

ToolbarPosition values
Value	Description
`Start`	At the start (the left in left-to-right text), the default.
`Center`	In the middle, kept centered between the start and the end.
`End`	At the end, before the "…" menu.