eveal/gemory
2
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

ignorable columns

Browse Source
This commit is contained in:
Sirttas
2023-11-07 13:47:42 +01:00
parent ee6bbfd442
commit 088ea5d929
3 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/table/SortableHeader.vue
+11 -5
View File
@@ -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>