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 {

src/components/table/sort.ts

@@ -1,10 +1,12 @@
-import { MaybeRefOrGetter, computed, ref, toValue } from "vue";
+import { Component, DefineComponent, MaybeRefOrGetter, computed, ref, toValue } from "vue";
 
+export type HeaderComponent = Component | DefineComponent | string;
 export type SortDirection = "asc" | "desc";
 export type UseSortOptions = {
     defaultSortKey?: string;
     defaultSortDirection?: SortDirection;
     ignoredColums?: MaybeRefOrGetter<string[]>;
+    headerComponent?: HeaderComponent;
 };
 
 export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOptions) => {
@@ -19,7 +21,8 @@ export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOption
         onSort: sortBy,
         showColumn,
         currentSortKey: sortKey.value,
-        sortDirection: sortDirection.value
+        sortDirection: sortDirection.value,
+        headerComponent: options?.headerComponent,
     }));
 
     const sortedArray = computed(() => toValue(array).sort((a, b) => {