DataTable

Table + sort/search/select/paginate

Rows people sort, search, page through and pick from — an admin list, an order history. For a small table that just shows data, use Table; for cards instead of rows, DataView.

Everything runs in the browser by default — hand it the full array and it sorts, filters and slices. For large sets switch to server mode below and the table becomes a thin view over one page at a time. When rows nest, TreeTable.

Basic

Columns

✓Title

✓Aired

✓Views

✓Status

Episodes

					Status
	1	第1話 プロローグ	2017-04-01	1,200	aired
	2	第2話 運命の出会い	2017-04-02	1,658	aired
	3	第3話 フラグの立たない	2017-04-03	1,729	aired
	4	第4話 冴えない彼女	2017-04-04	1,382	aired
	5	第5話 同人誌	2017-04-05	970	aired

23 rows

5 / page10 / page25 / page50 / page

<script setup lang="ts">
import { ref } from "vue";
import {
  BlessBadge,
  BlessButton,
  BlessDataTable,
  useToast,
  type BlessDataColumn,
} from "blessing-ui";
type Ep = { id: number; title: string; air: string; views: number; status: "aired" | "upcoming" };
const titles = [
  "プロローグ",
  "運命の出会い",
  "フラグの立たない",
  "冴えない彼女",
  "同人誌",
  "夏合宿",
  "文化祭",
  "クリスマス",
];
const rows: Ep[] = Array.from({ length: 23 }, (_, i) => ({
  id: i + 1,
  title: `第${i + 1}話 ${titles[i % 8]}`,
  air: `2017-04-${String((i % 28) + 1).padStart(2, "0")}`,
  views: Math.round(1200 + Math.sin(i) * 500 + i * 37),
  status: i < 20 ? "aired" : "upcoming",
}));
const columns: BlessDataColumn<Ep>[] = [
  { key: "id", label: "#", sortable: true, width: "56px", hideable: false },
  { key: "title", label: "Title", sortable: true, header: true },
  { key: "air", label: "Aired", sortable: true },
  { key: "views", label: "Views", sortable: true, align: "right" },
  { key: "status", label: "Status" },
];
const selected = ref<Ep[]>([]);
const { toast } = useToast();
</script>

<template>
  <BlessDataTable
    :rows
    :columns
    row-key="id"
    selectable
    searchable
    :search-keys="['title', 'air']"
    :page-size="5"
    caption="Episodes"
    @update:selected="selected = $event"
  >
    <template #toolbar="{ selected: s }">
      <BlessButton
        v-if="s.length"
        size="sm"
        color="danger"
        variant="outline"
        @click="toast(`${s.length} removed`)"
        >Delete {{ s.length }}</BlessButton
      >
    </template>
    <template #cell-status="{ value }">
      <BlessBadge :color="value === 'aired' ? 'success' : 'warning'">{{ value }}</BlessBadge>
    </template>
    <template #cell-views="{ value }">{{ Number(value).toLocaleString("en-US") }}</template>
  </BlessDataTable>
</template>

Server mode

Columns

✓#

✓Title

✓Views

Episodes (server-paged)

No rows.

0 rows

5 / page10 / page25 / page50 / page

0 rows on the “server”, 0 in the DOM

<script setup lang="ts">
import { ref } from "vue";
import { BlessDataTable, type BlessDataColumn } from "blessing-ui";
type Ep = { id: number; title: string; views: number };
// pretend API: 200 rows on a server; we only ever hold one page
const db: Ep[] = Array.from({ length: 200 }, (_, i) => ({
  id: i + 1,
  title: `第${i + 1}話`,
  views: 900 + ((i * 7919) % 5000),
}));
const rows = ref<Ep[]>([]);
const total = ref(0);
const loading = ref(false);
const columns: BlessDataColumn<Ep>[] = [
  { key: "id", label: "#", sortable: true, width: "56px" },
  { key: "title", label: "Title", sortable: true, header: true },
  { key: "views", label: "Views", sortable: true, align: "right" },
];
async function fetchPage(s: {
  sortKey: string | null;
  sortDir: "asc" | "desc";
  query: string;
  page: number;
  pageSize: number;
}) {
  loading.value = true;
  await new Promise((r) => setTimeout(r, 250)); // network
  let list = db.filter((e) => !s.query || e.title.includes(s.query));
  if (s.sortKey)
    list = [...list].sort(
      (a, b) =>
        ((a[s.sortKey as keyof Ep] as number) > (b[s.sortKey as keyof Ep] as number) ? 1 : -1) *
        (s.sortDir === "asc" ? 1 : -1),
    );
  total.value = list.length;
  rows.value = list.slice((s.page - 1) * s.pageSize, s.page * s.pageSize);
  loading.value = false;
}
</script>

<template>
  <div class="col" style="max-width: 560px">
    <BlessDataTable
      :rows
      :columns
      row-key="id"
      server
      :total
      :page-size="5"
      searchable
      caption="Episodes (server-paged)"
      @state="fetchPage"
    />
    <small>{{
      loading ? "loading…" : `${total} rows on the “server”, ${rows.length} in the DOM`
    }}</small>
  </div>
</template>

Server mode — pass server and total; the rows you give are the current page, and every sort / search / page / page-size change emits state for you to fetch with. Nothing is sorted or sliced on the client.

• Client mode sorts, filters and pages rows itself. With server, rows is one page: listen to @state (sort, query, page, page size) and fetch; set total and loading while you do — the table is marked busy and dims.
• Mark one column header: true: its cells become row headers, and row checkboxes are named after them ("Select Megumi").
• @rowClick is for pointer convenience only. Put a link or button in a cell for anything keyboard users must reach.
• The row count is a status, so a search or page change is announced.

Usage

import { BlessDataTable } from "blessing-ui";

API

Props

Name	Type	Default	Description
columns*	BlessDataColumn<T>[]	—
rows*	T[]	—
rowKey*	keyof T & string	—
pageSize	number	10
pageSizes	number[]	[10, 25, 50]
selectable	boolean	—
searchable	boolean	—
searchKeys	(keyof T & string)[]	—
searchPlaceholder	string	"Search…"
searchLabel	string	"Search rows"	accessible name of the search box
emptyText	string	"No rows."
caption	string	—
server	boolean	—	rows are one server page; sort / query / page are yours to fetch with (see `state` event)
total	number	—	server mode: total row count
loading	boolean	—

Events

Name	Payload	Description
state	[s: { sortKey: string | null; sortDir: "asc" | "desc"; query: string; page: number; pageSize: number; }]
update:selected	[rows: T[]]
rowClick	[row: T]

Slots

Name	Scope	Description
toolbar	{ state: { sortKey: string | null; sortDir: "asc" | "desc"; page: number; pageSize: number; query: string; selected: Set<string | number> & Omit<Set<string | number>, keyof Set<any>>; hidden: Set<string> & Omit<Set<string>, keyof Set<any>>; }; selected: T[]; }