initial commit

src/components/table/TableHeader.vue

@@ -0,0 +1,42 @@
+<template>
+  <thead class="sticky top-0 z-10">
+    <tr class="bg-gray-800 border-b border-gray-700">
+      <th
+        v-for="col in columns"
+        :key="col.field"
+        class="px-4 py-3 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider whitespace-nowrap select-none"
+        :class="col.sortable ? 'cursor-pointer hover:text-gray-200 transition-colors' : ''"
+        @click="col.sortable && col.field !== 'status' ? $emit('sort', col.field as SortField) : undefined"
+      >
+        <span class="flex items-center gap-1">
+          {{ col.label }}
+          <span v-if="col.sortable && sortState.field === col.field" class="text-amber-400">
+            {{ sortState.direction === 'asc' ? '↑' : '↓' }}
+          </span>
+          <span v-else-if="col.sortable" class="text-gray-600">↕</span>
+        </span>
+      </th>
+    </tr>
+  </thead>
+</template>
+
+<script setup lang="ts">
+import type { SortField, SortState } from '../../types/crafting'
+
+const columns: { field: SortField | 'status' | 'bill'; label: string; sortable: boolean }[] = [
+  { field: 'displayName', label: 'Item', sortable: true },
+  { field: 'tier', label: 'Tier', sortable: true },
+  { field: 'variantType', label: 'Variant', sortable: true },
+  { field: 'materialCost', label: 'Craft Cost', sortable: true },
+  { field: 'status', label: 'Price Age', sortable: false },
+  { field: 'bill', label: '', sortable: false },
+]
+
+defineProps<{
+  sortState: SortState
+}>()
+
+defineEmits<{
+  sort: [field: SortField]
+}>()
+</script>