DataTable

BaseTable with the three things a table of real data grows: a sort, a selection, and something to show while it is loading.

Import it from rei-kit/web: import { DataTable } from 'rei-kit/web'

Open DataTable in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { DataTable } from 'rei-kit/web'
import type { DataColumn, TableSort } from 'rei-kit/web'

interface Payment extends Record<string, unknown> {
  id: string
  name: string
  amount: number
}

const columns: DataColumn<Payment>[] = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'amount', label: 'Amount', align: 'end', sortable: true },
]
const rows: Payment[] = [
  { id: 'a', name: 'Ada Lovelace', amount: 4200 },
  { id: 'b', name: 'Ömer Seyfettin', amount: 120 },
]

const sort = ref<TableSort<Payment> | undefined>({ key: 'amount', direction: 'desc' })
const selected = ref<string[]>([])
</script>

<template>
  <DataTable
    v-model:sort="sort"
    v-model:selected="selected"
    :columns="columns"
    :rows="rows"
    caption="Payments"
    row-key="id"
    select-all-label="Select every payment"
    :row-label="(row) => `Select ${row.name}`"
  >
    <template #amount="{ value }">{{ value }} ₺</template>
  </DataTable>
</template>

Props

Props
Prop	Type	Required or default	What it is for
`columns`	`readonly DataColumn<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
`rowKey`	`(string & keyof Row)`	undefined	Which field identifies a row. Required for selection.
`selectAllLabel`	`string`	undefined	Given with `rowKey`, the table grows a checkbox column. Names the header one.
`rowLabel`	`((row: Row) => string)`	undefined	Names each row's checkbox from the row: `(row) => \`Select ${row.name}\``.
`manualSort`	`boolean`	false	Report the sort instead of doing it — for a server that pages the data.
`loading`	`boolean`	false	Draws skeleton rows instead of the body.
`loadingRows`	`number`	5
`stickyHeader`	`boolean`	false	Keeps the header on screen while the body scrolls under it.

About rei-kit

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.

pnpm add rei-kit · npm · GitHub