Data Grid

Allows users to interact with data in a tabular format.

Usage

<template>
  <VSelect v-model="value" label="Selection Mode" class="select">
    <VOption value="none" text="none" />
    <VOption value="single-row" text="single-row" />
    <VOption value="multi-row" text="multi-row" />
    <VOption value="single-cell" text="single-cell" />
    <VOption value="multi-cell" text="multi-cell" />
  </VSelect>
  <VDataGrid id="grid" :selection-mode="value" :rows-data="data" />
</template>
<script setup lang="ts">
import { VDataGrid, VSelect, VOption } from '@vonage/vivid-api-vue';
import { ref } from 'vue';

const value = ref('none');
const data = ref([
{ name: 'John', surname: 'Doe', age: 30 },
{ name: 'Jane', surname: 'Doe', age: 25 },
{ name: 'Bill', surname: 'Cave', age: 22 },
{ name: 'Jill', surname: 'Jane', age: 23 },
]);

</script>

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

registerDataGrid('your-prefix');

Data Grid Row and Data Grid Cell sub-components are registered automatically in the same function.

<script type="module">
  import { registerDataGrid } from '@vonage/vivid-api';
  registerDataGrid('your-prefix');
</script>

<your-prefix-data-grid>
  <your-prefix-data-grid-row>
    <your-prefix-data-grid-cell>Data 11</your-prefix-data-grid-cell>
    <your-prefix-data-grid-cell>Data 12</your-prefix-data-grid-cell>
    <your-prefix-data-grid-cell>Data 13</your-prefix-data-grid-cell>
  </your-prefix-data-grid-row>
  <your-prefix-data-grid-row>
    <your-prefix-data-grid-cell>Data 21</your-prefix-data-grid-cell>
    <your-prefix-data-grid-cell>Data 22</your-prefix-data-grid-cell>
    <your-prefix-data-grid-cell>Data 23</your-prefix-data-grid-cell>
  </your-prefix-data-grid-row>
</your-prefix-data-grid>

Remove From Tab Order

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

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

const noTabbing = ref(true);
const gridFocused = ref(false);
const focusedCellContent = ref('');

function onGridFocusin() {
gridFocused.value = true;
}

function onGridFocusout() {
gridFocused.value = false;
focusedCellContent.value = '';
}

function onCellFocused(e: VEvents['VDataGridCell']['cell-focused']) {
focusedCellContent.value = e.detail.innerText;
}

</script>

<template>
  <VButton label="No Tabbing" :appearance="noTabbing ? 'filled' : undefined" class="button" @click="noTabbing = true" />
  <VButton label="Tabbing" :appearance="!noTabbing ? 'filled' : undefined" class="button" @click="noTabbing = false" />

    <div id="active-element-content-display">
      <p>Hit <code>TAB</code> key to browse the tab queue. When in `no-tabbing` mode, grid will never be focused.</p>
      <div>
        Grid:
        <span id="active-element-content">
          {{ gridFocused ? 'Focused' : 'Not Focused' }}
        </span>
      </div>
      <div>
        Focused Cell Content:
        <span id="focused-cell-content">{{ focusedCellContent }}</span>
      </div>
    </div>

    <VDataGrid ref="data-grid" :no-tabbing="noTabbing" class="data-grid" @focusin="onGridFocusin" @focusout="onGridFocusout">
      <VDataGridRow row-type="header">
        <VDataGridCell cell-type="columnheader" @cell-focused="onCellFocused">Data 1</VDataGridCell>
        <VDataGridCell cell-type="columnheader" @cell-focused="onCellFocused">Data 2</VDataGridCell>
        <VDataGridCell cell-type="columnheader" @cell-focused="onCellFocused">Data 3</VDataGridCell>
      </VDataGridRow>
      <VDataGridRow>
        <VDataGridCell @cell-focused="onCellFocused">Data 11</VDataGridCell>
        <VDataGridCell @cell-focused="onCellFocused">Data 12</VDataGridCell>
        <VDataGridCell @cell-focused="onCellFocused">Data 13</VDataGridCell>
      </VDataGridRow>
      <VDataGridRow>
        <VDataGridCell @cell-focused="onCellFocused">Data 21</VDataGridCell>
        <VDataGridCell @cell-focused="onCellFocused">Data 22</VDataGridCell>
        <VDataGridCell @cell-focused="onCellFocused">Data 23</VDataGridCell>
      </VDataGridRow>
    </VDataGrid>

