perfs

src/components/table/SortableHeader.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SortDirection } from './sort';
+import { HeaderComponent, SortDirection } from './sort';
 
 interface Props {
     currentSortKey: string | null;
@@ -7,6 +7,7 @@ interface Props {
     showColumn?: (k: string) => boolean;
     unsortable?: boolean;
     sortKey: string;
+    headerComponent?: HeaderComponent;
 }
 interface Emit {
     (e: 'sort', key: string, direction: SortDirection): void;
@@ -14,24 +15,25 @@ interface Emit {
 
 withDefaults(defineProps<Props>(), {
     showColumn: () => () => true,
-    unsortable: false
+    unsortable: false,
+    headerComponent: 'th',
 });
 const emit = defineEmits<Emit>();
 
 </script>
 
 <template>
-    <th v-if="showColumn(sortKey)">
+    <component v-if="showColumn(sortKey)" :is="headerComponent" class="sort-header">
         <slot />
         <template v-if="!unsortable">
             <span class="asc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'asc')}" @click="emit('sort', sortKey, 'asc')">▲</span>
             <span class="desc" :class="{'opacity-20': (currentSortKey != sortKey || sortDirection != 'desc')}" @click="emit('sort', sortKey, 'desc')">▼</span>
         </template>
-    </th>
+    </component>
 </template>
 
 <style scoped lang="postcss">
-th {
+.sort-header {
     @apply relative h-8 pe-3;
 }
 span.asc, span.desc {