shaamilahmed/Htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: simplify tables container by using native scrollbar styling and remove obsolete top scroll sync

Browse Source
This commit is contained in:
Enciphered
2026-05-31 06:08:40 +05:00
parent 58c929dd38
commit 42d6910ae7
4 changed files with 17 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/components/macros.html
+3 -43
View File
@@ -389,53 +389,13 @@
</div>
{% endmacro %}
{% macro table_container_open(id, has_top_scroll=true, max_height="68vh") %}
{% if has_top_scroll %}
<!-- Top Horizontal Scrollbar (Synced) -->
<div id="{{ id }}-scrollbar-top" class="overflow-x-auto w-full scrollbar-thin mb-3 bg-[#1e293b]/20 border border-slate-900/50 rounded-xl py-1 px-2">
<div id="{{ id }}-scrollbar-top-inner" style="height: 1px;"></div>
</div>
{% endif %}
{% macro table_container_open(id, max_height="68vh") %}
<!-- Table Container -->
<div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl shadow-2xl mb-8 overflow-hidden">
<div id="{{ id }}-container" class="overflow-auto scrollbar-thin rounded-[22px]" style="max-height: {{ max_height }};">
{% endmacro %}
{% macro table_container_close(id, has_top_scroll=true) %}
{% macro table_container_close(id) %}
</div>
</div>
{% if has_top_scroll %}
<script>
document.addEventListener('DOMContentLoaded', () => {
const topScroll = document.getElementById('{{ id }}-scrollbar-top');
const tableContainer = document.getElementById('{{ id }}-container');
const topScrollInner = document.getElementById('{{ id }}-scrollbar-top-inner');
const table = tableContainer ? tableContainer.querySelector('table') : null;
if (topScroll && tableContainer && topScrollInner && table) {
const updateWidth = () => {
topScrollInner.style.width = table.scrollWidth + 'px';
};
// Initialize width mapping
updateWidth();
// Observe both resizing of the table and changes to table layout
const resizeObserver = new ResizeObserver(() => updateWidth());
resizeObserver.observe(table);
// Sync scroll positions
topScroll.addEventListener('scroll', () => {
tableContainer.scrollLeft = topScroll.scrollLeft;
});
tableContainer.addEventListener('scroll', () => {
topScroll.scrollLeft = tableContainer.scrollLeft;
});
}
});
</script>
{% endif %}
{% endmacro %}
</div>{% endmacro %}