</template>

<vwc-button label="No Tabbing" onclick="changeTabbing(true)" class="button" appearance="filled"></vwc-button>
<vwc-button label="Tabbing" onclick="changeTabbing(false)" class="button"></vwc-button>

<div id="active-element-content-display">
  <p>
    Hit <code>TAB</code> key to browse the tab queue. When in `no-tabbing` mode, grid will never be focused.
  </p>
  <div>
    Grid: <span id="active-element-content">Not Focused</span>
  </div>
  <div>
    Focused Cell Content: <span id="focused-cell-content"></span>
  </div>
</div>

<vwc-data-grid no-tabbing class="data-grid">
  <vwc-data-grid-row row-type="header">
    <vwc-data-grid-cell cell-type="columnheader">Data 1</vwc-data-grid-cell>
    <vwc-data-grid-cell cell-type="columnheader">Data 2</vwc-data-grid-cell>
    <vwc-data-grid-cell cell-type="columnheader">Data 3</vwc-data-grid-cell>
  </vwc-data-grid-row>
  <vwc-data-grid-row>
    <vwc-data-grid-cell>Data 11</vwc-data-grid-cell>
    <vwc-data-grid-cell>Data 12</vwc-data-grid-cell>
    <vwc-data-grid-cell>Data 13</vwc-data-grid-cell>
  </vwc-data-grid-row>
  <vwc-data-grid-row>
    <vwc-data-grid-cell>Data 21</vwc-data-grid-cell>
    <vwc-data-grid-cell>Data 22</vwc-data-grid-cell>
    <vwc-data-grid-cell>Data 23</vwc-data-grid-cell>
  </vwc-data-grid-row>
</vwc-data-grid>

<script>
  const grid = document.querySelector('.data-grid');

  function changeTabbing(tabbing) {
    event.currentTarget.appearance = 'filled';
    Array.from(event.currentTarget.parentElement.querySelectorAll('.button')).filter((x) => x !== event.currentTarget)[0].appearance = null;
    grid.noTabbing = tabbing;
  }

  grid.addEventListener('focusin', () => {
    document.getElementById('active-element-content').innerText = 'Focused';
  });
  grid.addEventListener('focusout', () => {
    document.getElementById('active-element-content').innerText = 'Not Focused';
    document.getElementById('focused-cell-content').innerText = '';
  });
  grid.addEventListener('cell-focused', (e) => {
    document.getElementById('focused-cell-content').innerText = e.detail.innerText;
  });
</script>

Setting Focus on a Cell

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.

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

const focusRowIndex = ref(0);
const focusColumnIndex = ref(0);

const rowsData = [
  { data1: 'data11', data2: 'data12', data3: 'data13' },
  { data1: 'data21', data2: 'data22', data3: 'data23' },
  { data1: 'data31', data2: 'data32', data3: 'data33' },
  { data1: 'data41', data2: 'data42', data3: 'data43' },
];
</script>

<template>
  <VNumberField v-model:value-as-number="focusRowIndex" label="Row index" :min="0" :max="5" />
  <VNumberField v-model:value-as-number="focusColumnIndex" label="Column index" :min="0" :max="2" />
  <VDataGrid :rows-data="rowsData" :focus-row-index="focusRowIndex" :focus-column-index="focusColumnIndex" />
</template>

<vwc-number-field label="Row index" id="row-index" min="0" value="0" max="5"></vwc-number-field>
<vwc-number-field label="Column index" id="col-index" min="0" value="0" max="2"></vwc-number-field>
<vwc-data-grid></vwc-data-grid>
<script>
  const activeRow = document.getElementById('row-index');
  const activeCol = document.getElementById('col-index');

    activeRow.addEventListener('change', changeActiveRow);
    function changeActiveRow() {
      grid.focusRowIndex = Number(activeRow.value);
    }

    activeCol.addEventListener('change', changeActiveCol);
    function changeActiveCol() {
      grid.focusColumnIndex = Number(activeCol.value);
    }

    grid = document.querySelector('vwc-data-grid');
    grid.rowsData = [
      { data1: 'data11', data2: 'data12', data3: 'data13' },
      { data1: 'data21', data2: 'data22', data3: 'data23' },
      { data1: 'data31', data2: 'data32', data3: 'data33' },
      { data1: 'data41', data2: 'data42', data3: 'data43' },
    ];

