Table

Desktop-grade data table for structured data display, with sorting, stripes, and custom cell rendering.

Basic Usage

Define columns with columns and pass data with data.

Name	Age	City
Alice	28	New York
Bob	32	London
Charlie	24	Tokyo
Diana	35	Berlin

<script setup>
const columns = [
  { label: 'Name', key: 'name', sortable: true },
  { label: 'Age', key: 'age', align: 'right' },
  { label: 'City', key: 'city' }
]

const data = [
  { id: 1, name: 'Alice', age: 28, city: 'New York' },
  { id: 2, name: 'Bob', age: 32, city: 'London' }
]
</script>

<ATable :columns="columns" :data="data" />

Striped

Set stripe for alternating row backgrounds.

Name	Age	City
Alice	28	New York
Bob	32	London
Charlie	24	Tokyo
Diana	35	Berlin

<ATable :columns="columns" :data="data" stripe />

Compact

Set size="sm" for compact mode with smaller row height.

Name	Age	City
Alice	28	New York
Bob	32	London
Charlie	24	Tokyo
Diana	35	Berlin

<ATable :columns="columns" :data="data" size="sm" />

Bordered

Set bordered to show column borders.

Name	Age	City
Alice	28	New York
Bob	32	London
Charlie	24	Tokyo
Diana	35	Berlin

<ATable :columns="columns" :data="data" bordered />

Custom Cells

Use named slots for custom cell rendering.

Name	Age	City
Alice	28 yo	New York
Bob	32 yo	London
Charlie	24 yo	Tokyo
Diana	35 yo	Berlin

<ATable :columns="columns" :data="data">
  <template #name="{ row }">
    <strong>{{ row.name }}</strong>
  </template>
  <template #age="{ value }">
    <span style="color: var(--color-accent);">{{ value }} yo</span>
  </template>
</ATable>

Loading

Set loading to show a loading overlay.

Name	Age	City
Alice	28	New York
Bob	32	London
Charlie	24	Tokyo
Diana	35	Berlin

<ATable :columns="columns" :data="data" loading />

API

Props

Name	Type	Default	Description
columns	TableColumn[]	—	Column definitions
data	Record<string, any>[]	—	Data source
stripe	boolean	false	Striped rows
bordered	boolean	false	Column borders
size	'sm' | 'md'	'md'	Size
loading	boolean	false	Loading state
rowKey	string	'id'	Row unique key field

Column Definition

Property	Type	Description
label	string	Column header
key	string	Field name, also used for named slot
sortable	boolean	Sortable
width	string	Column width
align	'left' | 'center' | 'right'	Text alignment

Slots

Named slots by column.key with { row, value } scope.

Events

Name	Parameters	Description
sortChange	{ key, order }	Sort changed

Interaction

• Click header to sort, three-state cycle (asc → desc → none)
• Sort indicator icon changes color with state
• Row hover highlight
• Loading overlay on loading state
• Empty data friendly message
• Compact mode for dense desktop scenarios