Components
Data View
One vessel, two layouts: the caller renders each record through the item slot, the view lays the records out as a ledger or a lattice and — when a page size is given — pages them with the pagination family's own parts rather than a second implementation.
#Basic usage
1
Ledger entry 12
Ledger entry 23
Ledger entry 34
Ledger entry 45
Ledger entry 56
Ledger entry 6<script setup lang="ts">
import { Avatar, DataView } from "@bysages/vue";
const records = Array.from({ length: 23 }, (_, index) => ({
id: index + 1,
title: `Ledger entry ${index + 1}`,
}));
</script>
<template>
<DataView :items="records" :page-size="6" class="w-full">
<template #item="{ item }">
<div class="flex items-center gap-3 py-2 text-sm">
<Avatar.Root size="sm">
<Avatar.Fallback>{{ item.id }}</Avatar.Fallback>
</Avatar.Root>
<span>{{ item.title }}</span>
</div>
</template>
</DataView>
</template>
#Props
#DataView
One vessel, two layouts: the caller renders each record through the item slot, the view lays the records out as a ledger or a lattice and — when a page size is given — pages them with the pagination family's own parts rather than a second implementation.
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array as PropType<unknown[]> | — | |
layout | String as PropType<"list" | "grid"> | "list" | Ledger rows or a lattice of cards. |
pageSize | Number as PropType<number> | undefined | Records per page; leave unset to show everything at once. |