</script>

Cell Click Event

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 }

<script setup lang="ts">
import { ref } from 'vue';
import { VDataGrid, type VEvents } from '@vonage/vivid-api-vue';
import type { VwcDataGridCellElement, VwcDataGridRowElement } from '@vonage/vivid-api';

const columnDefinitions = [
{ columnDataKey: 'data1', title: 'Column 1' },
{ columnDataKey: 'data2', title: 'Column 2' },
];

const rowsData = [
{ data1: 'data11', data2: 'data12' },
{ data1: 'data21', data2: 'data22' },
];

const clickResult = ref('');

function onCellClick(e: VEvents['VDataGrid']['cell-click']) {
const { cell, row, isHeaderCell } = e.detail;
const gridCell = cell as VwcDataGridCellElement;
const gridRow = row as VwcDataGridRowElement;
clickResult.value = `${gridCell.textContent} Col #${gridCell.gridColumn}, Row Index${gridRow.rowIndex}${isHeaderCell ? ': Grid Header Cell' : ''}`;
}

</script>

<template>
  <VDataGrid class="data-grid" :column-definitions="columnDefinitions" :rows-data="rowsData" @cell-click="onCellClick" />
  <br />
  <div>
    Cell Clicked: <span id="click-result">{{ clickResult }}</span>
  </div>
</template>

<vwc-data-grid class="data-grid"></vwc-data-grid>
<br />
<div>Cell Clicked: <span id="click-result"></span></div>

<script>
  const grid = document.querySelector('.data-grid');
  const clickResult = document.getElementById('click-result');
  grid.columnDefinitions = [
    { columnDataKey: 'data1', title: 'Column 1' },
    { columnDataKey: 'data2', title: 'Column 2' },
  ];
  grid.rowsData = [
    { data1: 'data11', data2: 'data12' },
    { data1: 'data21', data2: 'data22' },
  ];

  grid.addEventListener('cell-click', (e) => {
    const { cell, row, columnDataKey, isHeaderCell } = e.detail;

    let result = `${cell.textContent} Col #${cell.gridColumn}, Row Index${row.rowIndex}`;
    if (isHeaderCell) result += ': Grid Header Cell';

    clickResult.innerHTML = result;
  });
</script>

Rows Data

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.

The rowsData property provides an alternative way to populate the data grid with content.

However, we recommend using the Data Grid Row and Data Grid Cell sub-components to construct the content declaratively. This approach offers greater flexibility, allowing you to incorporate non-text-based elements such as other components or HTML elements (see Select in grid use case).

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

const rowsData = [
  { data1: 'data11', data2: 'data12' },
  { data1: 'data21', data2: 'data22' },
];
</script>

<template>
  <VDataGrid class="data-grid" :rows-data="rowsData" />
</template>

<vwc-data-grid class="data-grid"></vwc-data-grid>

<script>
  grid = document.querySelector('.data-grid');
  grid.rowsData = [
    { data1: 'data11', data2: 'data12' },
    { data1: 'data21', data2: 'data22' },
  ];
</script>

Column Definitions

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

The sortable feature doesn’t actually sort the data, it only changes the visual representation of the column header. See the sorting use case for more information.

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

const columnDefinitions = [
  {
    columnDataKey: 'data1',
    title: 'Custom Title 1',
    sortable: true,
    sortDirection: 'ascending',
  },
  { columnDataKey: 'data2', title: 'Custom Title 2', sortable: true },
];

const rowsData = [
  { data1: 'data11', data2: 'data12' },
  { data1: 'data21', data2: 'data22' },
];
</script>

<template>
  <VDataGrid :column-definitions="columnDefinitions" :rows-data="rowsData" />
</template>

