VDataGrid

Props

Name	Type	Description
cell-item-template	@microsoft/fast-element#ViewTemplate<any, any>	The template used to render cells in generated rows.
column-definitions	Enum: {columnDataKey: string; gridColumn?: string; title?: string; headerCellTemplate?: @microsoft/fast-element#ViewTemplate<any, any>; headerCellInternalFocusQueue?: false true; headerCellFocusTargetCallback?: ((cell: @vonage/vivid#VwcDataGridCellElement) => HTMLElement); cellTemplate?: @microsoft/fast-element#ViewTemplate<any, any>; cellInternalFocusQueue?: false | true; cellFocusTargetCallback?: ((cell: @vonage/vivid#VwcDataGridCellElement) => HTMLElement); isRowHeader?: false | true}[]	The column definitions of the grid
fixed-columns	number	Number of columns to be fixed when scrolling horizontally
focus-column-index	number	The index of the column that will receive focus the next time the grid is focused. This value changes as focus moves to different rows within the grid. Changing this value when focus is already within the grid moves focus to the specified column.
focus-row-index	number	The index of the row that will receive focus the next time the grid is focused. This value changes as focus moves to different rows within the grid. Changing this value when focus is already within the grid moves focus to the specified row.
generate-header	Enum: none default sticky	Whether the grid should automatically generate a header row and its type
grid-template-columns	string	String that gets applied to the css gridTemplateColumns attribute of child rows
header-cell-item-template	@microsoft/fast-element#ViewTemplate<any, any>	The template used to render header cells in generated rows.
no-tabbing	boolean	When true the component will not add itself to the tab queue. Default is false.
row-element-tag	string	Set by the component templates.
row-item-template	@microsoft/fast-element#ViewTemplate<any, any>	The template to use for the programmatic generation of rows
rows-data	object[]	The data being displayed in the grid
selection-mode	Enum: none single-row multi-row single-cell multi-cell	Indicates the selection mode.

Events

Name	Event Type	Description
blur	FocusEvent	Fires when the element loses focus.
cell-click	CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>	Event that fires when a cell is clicked
click	MouseEvent	Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focus	FocusEvent	Fires when the element receives focus.
input	Event	Fires when the value of an element has been changed.
keydown	KeyboardEvent	Fires when a key is pressed.
keyup	KeyboardEvent	Fires when a key is released.

Slots

Name	Description
default	Default slot.

Methods

Name	Type	Description
selectionModeChanged	`(oldValue: 'none'	'single-row'