Table

A set of composable components that work together in the same way as native HTML table elements.

Usage

import { VTable, VTableHead, VTableBody, VTableRow, VTableHeaderCell, VTableCell } from '@vonage/vivid-api-vue';

<template>
  <VTable>
    <VTableHead>
      <VTableRow>
        <VTableHeaderCell>Product</VTableHeaderCell>
        <VTableHeaderCell>Type</VTableHeaderCell>
        <VTableHeaderCell>Threshold</VTableHeaderCell>
      </VTableRow>
    </VTableHead>
    <VTableBody>
      <VTableRow>
        <VTableCell>SMS</VTableCell>
        <VTableCell>Volumetric Changes</VTableCell>
        <VTableCell>1000</VTableCell>
      </VTableRow>
      <VTableRow>
        <VTableCell>Voice</VTableCell>
        <VTableCell>Volumetric Changes</VTableCell>
        <VTableCell>5000</VTableCell>
      </VTableRow>
    </VTableBody>
  </VTable>
</template>
<script setup lang="ts">
import { VTable, VTableHead, VTableBody, VTableRow, VTableHeaderCell, VTableCell } from '@vonage/vivid-api-vue';
</script>

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

registerTable('your-prefix');

Table Head, Table Body, Table Row, Table Header Cell, and Table Cell sub-components are registered automatically in the same function.

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

<your-prefix-table>
  <your-prefix-table-head>
    <your-prefix-table-row>
      <your-prefix-table-header-cell>Product</your-prefix-table-header-cell>
      <your-prefix-table-header-cell>Type</your-prefix-table-header-cell>
      <your-prefix-table-header-cell>Threshold</your-prefix-table-header-cell>
    </your-prefix-table-row>
  </your-prefix-table-head>
  <your-prefix-table-body>
    <your-prefix-table-row>
      <your-prefix-table-cell>SMS</your-prefix-table-cell>
      <your-prefix-table-cell>Volumetric Changes</your-prefix-table-cell>
      <your-prefix-table-cell>1000</your-prefix-table-cell>
    </your-prefix-table-row>
    <your-prefix-table-row>
      <your-prefix-table-cell>Voice</your-prefix-table-cell>
      <your-prefix-table-cell>Volumetric Changes</your-prefix-table-cell>
      <your-prefix-table-cell>5000</your-prefix-table-cell>
    </your-prefix-table-row>
  </your-prefix-table-body>
</your-prefix-table>

API Reference

table

Slots

Name	Description
default	Default slot.

Name	Description
default	Default slot.

table-cell

Slots

Name	Description
default	Default slot.

Name	Description
default	Default slot.

Events

Name	Type	Description
cell-focused	`CustomEvent<HTMLElement>`	Fires when the cell or its contents receive focus

Name	Type	Description
cell-focused	`CustomEvent<HTMLElement>`	Fires when the cell or its contents receive focus

table-header-cell

Slots

Name	Description
default	Default slot.

Name	Description
default	Default slot.

Events

Name	Type	Description
cell-focused	`CustomEvent<HTMLElement>`	Fires when the cell or its contents receive focus

Name	Type	Description
cell-focused	`CustomEvent<HTMLElement>`	Fires when the cell or its contents receive focus

table-row

Slots

Name	Description
default	Default slot.

Name	Description
default	Default slot.

table-head

Slots

Name	Description
default	Default slot.

Name	Description
default	Default slot.

table-body

Slots

Name	Description
default	Default slot.

Name	Description
default	Default slot.

table-sorting-button

Properties

Property	Type	Default	Description
direction	`'none' \| 'desc' \| 'asc'`		Current direction of the sorting

Property	Type	Default	Description
direction	`'none' \| 'desc' \| 'asc'`		Current direction of the sorting

Slots

Name	Description
default	Default slot.

Name	Description
default	Default slot.

Events

Name	Type	Description
sort	`CustomEvent<undefined>`	Emitted when sorting button is clicked.

Name	Type	Description
sort	`CustomEvent<undefined>`	Emitted when sorting button is clicked.

Methods

Name	Params	Returns	Description
toggleSort		`void`