Table

Typed table, stacks on mobile

Data to read and compare in rows and columns. When people need to sort, search, page or select, use DataTable.

Basic

On Air

放送局	曜日	時間	備考
TOKYO MX	木	24:00	先行
とちぎテレビ	木	24:00
BS11	金	23:30	全国
AbemaTV	木	24:00	配信

<script setup lang="ts">
import { BlessBadge, BlessTable, type BlessColumn } from "blessing-ui";
type Row = { station: string; day: string; time: string; note: string };
const columns: BlessColumn<Row>[] = [
  { key: "station", label: "放送局", header: true },
  { key: "day", label: "曜日" },
  { key: "time", label: "時間", align: "right" },
  { key: "note", label: "備考" },
];
const rows: Row[] = [
  { station: "TOKYO MX", day: "木", time: "24:00", note: "先行" },
  { station: "とちぎテレビ", day: "木", time: "24:00", note: "" },
  { station: "BS11", day: "金", time: "23:30", note: "全国" },
  { station: "AbemaTV", day: "木", time: "24:00", note: "配信" },
];
</script>

<template>
  <BlessTable :columns :rows row-key="station" caption="On Air" striped style="max-width: 640px">
    <template #cell-note="{ value }">
      <BlessBadge v-if="value" color="text">{{ value }}</BlessBadge>
    </template>
  </BlessTable>
</template>

• Mark one column header: true so each row is named by it (a row header).
• stack (on by default) turns rows into label/value pairs under 800px instead of scrolling sideways; the table keeps its table semantics either way.
• caption (or #caption) names the table; #cell-<key> renders one column's cells yourself.

Usage

import { BlessTable } from "blessing-ui";

API

Props

Name	Type	Default	Description
columns*	BlessColumn<T>[]	—
rows*	T[]	—
rowKey	(keyof T & string)	—
caption	string	—
stack	boolean	true	stack rows into label/value pairs under 800px
striped	boolean	false

Slots

Name	Scope	Description
caption	—
head	{ column: BlessColumn<T>; }
cell	{ row: T; column: BlessColumn<T>; value: T[keyof T & string]; index: number; }
foot	—