<vwc-data-grid></vwc-data-grid>
<script>
  grid = document.querySelector('vwc-data-grid');
  grid.columnDefinitions = [
    {
      columnDataKey: 'data1',
      title: 'Custom Title 1',
      sortable: true,
      sortDirection: 'ascending',
    },
    { columnDataKey: 'data2', title: 'Custom Title 2', sortable: true },
  ];
  grid.rowsData = [
    { data1: 'data11', data2: 'data12' },
    { data1: 'data21', data2: 'data22' },
  ];
</script>

Generate Header

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

<script setup lang="ts">
import { ref } from 'vue';
import { VSelect, VOption, VDataGrid, type VProps } from '@vonage/vivid-api-vue';

const generateHeader = ref<VProps['VDataGrid']['generateHeader']>('default');

const rowsData = [
{ data1: 'data111', data2: 'data12' },
{ data1: 'data21', data2: 'data22' },
{ data1: 'data31', data2: 'data32' },
{ data1: 'data41', data2: 'data42' },
{ data1: 'data51', data2: 'data52' },
{ data1: 'data61', data2: 'data62' },
];

</script>

<template>
  <VSelect v-model="generateHeader">
    <VOption value="default" text="default" />
    <VOption value="sticky" text="sticky" />
    <VOption value="none" text="none" />
  </VSelect>

    <VDataGrid class="data-grid" :rows-data="rowsData" :generate-header="generateHeader" />

</template>

<style scoped>
.data-grid {
  max-block-size: 300px;
}
</style>

<vwc-select onchange="changeHeader()">
  <vwc-option value="default" text="default"></vwc-option>
  <vwc-option value="sticky" text="sticky"></vwc-option>
  <vwc-option value="none" text="none"></vwc-option>
</vwc-select>

<vwc-data-grid class="data-grid"></vwc-data-grid>

<script>
  const grid = document.querySelector('vwc-data-grid');

  function changeHeader() {
    headerType = event.currentTarget.value;
    grid.generateHeader = headerType;
  }

  grid.rowsData = [
    { data1: 'data111', data2: 'data12' },
    { data1: 'data21', data2: 'data22' },
    { data1: 'data31', data2: 'data32' },
    { data1: 'data41', data2: 'data42' },
    { data1: 'data51', data2: 'data52' },
    { data1: 'data61', data2: 'data62' },
  ];
</script>

<style>
  vwc-data-grid {
    max-block-size: 300px;
  }
</style>

Row, Cell and Header Cell Templates

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>

Row Element Tag

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.

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

const rowsData = [
{ data1: 'data11', data2: 'data12' },
{ data1: 'data21', data2: 'data22' },
];

</script>

<template>
  <VDataGrid :rows-data="rowsData" row-element-tag="div" />
</template>

<vwc-data-grid></vwc-data-grid>
<script>
  grid = document.querySelector('vwc-data-grid');
  grid.rowElementTag = 'div';
  grid.rowsData = [
    { data1: 'data11', data2: 'data12' },
    { data1: 'data21', data2: 'data22' },
  ];
</script>

CSS Variables

Row Background

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.

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

const rowsData = [
{ data1: 'data111', data2: 'data12' },
{ data1: 'data21', data2: 'data22' },
{ data1: 'data31', data2: 'data32' },
{ data1: 'data41', data2: 'data42' },
{ data1: 'data51', data2: 'data52' },
{ data1: 'data61', data2: 'data62' },
];

</script>

<template>
  <VDataGrid class="data-grid" :rows-data="rowsData" generate-header="sticky" />
</template>

<style scoped>
.data-grid {
  --data-grid-row-background: var(--vvd-color-neutral-50);
}
</style>

<vwc-data-grid class="data-grid"></vwc-data-grid>

<style>
  .data-grid {
    --data-grid-row-background: var(--vvd-color-neutral-50);
  }
</style>

<script>
  const grid = document.querySelector('vwc-data-grid');
  grid.generateHeader = 'sticky';
  grid.rowsData = [
    { data1: 'data111', data2: 'data12' },
    { data1: 'data21', data2: 'data22' },
    { data1: 'data31', data2: 'data32' },
    { data1: 'data41', data2: 'data42' },
    { data1: 'data51', data2: 'data52' },
    { data1: 'data61', data2: 'data62' },
  ];
