sipo/Teren-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes 0328092025

Browse Source
This commit is contained in:
Simon Pocrnjič
2025-09-28 22:36:47 +02:00
parent b40ee9dcde
commit 7e8e0a479b
61 changed files with 4306 additions and 654 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/BasicTable.vue
+37 -5
View File
@@ -16,6 +16,11 @@ const props = defineProps({
description: String,
header: Array,
body: Array,
// Make table header sticky while body scrolls
stickyHeader: {
type: Boolean,
default: true
},
editor: {
type: Boolean,
default: false
@@ -115,12 +120,16 @@ const remove = () => {
<p v-if="description" class="mt-1 text-sm text-gray-600">{{ description }}</p>
</div>
<div :class="['relative rounded-lg border border-gray-200 bg-white shadow-sm overflow-x-auto overflow-y-auto', bodyMaxHeight]">
<div :class="['relative rounded-lg border border-gray-200 bg-white shadow-sm overflow-x-auto overflow-y-auto', bodyMaxHeight, stickyHeader ? 'table-sticky' : '']">
<FwbTable hoverable striped class="text-sm">
<FwbTableHead class="sticky top-0 z-10 bg-gray-50/90 backdrop-blur supports-[backdrop-filter]:bg-gray-50/80 border-b border-gray-200 shadow-sm">
<FwbTableHeadCell v-for="(h, hIndex) in header" :key="hIndex" class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 first:pl-6 last:pr-6">{{ h.data }}</FwbTableHeadCell>
<FwbTableHeadCell v-if="editor" class="w-px text-gray-700 py-3"></FwbTableHeadCell>
<FwbTableHeadCell v-else class="w-px text-gray-700 py-3" />
<FwbTableHeadCell
v-for="(h, hIndex) in header"
:key="hIndex"
class="sticky top-0 z-10 uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 first:pl-6 last:pr-6 bg-gray-50/90"
>{{ h.data }}</FwbTableHeadCell>
<FwbTableHeadCell v-if="editor" class="sticky top-0 z-10 w-px text-gray-700 py-3 bg-gray-50/90"></FwbTableHeadCell>
<FwbTableHeadCell v-else class="sticky top-0 z-10 w-px text-gray-700 py-3 bg-gray-50/90" />
</FwbTableHead>
<FwbTableBody>
<FwbTableRow v-for="(row, key, parent_index) in body" :key="key" :class="row.options.class">
@@ -208,4 +217,27 @@ const remove = () => {
</div>
</form>
</Modal>
</template>
</template>
<style scoped>
/* Ensure sticky header remains above scrollable body inside wrapper */
:deep(.table-sticky thead) {
position: sticky;
top: 0;
z-index: 10;
}
:deep(.table-sticky thead th) {
position: sticky;
top: 0;
z-index: 10;
background-color: rgba(249, 250, 251, 0.9); /* gray-50/90 */
backdrop-filter: saturate(180%) blur(5px);
}
/* Maintain column widths alignment when scrollbar appears */
.table-sticky {
/* Make sure the header and body share the same scroll container */
overflow-y: auto;
}
</style>