Rows of data, with the parts a hand-written <table> leaves out.
Import it from rei-kit:
import { BaseTable } from 'rei-kit'
Open BaseTable in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { BaseTable } from 'rei-kit'
const columns = [
{ key: 'date', label: 'Date' },
{ key: 'amount', label: 'Amount', align: 'end' },
] as const
const rows = [
{ id: 1, date: '12 Sep', amount: 320 },
{ id: 2, date: '14 Sep', amount: 1250 },
]
</script>
<template>
<BaseTable :columns="columns" :rows="rows" caption="Recent payments" row-key="id">
<template #amount="{ value }">{{ value }} ₺</template>
</BaseTable>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
columns | readonly Column<Row>[] | yes | |
rows | readonly Row[] | yes | |
caption | string | yes | What this table is. Required — an unnamed table is a box of numbers. |
captionHidden | boolean | false | Keeps the caption for assistive tech when the page already shows a heading. |
rowKey | (string & keyof Row) | Which field identifies a row. Falls back to the index. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.