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

fix bug th stacked when scrolling in horizontal

Browse Source
This commit is contained in:
Geriano
2022-07-29 17:32:57 +07:00
parent ff12b7556b
commit 71036c6ade
1 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
resources/js/Components/DataTable/Builder.vue
View File

@@ -74,7 +74,7 @@ const createFloatingTh = () => {
let ths = tfoot.querySelectorAll('th') let ths = tfoot.querySelectorAll('th')
ths.forEach((th, i) => { ths.forEach((th, i) => {
const floating = document.createElement('div') const floating = document.createElement('div')
floating.className = 'absolute top-0 left-0 w-full h-full border border-1 border-inherit' floating.className = 'absolute bottom-0 left-0 w-full h-full border border-1 border-inherit'
i === 0 && floating.classList.add('rounded-bl-md') i === 0 && floating.classList.add('rounded-bl-md')
i + 1 === ths.length && floating.classList.add('rounded-br-md') i + 1 === ths.length && floating.classList.add('rounded-br-md')
@@ -83,6 +83,15 @@ const createFloatingTh = () => {
} }
} }
const inherit = () => {
const { thead, tfoot } = self.refs
if (thead && tfoot) {
thead.querySelectorAll('th').forEach(th => th.classList.add('bg-inherit', 'border-inherit'))
tfoot.querySelectorAll('th').forEach(th => th.classList.add('bg-inherit', 'border-inherit'))
}
}
const rounded = () => { const rounded = () => {
const { links } = self.refs const { links } = self.refs
@@ -92,6 +101,7 @@ const rounded = () => {
onMounted(fetch) onMounted(fetch)
onMounted(() => config.sticky && createFloatingTh()) onMounted(() => config.sticky && createFloatingTh())
onMounted(() => inherit())
onMounted(() => rounded()) onMounted(() => rounded())
onUpdated(() => rounded()) onUpdated(() => rounded())
</script> </script>
@@ -102,11 +112,11 @@ onUpdated(() => rounded())
<div class="w-full sm:max-w-xs flex items-center space-x-2"> <div class="w-full sm:max-w-xs flex items-center space-x-2">
<label for="per_page" class="w-1/4 sm:w-auto lowercase first-letter:capitalize">per page</label> <label for="per_page" class="w-1/4 sm:w-auto lowercase first-letter:capitalize">per page</label>
<select name="per_page" v-model="config.per_page" @change.prevent="fetch()" class="w-full sm:w-auto bg-transparent border dark:border-gray-600 rounded-md px-3 py-1"> <select name="per_page" v-model="config.per_page" @change.prevent="fetch()" class="w-full sm:w-auto bg-transparent border dark:border-gray-600 rounded-md px-3 py-1">
<option value="10">10</option> <option class="dark:bg-gray-700" value="10">10</option>
<option value="15">15</option> <option class="dark:bg-gray-700" value="15">15</option>
<option value="25">25</option> <option class="dark:bg-gray-700" value="25">25</option>
<option value="50">50</option> <option class="dark:bg-gray-700" value="50">50</option>
<option value="100">100</option> <option class="dark:bg-gray-700" value="100">100</option>
</select> </select>
</div> </div>
@@ -117,13 +127,13 @@ onUpdated(() => rounded())
</div> </div>
<div class="p-2"> <div class="p-2">
<div class="overflow-auto rounded-md border dark:border-gray-900"> <div class="overflow-auto rounded-md border dark:border-gray-900 max-h-96">
<table class="w-full border-collapse"> <table class="w-full border-collapse">
<thead ref="thead" class="border-inherit"> <thead ref="thead" class="border-inherit" :class="config.sticky && 'sticky top-0 left-0'">
<slot name="thead" :config="config" :paginator="paginator" :data="paginator.data" :refresh="fetch" /> <slot name="thead" :config="config" :paginator="paginator" :data="paginator.data" :refresh="fetch" />
</thead> </thead>
<tfoot ref="tfoot" class="border-inherit"> <tfoot ref="tfoot" class="border-inherit" :class="config.sticky && 'sticky bottom-0 left-0'">
<slot name="tfoot" :config="config" :paginator="paginator" :data="paginator.data" :refresh="fetch" /> <slot name="tfoot" :config="config" :paginator="paginator" :data="paginator.data" :refresh="fetch" />
</tfoot> </tfoot>
@@ -134,7 +144,7 @@ onUpdated(() => rounded())
</div> </div>
</div> </div>
<div class="flex items-center space-x-4 p-2"> <div v-if="paginator.total > paginator.per_page" class="flex items-center space-x-4 p-2">
<p class="flex-none w-1/4"> <p class="flex-none w-1/4">
Displaying from {{ paginator.from }} to {{ paginator.to }} in total {{ paginator.total }} Displaying from {{ paginator.from }} to {{ paginator.to }} in total {{ paginator.total }}
</p> </p>