Data Grid

Discriminator: dataGrid
Fluent UI Blazor Component: FluentDataGrid

Description

The DataGrid component renders a data table with support for sortable and filterable columns, row selection, pagination, and hover effects. Data is provided as an array of JSON objects, and columns define how to extract and display values from each row.

Properties

Property	Type	Required	Default	Description
`component`	`string`	✅ Yes	`"dataGrid"`	Type discriminator
`style`	`string`	No	`null`	Inline CSS style
`id`	`string`	No	`null`	Component identifier for data binding (required for selection data)
`columns`	`DataGridColumn[]`	No	`[]`	Column definitions (see below)
`items`	`JsonObject[]`	No	`[]`	Array of JSON objects representing the rows
`selection`	`DataGridSelection`	No	(see below)	Selection configuration
`itemKey`	`string`	No	`null`	JSON property key used to identify selected items by value
`showHover`	`bool`	No	`false`	Whether to highlight rows on hover
`resizeableColumns`	`bool`	No	`true`	Whether columns can be resized by dragging
`autoFitColumns`	`bool`	No	`true`	Whether columns automatically fit their content
`rowSize`	`DataGridRowSize`	No	`Small`	Row height size: `Smaller`, `Small`, `Medium`, `Large`
`pagination`	`DataGridPagination`	No	`null`	Pagination configuration (see below). When `null`, pagination is disabled

DataGridColumn

Each column defines how to display a property from each row item.

Property	Type	Required	Default	Description
`key`	`string`	✅ Yes	—	JSON property key to extract from each row item (supports JSON Path)
`title`	`string`	✅ Yes	—	Column header display text
`align`	`Align`	No	`Start`	Column content alignment: `Start`, `Center`, `End`, `Stretch`, `Baseline`
`initialSortDirection`	`SortDirection`	No	`Auto`	Initial sort direction: `Auto`, `Ascending`, `Descending`
`isDefaultSortColumn`	`bool`	No	`false`	Whether this column is the default sort column
`sortable`	`bool`	No	`true`	Whether the column can be sorted
`filterable`	`bool`	No	`false`	Whether the column has a text filter input
`width`	`string`	No	`null`	Fixed CSS width (e.g. `"80px"`, `"200px"`)
`minWidth`	`string`	No	`"100px"`	Minimum CSS width

DataGridSelection

Controls row selection behavior.

Property	Type	Required	Default	Description
`mode`	`SelectMode`	No	`Multiple`	Selection mode: `Single` or `Multiple`
`selectable`	`JsonPath`	No	`null`	Optional JSON Path expression evaluated against each row to determine if it is selectable. Must evaluate to a boolean. When `null`, all rows are selectable
`minSelectable`	`uint`	No	`1`	Minimum number of items that must be selected
`maxSelectable`	`uint?`	No	`null`	Maximum number of items that can be selected. `null` means unlimited

DataGridPagination

Property	Type	Required	Default	Description
`itemsPerPage`	`uint`	No	`10`	Number of items displayed per page

DataGridRowSize Values

Value	Description
`Smaller`	Compact row height
`Small`	Small row height (default)
`Medium`	Medium row height
`Large`	Large row height

Data Binding

When the DataGrid has an id and is referenced by a button's data binding, the grid provides a DataGridOutputData object containing:

Property	Type	Description
`items`	`JsonObject[]`	All items in the grid
`selectedItems`	`JsonObject[]`	Currently selected row objects
`selectedIndices`	`uint[]`	Zero-based indices of selected rows
`selectedKeys`	`JsonNode[]?`	Values of the `itemKey` property from selected rows (if `itemKey` is set)

Validation

When selection is configured and the grid is validated:

Single mode: Exactly one item must be selected (unless minSelectable is 0).
Multiple mode: The number of selected items must be between minSelectable and maxSelectable.

JSON Example

Basic Data Grid

Rendering...

Data Grid with Selection and Filtering

Rendering...

Conigma Connect