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/docs/tables.html
+10 -10
View File
@@ -1,7 +1,7 @@
{% extends "base.html" %}
{% import "components/macros.html" as ui %}
{% block title %}Tables & Scroll Sync - Design System Wiki{% endblock %}
{% block title %}Tables - Design System Wiki{% endblock %}
{% block content %}
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
@@ -15,9 +15,9 @@
<!-- Header -->
<div class="pb-6 border-b border-border">
<span class="text-xs font-semibold text-indigo-400">Layout & Navigation</span>
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Tables & Scroll Sync</h1>
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Tables</h1>
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
A standardized container macro for horizontal scroll synchronization and scrollbar-fitting layout. It resolves the common usability issue of unreachable scrollbars on wide tables.
A standardized container macro for table styling and scrollbar-fitting layout. It resolves common styling issues like corner clipping and header bleed-through.
</p>
</div>
@@ -25,7 +25,7 @@
<section class="space-y-4">
<h2 class="text-lg font-bold text-slate-200">Container Showcase</h2>
<p class="text-xs text-muted-foreground">
The macro standardizes the background styling, shadows, rounded borders, vertical height bounds, sticky headers, and outputs a synced scrollbar clone that rests at the top of the table.
The macro standardizes the background styling, shadows, rounded borders, vertical height bounds, and sticky headers.
</p>
<div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
@@ -37,7 +37,7 @@
<!-- Demo Viewport -->
<div id="table-sandbox" class="wiki-pane">
{{ ui::table_container_open(id="docs-demo-table", has_top_scroll=true, max_height="250px") }}
{{ ui::table_container_open(id="docs-demo-table", max_height="250px") }}
<table class="min-w-full divide-y divide-slate-800 text-left text-xs text-slate-300 relative">
<thead class="shadow-[0_1px_0_0_rgba(255,255,255,0.05)]">
<tr class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">
@@ -84,7 +84,7 @@
</tr>
</tbody>
</table>
{{ ui::table_container_close(id="docs-demo-table", has_top_scroll=true) }}
{{ ui::table_container_close(id="docs-demo-table") }}
</div>
<!-- Code Snippet Area -->
@@ -96,7 +96,7 @@
</button>
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}
{{ ui::table_container_open(id="my-custom-table", has_top_scroll=true, max_height="68vh") }}
{{ ui::table_container_open(id="my-custom-table", max_height="68vh") }}
&lt;table class="min-w-full divide-y divide-slate-800 text-left text-sm text-slate-300 relative"&gt;
&lt;thead class="shadow-[0_1px_0_0_rgba(255,255,255,0.05)]"&gt;
&lt;tr class="text-xs font-bold text-slate-400 uppercase tracking-wider"&gt;
@@ -113,7 +113,7 @@
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
{{ ui::table_container_close(id="my-custom-table", has_top_scroll=true) }}</code></pre>
{{ ui::table_container_close(id="my-custom-table") }}</code></pre>
</div>
</div>
</div>
@@ -125,9 +125,9 @@
<div class="border border-border rounded-3xl p-6 bg-secondary/10 space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<h4 class="text-xs font-bold text-indigo-400 uppercase tracking-wider">Top Scroll Sync Logic</h4>
<h4 class="text-xs font-bold text-indigo-400 uppercase tracking-wider">Stylized Container Wrapper</h4>
<p class="text-xs text-muted-foreground leading-relaxed">
Since HTML natively positions horizontal scrollbars only at the bottom of overflow elements, the component generates a custom dummy scroll container at the top of the table. A Javascript listener observes layout resizing and syncs the horizontal offsets of both the top scroll track and the main table scroll track dynamically.
Tables are automatically styled with rounded-3xl corners and background styling. The table container is scrollable, displaying a native horizontal or vertical scrollbar as needed.
</p>
</div>
<div class="space-y-2">