</script>

Cell Background

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.

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

const rowsData = [
{
team: 'Ironhill United',
played: 5,
won: 4,
drawn: 1,
lost: 0,
goalsFor: 12,
goalsAgainst: 4,
points: 13,
},
{
team: 'Crimson Valley FC',
played: 5,
won: 3,
drawn: 1,
lost: 1,
goalsFor: 9,
goalsAgainst: 6,
points: 10,
},
{
team: 'Stormridge City',
played: 5,
won: 2,
drawn: 2,
lost: 1,
goalsFor: 7,
goalsAgainst: 5,
points: 8,
},
{
team: 'Eastbridge Rovers',
played: 5,
won: 1,
drawn: 1,
lost: 3,
goalsFor: 5,
goalsAgainst: 11,
points: 4,
},
{
team: 'Shadowmere FC',
played: 5,
won: 0,
drawn: 1,
lost: 4,
goalsFor: 3,
goalsAgainst: 10,
points: 1,
},
];

</script>

<template>
  <VDataGrid class="data-grid" :rows-data="rowsData" :fixed-columns="1" grid-template-columns="2fr repeat(7, 1fr)" />
</template>

<style scoped>
.data-grid {
  --data-grid-cell-background: var(--vvd-color-neutral-50);
}
:deep([data-vvd-component='data-grid-row']) {
  width: 1200px;
  display: block;
  box-sizing: border-box;
}
</style>

<vwc-data-grid class="data-grid"></vwc-data-grid>

<style>
  .data-grid {
    --data-grid-cell-background: var(--vvd-color-neutral-50);
  }
  [data-vvd-component='data-grid-row'] {
    width: 1200px;
    display: block;
    box-sizing: border-box;
  }
</style>

<script>
  const grid = document.querySelector('vwc-data-grid');
  grid.fixedColumns = '1';
  grid.gridTemplateColumns = '2fr repeat(7, 1fr)';
  grid.rowsData = [
    {
      team: 'Ironhill United',
      played: 5,
      won: 4,
      drawn: 1,
      lost: 0,
      goalsFor: 12,
      goalsAgainst: 4,
      points: 13,
    },
    {
      team: 'Crimson Valley FC',
      played: 5,
      won: 3,
      drawn: 1,
      lost: 1,
      goalsFor: 9,
      goalsAgainst: 6,
      points: 10,
    },
    {
      team: 'Stormridge City',
      played: 5,
      won: 2,
      drawn: 2,
      lost: 1,
      goalsFor: 7,
      goalsAgainst: 5,
      points: 8,
    },
    {
      team: 'Eastbridge Rovers',
      played: 5,
      won: 1,
      drawn: 1,
      lost: 3,
      goalsFor: 5,
      goalsAgainst: 11,
      points: 4,
    },
    {
      team: 'Shadowmere FC',
      played: 5,
      won: 0,
      drawn: 1,
      lost: 4,
      goalsFor: 3,
      goalsAgainst: 10,
      points: 1,
    },
  ];
</script>

Block Size

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.

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

<template>
  <VDataGrid>
    <VDataGridRow row-type="header">
      <VDataGridCell cell-type="columnheader"> Column 1 </VDataGridCell>
    </VDataGridRow>
    <VDataGridRow>
      <VDataGridCell> Dynamic height (default) </VDataGridCell>
    </VDataGridRow>
    <VDataGridRow class="fixed-height">
      <VDataGridCell> Fixed height </VDataGridCell>
    </VDataGridRow>
  </VDataGrid>
</template>

<style scoped>
.fixed-height {
  --data-grid-cell-block-size: 100px;
}
</style>

<vwc-data-grid>
  <vwc-data-grid-row row-type="header">
    <vwc-data-grid-cell cell-type="columnheader"> Column 1 </vwc-data-grid-cell>
  </vwc-data-grid-row>
  <vwc-data-grid-row>
    <vwc-data-grid-cell> Dynamic height (default) </vwc-data-grid-cell>
  </vwc-data-grid-row>
  <vwc-data-grid-row class="fixed-height">
    <vwc-data-grid-cell> Fixed height </vwc-data-grid-cell>
  </vwc-data-grid-row>
