Table — Data display

Tables

Structured tabular data with bordered, striped, hoverable, and compact styles, plus responsive horizontal scrolling for wide datasets.

Bordered Table

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Mike Johnson	mike@example.com	User

<!-- Bordered Table -->
<table class="vd-table vd-table-bordered">
  <thead>
    <tr><th>Name</th><th>Email</th><th>Role</th></tr>
  </thead>
  <tbody>
    <tr><td>John Doe</td><td>john@example.com</td><td>Admin</td></tr>
    <tr><td>Jane Smith</td><td>jane@example.com</td><td>User</td></tr>
    <tr><td>Mike Johnson</td><td>mike@example.com</td><td>User</td></tr>
  </tbody>
</table>

Striped Table

Product	Price	Stock
Product A	$29.99	50
Product B	$39.99	30
Product C	$49.99	20

<!-- Striped Table -->
<table class="vd-table vd-table-striped">
  <thead>
    <tr><th>Product</th><th>Price</th><th>Stock</th></tr>
  </thead>
  <tbody>
    <tr><td>Product A</td><td>$29.99</td><td>50</td></tr>
    <tr><td>Product B</td><td>$39.99</td><td>30</td></tr>
    <tr><td>Product C</td><td>$49.99</td><td>20</td></tr>
  </tbody>
</table>

Hover Table

ID	Status	Date
#001	Active	2024-01-15
#002	Pending	2024-01-16
#003	Failed	2024-01-17

<!-- Hover Table -->
<table class="vd-table vd-table-hover">
  <thead>
    <tr><th>ID</th><th>Status</th><th>Date</th></tr>
  </thead>
  <tbody>
    <tr><td>#001</td><td><span class="vd-badge vd-badge-success">Active</span></td><td>2024-01-15</td></tr>
    <tr><td>#002</td><td><span class="vd-badge vd-badge-warning">Pending</span></td><td>2024-01-16</td></tr>
    <tr><td>#003</td><td><span class="vd-badge vd-badge-danger">Failed</span></td><td>2024-01-17</td></tr>
  </tbody>
</table>

Usage

<script setup lang="ts">
import { VdTable } from "@vanduo-oss/vd3";
const columns = [
  { key: "name", label: "Name" },
  { key: "status", label: "Status", variant: "success" },
];
const rows = [{ name: "Build", status: "Passing" }];
</script>

<template>
  <VdTable :columns="columns" :rows="rows" striped hover caption="CI status" />
</template>

API Reference

Class Name	Description	Type
`.vd-table`	Base component class required for all Vanduo tables.	Component
`.vd-table-bordered`	Modifier class that adds borders to all outer boundaries and internal cells.	Modifier
`.vd-table-striped`	Modifier class that adds alternating background colors to body rows (zebra striping).	Modifier
`.vd-table-hover`	Modifier class that enables a hover background color effect on body rows.	Modifier
`.vd-table-responsive`	Wrapper class that enables horizontal scrolling on small screens.	Layout

Component API (Vue 3)

Prop	Description
`:columns`	Array of { key, label, variant? } — variant tints the column header (primary\|secondary\|success\|warning\|error\|info).
`:rows`	Array of plain row objects keyed by each column's key.
`:striped`	Zebra row striping.
`:bordered`	Cell borders.
`:hover`	Row hover highlight.
`:caption`	Accessible table caption.