Table Komponens

      <UTable 
  :data="data"
  :ui="{
    td: 'text-gray-900',
    th: 'text-gray-700 font-medium uppercase text-xs',
    tr: 'hover:bg-gray-50'
  }"
/>

<script setup>
const data = [
  { azonosito: 1, nev: 'Kovács János', email: 'kovacs.janos@buchl.hu', reszleg: 'Logisztika' },
  { azonosito: 2, nev: 'Nagy Éva', email: 'nagy.eva@buchl.hu', reszleg: 'Értékesítés' },
  // ...
]
</script>
    

      <template>
  <div>
    <UInput
      v-model="searchQuery"
      placeholder="Keresés..."
      icon="i-heroicons-magnifying-glass-20-solid"
      class="mb-4"
    />
    
    <UTable 
      :data="filteredData"
    >
      <template #status-data="{ row }">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 rounded-full" :class="statusColors[row.status]"></div>
          <span>{{ statusLabels[row.status] }}</span>
        </div>
      </template>
    </UTable>
  </div>
</template>

<script setup>
const searchQuery = ref('')

const filteredData = computed(() => {
  if (!searchQuery.value) return data
  return data.filter(row => 
    Object.values(row).some(value => 
      String(value).toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  )
})
</script>
    

      <UTable 
  :loading="isLoading"
  :data="data"
/>
    

      <UTable 
  :data="[]"
>
  <template #empty-state>
    <div class="text-center py-8">
      <UIcon name="i-heroicons-circle-stack-20-solid" class="mx-auto h-8 w-8 text-gray-400 mb-4" />
      <h3 class="text-sm font-medium text-gray-900 mb-2">Nincsenek megrendelések</h3>
      <p class="text-sm text-gray-500 mb-4">Kezdje el új megrendelés létrehozásával.</p>
      <UButton color="primary" icon="i-heroicons-plus">
        Új megrendelés
      </UButton>
    </div>
  </template>
</UTable>
    

      <UTable 
  :data="employees"
>
  <template #role-data="{ row }">
    <UBadge :color="roleColors[row.role]" variant="subtle">
      {{ roleLabels[row.role] }}
    </UBadge>
  </template>
  
  <template #actions-data="{ row }">
    <UDropdown :items="[[
      { label: 'Megtekintés', icon: 'i-heroicons-eye-20-solid', click: () => viewEmployee(row) },
      { label: 'Szerkesztés', icon: 'i-heroicons-pencil-20-solid', click: () => editEmployee(row) },
    ], [
      { label: 'Törlés', icon: 'i-heroicons-trash-20-solid', click: () => deleteEmployee(row) }
    ]]">
      <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
    </UDropdown>
  </template>
</UTable>
    

      <UTable 
  :data="orders"
  :ui="{
    wrapper: 'rounded-none',
    base: 'min-w-full',
    thead: 'bg-gray-50',
    tbody: 'bg-white divide-y divide-gray-200',
    tr: 'transition-colors hover:bg-gray-50',
    th: 'text-left px-4 py-3 text-gray-700 font-medium uppercase tracking-wider text-xs',
    td: 'whitespace-nowrap px-4 py-3 text-gray-900 text-sm'
  }"
>
  <template #client-data="{ row }">
    <div>
      <div class="font-medium">{{ row.client }}</div>
      <div class="text-xs text-gray-500">{{ row.contact }}</div>
    </div>
  </template>
  
  <template #status-data="{ row }">
    <UBadge 
      :color="statusColors[row.status]" 
      variant="subtle"
      class="rounded-none"
    >
      {{ statusLabels[row.status] }}
    </UBadge>
  </template>
</UTable>