</vwc-data-grid>

<style>
  .fixed-height {
    --data-grid-cell-block-size: 100px;
  }
</style>

White Space

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

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

<template>
  <VDataGrid>
    <VDataGridRow row-type="header">
      <VDataGridCell cell-type="columnheader"> Column 1 </VDataGridCell>
    </VDataGridRow>
    <VDataGridRow>
      <VDataGridCell> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin varius libero ipsum, ut rhoncus nulla varius sit amet. Vestibulum volutpat feugiat neque eget semper. Nam commodo pharetra lobortis. Sed id enim metus. </VDataGridCell>
    </VDataGridRow>
    <VDataGridRow class="nowrap">
      <VDataGridCell> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin varius libero ipsum, ut rhoncus nulla varius sit amet. Vestibulum volutpat feugiat neque eget semper. Nam commodo pharetra lobortis. Sed id enim metus. </VDataGridCell>
    </VDataGridRow>
  </VDataGrid>
</template>

<style scoped>
.nowrap {
  --data-grid-cell-white-space: nowrap;
}
</style>

<vwc-data-grid>
  <vwc-data-grid-row row-type="header">
    <vwc-data-grid-cell cell-type="columnheader"> Column 1 </vwc-data-grid-cell>
  </vwc-data-grid-row>
  <vwc-data-grid-row>
    <vwc-data-grid-cell> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin varius libero ipsum, ut rhoncus nulla varius sit amet. Vestibulum volutpat feugiat neque eget semper. Nam commodo pharetra lobortis. Sed id enim metus. </vwc-data-grid-cell>
  </vwc-data-grid-row>
  <vwc-data-grid-row class="nowrap">
    <vwc-data-grid-cell> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin varius libero ipsum, ut rhoncus nulla varius sit amet. Vestibulum volutpat feugiat neque eget semper. Nam commodo pharetra lobortis. Sed id enim metus. </vwc-data-grid-cell>
  </vwc-data-grid-row>
</vwc-data-grid>

<style>
  .nowrap {
    --data-grid-cell-white-space: nowrap;
  }
</style>

API Reference

data-grid

Properties

Property	Type	Description
cellItemTemplate	`@microsoft/fast-element#ViewTemplate<any, any>`	Templete to use when rendering cells
columnDefinitions	`{columnDataKey: string; gridColumn?: string; title?: string; headerCellTemplate?: @microsoft/fast-element#ViewTemplate<any, any>; headerCellInternalFocusQueue?: false \| true; headerCellFocusTargetCallback?: ((cell: @vonage/vivid-api#VwcDataGridCellElement) => HTMLElement); cellTemplate?: @microsoft/fast-element#ViewTemplate<any, any>; cellInternalFocusQueue?: false \| true; cellFocusTargetCallback?: ((cell: @vonage/vivid-api#VwcDataGridCellElement) => HTMLElement); isRowHeader?: false \| true}[]`	Configure the grid header columns
fixedColumns	`number`	Sets the number of columns fixed to the left when horizontal scrolling
focusColumnIndex	`number`	Index of column to be focused on when the Data Grid receives focus
focusRowIndex	`number`	Index of row to be focused on when the Data Grid receives focus
generateHeader	`'none' \| 'default' \| 'sticky'`	Whether the grid should automatically generate a header row and its type
gridTemplateColumns	`string`	String that gets applied to the css gridTemplateColumns attribute of child rows
headerCellItemTemplate	`@microsoft/fast-element#ViewTemplate<any, any>`	Templete to use when rendering grid header cells
noTabbing	`boolean`	Remove the grid from the tab order
rowElementTag	`string`	Element tag for header rows
rowItemTemplate	`@microsoft/fast-element#ViewTemplate<any, any>`	Templete to use when rendering rows
rowsData	`object[]`	Content of the grid in data format
selectionMode	`'none' \| 'single-row' \| 'multi-row' \| 'single-cell' \| 'multi-cell'`	Set the selection mode

