Grid

A Grid is a robust way to display an information-rich collection of items, and allow people to sort, group, and filter the content. Use Grid when information density is critical.

Properties#

NameTypeDefaultDescription
selectionstringnoneItems selection mode: none, single or multiple.
compactboolfalseWhether to render Grid in a compact form.
headerVisibleboolfalseWhether Grid header is visible.
shimmerLinesint0Whether to display shimmer lines if items collection is empty. 0 - do not display shimmer.

Events#

NameDescription
selectFires when one or more Grid items are selected or de-selected.
itemInvokeFires when Grid item is invoked with double-click or Enter.

Child controls#

Columns control#

Serves as a container for column controls.

Child controls#

Items control#

Serves as a container for item controls.

Child controls#

Column control#

Describes Grid column.

Properties#

NameTypeDefaultDescription
namestringColumn header text.
iconstringColumn header icon next to the text.
iconOnlyboolfalseDisplay only header icon.
fieldNamestringItem's property name to display in the column.
sortablestringWhether client-side sorting is enabled for this column. Supported values: true - column is sortable as a string; number - column is sortable as a number; false or empty - column is not sortable.
sortFieldstringItem's property name used for sorting. Sort by fieldName if not specified.
sortedstringfalseWhether the items are sorted by sortField or fieldName and in what direction. Supported values: false (unsorted), asc or desc.
resizableboolfalseWhether the column is resizable.
minWidthnumberMinimum width of the column.
maxWidthnumberMaximum width of the column.
onClickboolfalseWhether column header is clickable.

Events#

NameDescription
clickFires when Grid column is clicked.

Child controls#

Any controls to enable template column.

Item control#

Item control holds the data for a single row.

Properties#

Item control can have any properties.

Examples#

# TODO