Table

Data

A styled data table with sortable columns, striped rows, and hover states.

Props

Prop	Type	Default	Description
`columns`*	`DsTableColumn[]`	—	Array of { key, label, align?, width?, sortable? }.
`rows`*	`Record<string, unknown>[]`	—	Data rows — each object key must match a column key.
`striped`	`boolean`	`false`	Alternating row backgrounds.
`hoverable`	`boolean`	`true`	Highlight row on hover.
`dense`	`boolean`	`false`	Compact cell padding.
`bordered`	`boolean`	`false`	Show outer border.
`caption`	`string`	—	Accessible table caption.
`sortBy`	`string`	—	Currently sorted column key.
`sortDir`	`'asc' \| 'desc'`	`'asc'`	Sort direction.

Examples

Default

NameAntoine Gourgue

RoleStaff Engineer

StatusActive

NameMarie Dupont

RoleDesigner

StatusActive

NameLuc Martin

RoleProduct Manager

StatusAway

NameSophie Bernard

RoleFrontend Dev

StatusOffline

Name	Role	Status
Antoine Gourgue	Staff Engineer	Active
Marie Dupont	Designer	Active
Luc Martin	Product Manager	Away
Sophie Bernard	Frontend Dev	Offline

vue

<script setup lang="ts">
const columns = [
  { key: 'name',   label: 'Name',   sortable: true },
  { key: 'role',   label: 'Role' },
  { key: 'status', label: 'Status', align: 'center' },
]
const rows = [
  { name: 'Antoine Gourgue', role: 'Staff Engineer',   status: 'Active' },
  { name: 'Marie Dupont',    role: 'Designer',          status: 'Active' },
  { name: 'Luc Martin',      role: 'Product Manager',   status: 'Away'   },
]
</script>

<template>
  <DsTable :columns="columns" :rows="rows" striped hoverable />
</template>

Striped + Dense

NameAntoine Gourgue

RoleStaff Engineer

StatusActive

NameMarie Dupont

RoleDesigner

StatusActive

NameLuc Martin

RoleProduct Manager

StatusAway

NameSophie Bernard

RoleFrontend Dev

StatusOffline

Name	Role	Status
Antoine Gourgue	Staff Engineer	Active
Marie Dupont	Designer	Active
Luc Martin	Product Manager	Away
Sophie Bernard	Frontend Dev	Offline

vue

<DsTable :columns="columns" :rows="rows" striped />

Skeleton

Use DsTableSkeleton as a loading placeholder while content is being fetched.

Default (4×4)

vue

<DsTableSkeleton />

Dense

vue

<DsTableSkeleton
  dense
  :rows="5"
/>

Wide (6 cols)

vue

<DsTableSkeleton :columns="6" />

Accessibility

Uses semantic <table>, <thead>, <tbody>, <th>, <td> elements.
Sortable column headers include aria-sort (implement manually via sortBy/sortDir).
Keyboard focusable sort buttons.

Stepper

VirtualList