Data Display

Display data effectively with tables, lists, and pagination.

Table

<script setup>
const columns = [
  { key: 'id', label: 'ID' },
  { key: 'name', label: 'Name' },
  { key: 'email', label: 'Email' },
  { key: 'role', label: 'Role' }
]

const rows = [
  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
]
</script>

<template>
  <UTable :columns="columns" :rows="rows" />
</template>

Pagination

<script setup>
const page = ref(1)
const pageCount = ref(10)

const items = computed(() => {
  return allItems.slice((page.value - 1) * 10, page.value * 10)
})
</script>

<template>
  <UTable :rows="items" />

  <UPagination
    v-model="page"
    :page-count="pageCount"
    :total="100"
  />
</template>

Badge

<template>
  <UBadge>Default</UBadge>
  <UBadge color="primary">
    Primary
  </UBadge>
  <UBadge color="red">
    Error
  </UBadge>
  <UBadge variant="soft">
    Soft
  </UBadge>
</template>

Avatar

<template>
  <UAvatar src="/avatar.jpg" alt="User" />
  <UAvatar :text="name" />
  <UAvatar icon="i-heroicons-user" />
</template>

These components make displaying data beautiful and functional!