Skip to content

Commit 7b7e67e

Browse files
committed
Improvement - VueUiCarouselTable - Hide rows when out of view on top
1 parent 2d1ede1 commit 7b7e67e

File tree

1 file changed

+39
-6
lines changed

1 file changed

+39
-6
lines changed

src/components/vue-ui-carousel-table.vue

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,33 @@ onMounted(() => {
129129
}
130130
});
131131
132+
133+
onMounted(() => {
134+
if (tableContainer.value) {
135+
const thead = tableContainer.value.querySelector('thead');
136+
const trElements = Array.from(tbody.value.querySelectorAll('tr'));
137+
138+
function updateVisibility() {
139+
const theadBottom = thead.getBoundingClientRect().bottom;
140+
trElements.forEach(tr => {
141+
const trTop = tr.getBoundingClientRect().top;
142+
if (trTop < theadBottom) {
143+
tr.style.visibility = 'hidden';
144+
} else {
145+
tr.style.visibility = 'visible';
146+
}
147+
});
148+
}
149+
150+
tableContainer.value.addEventListener('scroll', updateVisibility);
151+
updateVisibility();
152+
153+
onBeforeUnmount(() => {
154+
tableContainer.value.removeEventListener('scroll', updateVisibility);
155+
});
156+
}
157+
});
158+
132159
function toggleFullscreen(state) {
133160
isFullscreen.value = state;
134161
step.value += 1;
@@ -156,15 +183,15 @@ function animate(timestamp) {
156183
init.value += allTr.value.heights[scrollIndex.value];
157184
if (hasReachedScrollBottom() || scrollIndex.value >= allTr.value.heights.length) {
158185
init.value = 0;
159-
scrollIndex.value = 0;
186+
scrollIndex.value = -1;
160187
}
161188
189+
scrollIndex.value += 1;
162190
if (tableContainer.value) {
163191
tableContainer.value.scrollTo({
164192
top: init.value,
165193
behavior: 'smooth'
166194
});
167-
scrollIndex.value += 1;
168195
}
169196
170197
lastTimestamp.value = timestamp;
@@ -291,7 +318,7 @@ defineExpose({
291318
containerType: 'inline-size',
292319
position: 'relative',
293320
overflow: 'auto',
294-
fontFamily: FINAL_CONFIG.fontFamily
321+
fontFamily: FINAL_CONFIG.fontFamily,
295322
}"
296323
:class="{ 'vue-ui-responsive' : isResponsive, 'is-playing': !isPaused }"
297324
@mouseenter="pauseOnHover()"
@@ -307,7 +334,7 @@ defineExpose({
307334
...FINAL_CONFIG.style,
308335
border: `${FINAL_CONFIG.border.size}px solid ${FINAL_CONFIG.border.color}`,
309336
width: '100%',
310-
borderCollapse: 'collapse'
337+
borderCollapse: 'collapse'
311338
}">
312339
<caption
313340
ref="caption"
@@ -359,13 +386,18 @@ defineExpose({
359386
</tr>
360387
</thead>
361388

362-
<tbody v-if="dataset.body && dataset.head" ref="tbody">
389+
<tbody
390+
v-if="dataset.body && dataset.head" ref="tbody"
391+
:style="{
392+
clipPath: 'inset(0,0,0,0)'
393+
}"
394+
>
363395
<tr
364396
v-for="(tr, i) in dataset.body"
365397
:style="{
366398
...FINAL_CONFIG.tbody.tr.style,
367399
border: `${FINAL_CONFIG.tbody.tr.border.size}px solid ${FINAL_CONFIG.tbody.tr.border.color}`,
368-
verticalAlign: 'middle'
400+
verticalAlign: 'middle',
369401
}"
370402
>
371403
<td
@@ -493,4 +525,5 @@ thead th, tbody td {
493525
-ms-overflow-style: none; /* IE and Edge */
494526
scrollbar-width: none; /* Firefox */
495527
}
528+
496529
</style>

0 commit comments

Comments
 (0)