Property	Type	Description
cellItemTemplate (property only)	`@microsoft/fast-element#ViewTemplate<any, any>`	Templete to use when rendering cells
columnDefinitions (property only)	`{columnDataKey: string; gridColumn?: string; title?: string; headerCellTemplate?: @microsoft/fast-element#ViewTemplate<any, any>; headerCellInternalFocusQueue?: false \| true; headerCellFocusTargetCallback?: ((cell: @vonage/vivid-api#VwcDataGridCellElement) => HTMLElement); cellTemplate?: @microsoft/fast-element#ViewTemplate<any, any>; cellInternalFocusQueue?: false \| true; cellFocusTargetCallback?: ((cell: @vonage/vivid-api#VwcDataGridCellElement) => HTMLElement); isRowHeader?: false \| true}[]`	Configure the grid header columns
fixed-columns	`number`	Sets the number of columns fixed to the left when horizontal scrolling
focusColumnIndex (property only)	`number`	Index of column to be focused on when the Data Grid receives focus
focusRowIndex (property only)	`number`	Index of row to be focused on when the Data Grid receives focus
generate-header	`'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
headerCellItemTemplate (property only)	`@microsoft/fast-element#ViewTemplate<any, any>`	Templete to use when rendering grid header cells
no-tabbing	`boolean`	Remove the grid from the tab order
rowElementTag (property only)	`string`	Element tag for header rows
rowItemTemplate (property only)	`@microsoft/fast-element#ViewTemplate<any, any>`	Templete to use when rendering rows
rowsData (property only)	`object[]`	Content of the grid in data format
selection-mode	`'none' \| 'single-row' \| 'multi-row' \| 'single-cell' \| 'multi-cell'`	Set the selection mode

Slots

Name	Description
default	Default slot.

Name	Description
default	Default slot.

Events

Name	Type	Description
cell-click	`CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>`	Event that fires when a cell is clicked

Name	Type	Description
cell-click	`CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>`	Event that fires when a cell is clicked

data-grid-row

Properties

Property	Type	Description
cellItemTemplate	`@microsoft/fast-element#ViewTemplate<any, any>`	The template used to render cells in generated rows.
columnDefinitions	`{columnDataKey: string; gridColumn?: string; title?: string; headerCellTemplate?: @microsoft/fast-element#ViewTemplate<any, any>; headerCellInternalFocusQueue?: false \| true; headerCellFocusTargetCallback?: ((cell: @vonage/vivid-api#VwcDataGridCellElement) => HTMLElement); cellTemplate?: @microsoft/fast-element#ViewTemplate<any, any>; cellInternalFocusQueue?: false \| true; cellFocusTargetCallback?: ((cell: @vonage/vivid-api#VwcDataGridCellElement) => HTMLElement); isRowHeader?: false \| true}[]`	The column definitions of the row
gridTemplateColumns	`string`	String that gets applied to the the css gridTemplateColumns attribute for the row x
headerCellItemTemplate	`@microsoft/fast-element#ViewTemplate<any, any>`	The template used to render header cells in generated rows.
rowData	`object`	The base data for this row
rowIndex	`number`	The index of the row in the parent grid. This is typically set programmatically by the parent grid.
rowType	`'header' \| 'default' \| 'sticky-header'`	The type of row
selected	`false \| true`	Reflects selected state of the row

Property	Type	Description
cellItemTemplate (property only)	`@microsoft/fast-element#ViewTemplate<any, any>`	The template used to render cells in generated rows.
columnDefinitions (property only)	`{columnDataKey: string; gridColumn?: string; title?: string; headerCellTemplate?: @microsoft/fast-element#ViewTemplate<any, any>; headerCellInternalFocusQueue?: false \| true; headerCellFocusTargetCallback?: ((cell: @vonage/vivid-api#VwcDataGridCellElement) => HTMLElement); cellTemplate?: @microsoft/fast-element#ViewTemplate<any, any>; cellInternalFocusQueue?: false \| true; cellFocusTargetCallback?: ((cell: @vonage/vivid-api#VwcDataGridCellElement) => HTMLElement); isRowHeader?: false \| true}[]`	The column definitions of the row
grid-template-columns	`string`	String that gets applied to the the css gridTemplateColumns attribute for the row x
headerCellItemTemplate (property only)	`@microsoft/fast-element#ViewTemplate<any, any>`	The template used to render header cells in generated rows.
rowData (property only)	`object`	The base data for this row
rowIndex (property only)	`number`	The index of the row in the parent grid. This is typically set programmatically by the parent grid.
row-type	`'header' \| 'default' \| 'sticky-header'`	The type of row
selected	`false \| true`	Reflects selected state of the row

