DataView

List / grid with pagination

A collection shown as cards or rows you design yourself — a catalogue, a gallery of episodes — with a list/grid switch and paging. For tabular data people sort and select, use DataTable.

Basic

8 episodes · list

第1話

2019.04.04

第2話

2019.04.05

第3話

2019.04.06

第4話

2019.04.07

<script setup lang="ts">
import { BlessDataView, BlessText } from "blessing-ui";
import { shots } from "./_data";
const eps = shots.map((s, i) => ({
  id: i,
  title: `第${i + 1}話`,
  src: s.src,
  air: `2019.04.${String(i + 4).padStart(2, "0")}`,
}));
</script>

<template>
  <BlessDataView :items="eps" :page-size="4" :row-key="(e) => e.id" columns="140px">
    <template #header="{ layout }"
      ><BlessText size="xs" muted>{{ eps.length }} episodes · {{ layout }}</BlessText></template
    >
    <template #default="{ item, layout }">
      <div
        :style="layout === 'list' ? 'display:flex;gap:12px;align-items:center;padding:8px 0' : ''"
      >
        <img :src="item.src" alt="" :style="layout === 'list' ? 'width:72px' : 'width:100%'" />
        <div>
          <BlessText as="p" weight="bold" size="sm">{{ item.title }}</BlessText
          ><BlessText as="p" size="xs" muted>{{ item.air }}</BlessText>
        </div>
      </div>
    </template>
  </BlessDataView>
</template>

• The default slot renders each item with { item, index, layout }, so one template can adapt to list and grid.
• columns is the minimum card width in grid layout; pageSize pages client-side (0 shows everything). When items shrinks, the page follows back to the last one.
• #empty replaces "No items".

Usage

import { BlessDataView } from "blessing-ui";

API

Props

Name	Type	Default	Description
items*	T[]	—
rowKey	((item: T, index: number) => string | number)	—
pageSize	number	0
columns	string	"220px"	min card width in grid layout
label	string	"Items"
switchable	boolean	true	hide the list/grid switch
layout	"grid" | "list"	"list"

Events

Name	Payload	Description
update:layout	[value: "grid" | "list"]

Slots

Name	Scope	Description
header	{ layout: "grid" | "list"; }
default	{ item: T; index: number; layout: "grid" | "list"; }
empty	—