Wide slate_table: horizontal scroll instead of clipping columns #4

Merged

mthelm85 merged 1 commit from table-horizontal-scroll into main

2026-07-17 13:12:44 -07:00

mthelm85 commented

2026-07-16 08:05:25 -07:00

(Migrated from github.com)

Wide `slate_table`: horizontal scroll instead of clipping columns

Problem

A table wider than its cell has no horizontal scrollbar — the data past the cell width is simply inaccessible. The interactive table is laid out as:

.slatetable .st-table { border-collapse:collapse; width:100%; ... }
.slatetable th, .slatetable td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px; }

width:100% pins the table to the cell width, so a many-column table squeezes its columns and the nowrap/ellipsis rules clip whatever doesn't fit, with no way to pan to it. This affects every interactive table path: slate_table(df), DataFrame auto-render, inline {{ df }} in markdown cells, and TableSelect.

(The bare-DataFrame HTML path already handles this — .disp.html div.data-frame has overflow-x:auto — so the two table renderers currently behave inconsistently.)

Fix

Same pattern as the bare-DataFrame path:

_buildShell (core.js) wraps the <table> in a .st-scroll div — only the table pans; the filter bar and pagination stay put.
CSS: .st-scroll { overflow-x:auto; max-width:100%; } and the table switches width:100% → min-width:100%, so narrow tables still fill the cell while wide ones grow to their natural width and scroll.

wrap._refs and the sort/filter/selection handlers are untouched — _refreshTable and drawTable work unchanged, and both table hosts (.tables output area and inline .itable placeholders) flow through _buildShell, so all four table paths get the fix.

Notes

The header's position:sticky; top:0 now sticks within the scroll wrapper rather than the page. With paginated tables (default 25 rows) this isn't a visible change.
Per-cell max-width:340px + ellipsis is kept — it guards against a single pathological cell, and with scrolling the columns are no longer lost.

Testing

Structure smoke-tested: shell builds as .st-bar / .st-scroll > .st-table / .st-pag with _refs intact.
Manually verified in the notebook: a ~30-column DataFrame squeezed/clipped before; with the change it renders at natural width and pans horizontally, while filter/sort/pagination stay fixed. Narrow tables still fill the cell width.

# Wide `slate_table`: horizontal scroll instead of clipping columns ## Problem A table wider than its cell has no horizontal scrollbar — the data past the cell width is simply inaccessible. The interactive table is laid out as: ```css .slatetable .st-table { border-collapse:collapse; width:100%; ... } .slatetable th, .slatetable td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px; } ``` `width:100%` pins the table to the cell width, so a many-column table squeezes its columns and the nowrap/ellipsis rules clip whatever doesn't fit, with no way to pan to it. This affects every interactive table path: `slate_table(df)`, DataFrame auto-render, inline `{{ df }}` in markdown cells, and `TableSelect`. (The *bare*-DataFrame HTML path already handles this — `.disp.html div.data-frame` has `overflow-x:auto` — so the two table renderers currently behave inconsistently.) ## Fix Same pattern as the bare-DataFrame path: - `_buildShell` (core.js) wraps the `<table>` in a `.st-scroll` div — only the table pans; the filter bar and pagination stay put. - CSS: `.st-scroll { overflow-x:auto; max-width:100%; }` and the table switches `width:100%` → `min-width:100%`, so narrow tables still fill the cell while wide ones grow to their natural width and scroll. `wrap._refs` and the sort/filter/selection handlers are untouched — `_refreshTable` and `drawTable` work unchanged, and both table hosts (`.tables` output area and inline `.itable` placeholders) flow through `_buildShell`, so all four table paths get the fix. ## Notes - The header's `position:sticky; top:0` now sticks within the scroll wrapper rather than the page. With paginated tables (default 25 rows) this isn't a visible change. - Per-cell `max-width:340px` + ellipsis is kept — it guards against a single pathological cell, and with scrolling the *columns* are no longer lost. ## Testing - Structure smoke-tested: shell builds as `.st-bar` / `.st-scroll > .st-table` / `.st-pag` with `_refs` intact. - Manually verified in the notebook: a ~30-column DataFrame squeezed/clipped before; with the change it renders at natural width and pans horizontally, while filter/sort/pagination stay fixed. Narrow tables still fill the cell width.

❤️ 1