Data Grid

Allows users to interact with data in a tabular format.

import '@vonage/vivid/data-grid';
import '@vonage/vivid/data-grid-row';
import '@vonage/vivid/data-grid-cell';

import { registerDataGrid } from '@vonage/vivid';

registerDataGrid('your-prefix');

<script setup lang="ts">
	import { VDataGrid, VDataGridRow, VDataGridCell } from '@vonage/vivid-vue';
</script>

<template>
	<VDataGrid>
		<VDataGridRow>
			<VDataGridCell>Data 11</VDataGridCell>
			<VDataGridCell>Data 12</VDataGridCell>
			<VDataGridCell>Data 13</VDataGridCell>
		</VDataGridRow>
		<VDataGridRow>
			<VDataGridCell>Data 21</VDataGridCell>
			<VDataGridCell>Data 22</VDataGridCell>
			<VDataGridCell>Data 23</VDataGridCell>
		</VDataGridRow>
	</VDataGrid>
</template>

Use the no-tabbing attribute to remove the component from the tab order.

Use the focusRowIndex and focusColumnIndex to determine which row or cell to set focus on when the Data Grid component receieves focus.

In the example below, change the value of the row / column index and then tab into the Data Grid.

The cell-click event is fired when a cell is clicked on or when the enter or space key is pressed on a focused cell.

Event details: { cell, row, isHeaderCell, columnDataKey }

Use the rowsData property to provide the component with the data (an array or objects) to be displayed. If not used in conjuction with column defintions (title), text displayed in the column headers will be the data keys of the object.

Use the columnDefinitions property to programmatically configure the column headers that are generated when using rows-data. See the ColumnDefinition interface for more information.

Use the generate-header property to programmatically define the type of grid header that is generated when using rows-data.

The ViewTemplates used to render rows, cells and header cells can be customised using the following properties:

• rowItemTemplate
• cellItemTemplate
• headerCellItemTemplate

You need to use html from fast-element.

<vwc-data-grid class="data-grid"></vwc-data-grid>
<script>
	import { html } from '@microsoft/fast-element';
	const grid = document.querySelector('.data-grid');
	grid.rowItemTemplate = html`<div>All rows will look like me!</div>`;
	grid.cellItemTemplate = html`<div>All cells will look like me!</div>`;
	grid.headerCellItemTemplate = html`<div>
		All header cells will look like me!
	</div>`;
	grid.rowsData = [
		{ data1: 'data11', data2: 'data12' },
		{ data1: 'data21', data2: 'data22' },
	];
</script>

Use the rowElementTag to set the element tag for header row cells. If not set, the default tag vwc-data-grid-cell will be used.

When Row is set to sticky there's a default canvas background-color.
Use --data-grid-row-background to change the sticky row background-color.

When a grid has the fixed-columns attribute, fixed columns cells have a default canvas background-color.
Use --data-grid-cell-background to overwrite the default background-color.

Use --data-grid-cell-block-size to change the cell's block-size.

By default, header cells have a fixed height while data cells have a dynamic height based on content.

Use --data-grid-cell-white-space to change the cell's white-space.

By default, header cells will not wrap text (nowrap), while data cells will wrap text (normal).

Properties

Interfaces

ColumnDefinition

Properties

Events

Properties

Events