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>
+        <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>
+            <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 };
 }

src/market/scan/ScanResultTable.vue

@@ -24,6 +24,7 @@ type Result = {
 interface Props {
     items?: ScanResult[];
     infoOnly?: boolean;
+    ignoredColums?: string[];
 }
 
 interface Emits {
@@ -37,7 +38,8 @@ const scoreFormater = new Intl.NumberFormat("en-US", {
 
 const props = withDefaults(defineProps<Props>(), {
     items: () => [],
-    infoOnly: false
+    infoOnly: false,
+    ignoredColums: () => []
 });
 defineEmits<Emits>();
 
@@ -47,7 +49,13 @@ const days = useStorage('market-scan-days', 365);
 const threshold = useStorage('market-scan-threshold', 10);
 const filter = ref("");
 const onlyCheap = ref(false);
-const { sortedArray, headerProps } = useSort<Result>(computed(() => props.items
+const columnsToIgnore = computed(() => {
+    if (props.infoOnly && !props.ignoredColums.includes('buttons')) {
+        return [...props.ignoredColums, 'buttons'];
+    }
+    return props.ignoredColums;
+});
+const { sortedArray, headerProps, showColumn } = useSort<Result>(computed(() => props.items
     .filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()))
     .map(r => {
         const quartils = getHistoryQuartils(r.history, days.value);
@@ -68,7 +76,8 @@ const { sortedArray, headerProps } = useSort<Result>(computed(() => props.items
         };
     }).filter(r => !onlyCheap.value || (r.buy <= r.q1 && r.profit >= (threshold.value / 100)))), {
         defaultSortKey: 'score',
-        defaultSortDirection: 'desc'
+        defaultSortDirection: 'desc',
+        ignoredColums: columnsToIgnore
     })
 const getLineColor = (result: Result) => {
     if (props.infoOnly) {
@@ -116,22 +125,22 @@ const getLineColor = (result: Result) => {
                 <SortableHeader v-bind="headerProps" sortKey="q3">Q3</SortableHeader>
                 <SortableHeader v-bind="headerProps" sortKey="profit">Profit</SortableHeader>
                 <SortableHeader v-bind="headerProps" sortKey="score">Score</SortableHeader>
-                <th v-if="!infoOnly"></th>
+                <SortableHeader v-bind="headerProps" sortKey="buttons" unsortable></SortableHeader>
             </tr>
         </thead>
         <tbody>
             <tr v-for="r in sortedArray" :key="r.typeID" :class="getLineColor(r)">
-                <td>
+                <td v-if="showColumn('name')">
                     <MarketTypeLabel :id="r.typeID" :name="r.name" />
                 </td>
-                <td class="text-right">{{ formatIsk(r.buy) }}</td>
+                <td v-if="showColumn('buy')" class="text-right">{{ formatIsk(r.buy) }}</td>
-                <td class="text-right">{{ formatIsk(r.sell) }}</td>
+                <td v-if="showColumn('sell')" class="text-right">{{ formatIsk(r.sell) }}</td>
-                <td class="text-right">{{ formatIsk(r.q1) }}</td>
+                <td v-if="showColumn('q1')" class="text-right">{{ formatIsk(r.q1) }}</td>
-                <td class="text-right">{{ formatIsk(r.median) }}</td>
+                <td v-if="showColumn('median')" class="text-right">{{ formatIsk(r.median) }}</td>
-                <td class="text-right">{{ formatIsk(r.q3) }}</td>
+                <td v-if="showColumn('q3')" class="text-right">{{ formatIsk(r.q3) }}</td>
-                <td class="text-right">{{ percentFormater.format(r.profit) }}</td>
+                <td v-if="showColumn('profit')" class="text-right">{{ percentFormater.format(r.profit) }}</td>
-                <td class="text-right">{{ scoreFormater.format(r.score) }}</td>
+                <td v-if="showColumn('score')" class="text-right">{{ scoreFormater.format(r.score) }}</td>
-                <td v-if="!infoOnly" class="text-right">
+                <td v-if="showColumn('buttons')" class="text-right">
                     <button class="btn-icon me-1" @click="$emit('buy', r.type, r.buy, r.sell)"><ShoppingCartIcon /></button>
                     <button class="btn-icon me-1" @click="$emit('remove', r.type)"><BookmarkSlashIcon /></button>
                 </td>