ignorable columns

src/components/table/SortableHeader.vue

@@ -4,23 +4,29 @@ import { SortDirection } from './sort';
 interface Props {
     currentSortKey: string | null;
     sortDirection?: SortDirection | null;
+    showColumn?: (k: string) => boolean;
+    unsortable?: boolean;
     sortKey: string;
 }
 interface Emit {
     (e: 'sort', key: string, direction: SortDirection): void;
 }
 
-defineProps<Props>();
+withDefaults(defineProps<Props>(), {
+    showColumn: () => () => true,
+    unsortable: false
+});
 const emit = defineEmits<Emit>();
 
 </script>
 
 <template>
-    <th>
+    <th v-if="showColumn(sortKey)">
         <slot />
-        <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 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>
 </template>
 

src/components/table/sort.ts

@@ -4,6 +4,7 @@ export type SortDirection = "asc" | "desc";
 export type UseSortOptions = {
     defaultSortKey?: string;
     defaultSortDirection?: SortDirection;
+    ignoredColums?: MaybeRefOrGetter<string[]>;
 };
 
 export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOptions) => {
@@ -13,10 +14,11 @@ export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOption
         sortKey.value = key;
         sortDirection.value = direction;
     };
+    const showColumn = (sortKey: string) => toValue(options?.ignoredColums)?.includes(sortKey) ?? true;
     const headerProps = computed(() => ({
-        onSort: sortBy,
+        onSort: sortBy, showColumn,
         currentSortKey: sortKey.value,
-        sortDirection: sortDirection.value,
+        sortDirection: sortDirection.value
     }));
 
     const sortedArray = computed(() => toValue(array).sort((a, b) => {
@@ -38,5 +40,5 @@ export const useSort = <T>(array: MaybeRefOrGetter<T[]>, options?: UseSortOption
         }
     }));
 
-    return { sortedArray, headerProps };
+    return { sortedArray, headerProps, showColumn };
 }