Slots

Name	Description
default	Default slot.

Name	Description
default	Default slot.

Events

Name	Type	Description
cell-click	`CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>`	Event that fires when a cell is clicked
row-focused	`CustomEvent<HTMLElement>`	Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row

Name	Type	Description
cell-click	`CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>`	Event that fires when a cell is clicked
row-focused	`CustomEvent<HTMLElement>`	Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row

data-grid-cell

Properties

Property	Type	Description
cellType	`'default' \| 'columnheader' \| 'rowheader'`	The type of cell
columnDefinition	{sortDirection?: null \| 'none' \| 'ascending' \| 'descending' \| 'other'; sortable?: false \| true; columnDataKey: string; gridColumn?: string; title?: string; headerCellTemplate?: @microsoft/fast-element#ViewTemplate<any, any>; headerCellInternalFocusQueue?: false \| true; headerCellFocusTargetCallback?: ((cell: @vonage/vivid-api#VwcDataGridCellElement) => HTMLElement); cellTemplate?: @microsoft/fast-element#ViewTemplate<any, any>; cellInternalFocusQueue?: false \| true; cellFocusTargetCallback?: ((cell: @vonage/vivid-api#VwcDataGridCellElement) => HTMLElement); isRowHeader?: false \| true}	The base data for the column
gridColumn	`string`	The column index of the cell. This will be applied to the css grid-column-index value applied to the cell
rowData	`object`	The base data for the parent row
selected	`boolean`	Reflects selected state of the row
sortDirection	`'none' \| 'ascending' \| 'descending' \| 'other'`	Sets the sorting direction.

Property	Type	Description
cell-type	`'default' \| 'columnheader' \| 'rowheader'`	The type of cell
columnDefinition (property only)	{sortDirection?: null \| 'none' \| 'ascending' \| 'descending' \| 'other'; sortable?: false \| true; columnDataKey: string; gridColumn?: string; title?: string; headerCellTemplate?: @microsoft/fast-element#ViewTemplate<any, any>; headerCellInternalFocusQueue?: false \| true; headerCellFocusTargetCallback?: ((cell: @vonage/vivid-api#VwcDataGridCellElement) => HTMLElement); cellTemplate?: @microsoft/fast-element#ViewTemplate<any, any>; cellInternalFocusQueue?: false \| true; cellFocusTargetCallback?: ((cell: @vonage/vivid-api#VwcDataGridCellElement) => HTMLElement); isRowHeader?: false \| true}	The base data for the column
grid-column	`string`	The column index of the cell. This will be applied to the css grid-column-index value applied to the cell
rowData (property only)	`object`	The base data for the parent row
selected	`boolean`	Reflects selected state of the row
sort-direction	`'none' \| 'ascending' \| 'descending' \| 'other'`	Sets the sorting direction.

Slots

Name	Description
action-items	Add action items to the cell using this slot.
default	Default slot.

Name	Description
action-items	Add action items to the cell using this slot.
default	Default slot.

Events

Name	Type	Description
cell-click	`CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>`	Event that fires when a cell is clicked
cell-focused	`CustomEvent<HTMLElement>`	Fires a custom 'cell-focused' event when focus is on the cell or its contents
sort	`CustomEvent<{columnDataKey: string, ariaSort: string \| null, sortDirection: string \| null}>`	Event that fires when a sortable column header is clicked

Name	Type	Description
cell-click	`CustomEvent<{cell: HTMLElement, row: HTMLElement, isHeaderCell: boolean, columnDataKey: string}>`	Event that fires when a cell is clicked
cell-focused	`CustomEvent<HTMLElement>`	Fires a custom 'cell-focused' event when focus is on the cell or its contents
sort	`CustomEvent<{columnDataKey: string, ariaSort: string \| null, sortDirection: string \| null}>`	Event that fires when a sortable column header is clicked