Table.vue

<script setup lang="ts">
const jobs = [
  { id: 'job-001', agent: 'crawler-alpha', status: 'running', runtime: 'node-v8', started: '2026-06-15 09:12', lease: '60s' },
  { id: 'job-002', agent: 'embedder-beta', status: 'completed', runtime: 'python-v3', started: '2026-06-15 08:45', lease: 'expired' },
  { id: 'job-003', agent: 'summarizer-v2', status: 'failed', runtime: 'node-v8', started: '2026-06-15 08:30', lease: 'n/a' },
  { id: 'job-004', agent: 'indexer-gamma', status: 'queued', runtime: 'wasm-v1', started: '2026-06-15 09:20', lease: '30s' },
  { id: 'job-005', agent: 'validator-x', status: 'running', runtime: 'python-v3', started: '2026-06-15 09:18', lease: '120s' },
]

const jobColumns = [
  { accessorKey: 'id', header: 'Job ID' },
  { accessorKey: 'agent', header: 'Agent' },
  { accessorKey: 'status', header: 'Status' },
  { accessorKey: 'runtime', header: 'Runtime' },
  { accessorKey: 'started', header: 'Started' },
  { accessorKey: 'lease', header: 'Lease TTL' },
]

const statusColor: Record<string, string> = {
  running: 'text-success-500',
  completed: 'text-info-500',
  failed: 'text-error-500',
  queued: 'text-warning-500',
}

const sessions = [
  { session: 'sess-9a3f', agent: 'crawler-alpha', events: 142, traces: 37, duration: '4m 12s' },
  { session: 'sess-b21c', agent: 'embedder-beta', events: 89, traces: 12, duration: '1m 55s' },
  { session: 'sess-c77d', agent: 'summarizer-v2', events: 5, traces: 2, duration: '0m 08s' },
]

const sessionColumns = [
  { accessorKey: 'session', header: 'Session' },
  { accessorKey: 'agent', header: 'Agent' },
  { accessorKey: 'events', header: 'Events' },
  { accessorKey: 'traces', header: 'Traces' },
  { accessorKey: 'duration', header: 'Duration' },
]

const rowSelection = ref<Record<string, boolean>>({})
const sorting = ref([])
const isLoading = ref(false)

function toggleLoading() {
  isLoading.value = !isLoading.value
}
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Basic — Job Queue">
      <div class="w-full overflow-x-auto">
        <UTable :data="jobs" :columns="jobColumns" />
      </div>
    </GallerySection>

    <GallerySection title="Custom cell rendering — Status badges">
      <div class="w-full overflow-x-auto">
        <UTable :data="jobs" :columns="jobColumns">
          <template #status-cell="{ row }">
            <span :class="['font-medium capitalize', statusColor[row.original.status]]">
              {{ row.original.status }}
            </span>
          </template>
          <template #lease-cell="{ row }">
            <UBadge
              v-if="row.original.lease !== 'n/a' && row.original.lease !== 'expired'"
              color="success"
              variant="soft"
              size="sm"
            >
              {{ row.original.lease }}
            </UBadge>
            <UBadge
              v-else-if="row.original.lease === 'expired'"
              color="warning"
              variant="soft"
              size="sm"
            >
              expired
            </UBadge>
            <span v-else class="text-[var(--ui-text-muted)]">n/a</span>
          </template>
        </UTable>
      </div>
    </GallerySection>

    <GallerySection title="Row selection">
      <div class="w-full overflow-x-auto">
        <UTable
          :data="sessions"
          :columns="sessionColumns"
          v-model:row-selection="rowSelection"
          :row-selection-options="{ enableMultiRowSelection: true }"
        />
      </div>
      <p class="text-sm text-[var(--ui-text-muted)] mt-2">
        Selected rows: {{ Object.keys(rowSelection).filter(k => rowSelection[k]).join(', ') || 'none' }}
      </p>
    </GallerySection>

    <GallerySection title="Loading state">
      <div class="w-full overflow-x-auto">
        <UTable
          :data="jobs"
          :columns="jobColumns"
          :loading="isLoading"
          loading-color="primary"
        />
      </div>
      <UButton
        class="mt-3"
        :icon="isLoading ? 'i-material-symbols-stop-circle-outline' : 'i-material-symbols-refresh'"
        :color="isLoading ? 'error' : 'primary'"
        variant="soft"
        @click="toggleLoading"
      >
        {{ isLoading ? 'Stop loading' : 'Simulate loading' }}
      </UButton>
    </GallerySection>

    <GallerySection title="Empty state">
      <div class="w-full overflow-x-auto">
        <UTable
          :data="[]"
          :columns="jobColumns"
          empty="No jobs found in the runtime queue."
        />
      </div>
    </GallerySection>

    <GallerySection title="Sticky header">
      <div class="w-full overflow-x-auto max-h-40 overflow-y-auto">
        <UTable
          :data="[...jobs, ...jobs]"
          :columns="jobColumns"
          sticky="header"
        />
      </div>
    </GallerySection>

    <GallerySection title="Session traces — realistic usage">
      <div class="w-full overflow-x-auto">
        <UTable :data="sessions" :columns="sessionColumns">
          <template #session-cell="{ row }">
            <span class="font-mono text-xs text-[var(--ui-text-highlighted)]">
              {{ row.original.session }}
            </span>
          </template>
          <template #events-cell="{ row }">
            <div class="flex items-center gap-1">
              <UIcon name="i-material-symbols-bolt-outline" class="text-warning-500 size-4" />
              {{ row.original.events }}
            </div>
          </template>
          <template #traces-cell="{ row }">
            <div class="flex items-center gap-1">
              <UIcon name="i-material-symbols-timeline-outline" class="text-info-500 size-4" />
              {{ row.original.traces }}
            </div>
          </template>
        </UTable>
      </div>
    </GallerySection>
  </div>
</template>