jaro/ikea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring data table builder

Browse Source
This commit is contained in:
Geriano
2022-09-30 13:19:34 +07:00
parent 728c5e7012
commit 294f8a45ff
3 changed files with 64 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
resources/js/Components/DataTable/Th.vue
View File

@@ -32,7 +32,7 @@ const click = () => {
</script>
<template>
<th ref="th" class="relative uppercase font-semibold" :class="`${table?.config?.sticky ? 'sticky top-0 left-0 border-0' : 'border-1'} ${sort && 'cursor-pointer'} ${$props.class}`" @click.prevent="sort && table && click()">
<th ref="th" class="relative uppercase font-semibold bg-inherit text-inherit" :class="`${table?.config?.sticky ? 'sticky top-0 left-0 border-0' : 'border-1'} ${sort && 'cursor-pointer'} ${$props.class}`" @click.prevent="sort && table && click()">
<div class="flex items-center justify-center space-x-2">
<div>
<slot />
@@ -45,5 +45,20 @@ const click = () => {
</div>
</template>
</div>
<div class="absolute top-0 left-0 w-full h-full outline outline-1 outline-gray-300 dark:outline-gray-900 bg-inherit text-inherit flex items-center justify-center">
<div class="flex items-center justify-center space-x-2">
<div>
<slot />
</div>
<template v-if="table && sort">
<div class="flex flex-col items-center justify-center text-xs">
<Icon name="caret-up" class="transition-all duration-300" :class="asc ? 'dark:text-white' : 'dark:text-gray-400'" />
<Icon name="caret-down" class="transition-all duration-300" :class="desc ? 'dark:text-white' : 'dark:text-gray-400'" />
</div>
</template>
</div>
</div>
</th>
</template>