Wide tables should scroll horizontally within the page

[simonw]

Wrap the main table in <div style="overflow-x: auto">

[simonw]

I tried this out and it did cause one problem with plugins: datasette-cluster-map still injected itself inside the scrolling area, when instead we would want that map to stay outside of the div with the table in it.

[simonw]

So maybe this is blocked on #987 and adding a new hook in the HTML which plugins like datasette-cluster-map can attach their content to.

[simonw]

This may require updates to the column action menu JavaScript too, since it was not built with scrolling sideways in mind.

[simonw]

Easiest fix for the column action menu positioning - hide them when the user scrolls the containing div:

document.querySelector('.table-wrapper').addEventListener(
  'scroll', () => document.querySelector('.dropdown-menu').style.display = 'none'
);                                            

[simonw]

This isn't blocked on #987 - it just means that datasette-cluster-map will need to learn to look for .table-wrapper first and fall back on the table.

[simonw]

Demo:

[simonw]

This is now live here: https://global-power-plants.datasettes.com/global-power-plants/global-power-plants

[JBPressac]

Hello Simon,
I have a similar problem with horizontal scrollbar display with Datasette version 0.51 and superior for a table with more than 30 rows. With Datasette 0.50, the horizontal scrollbar is displayed, if I upgrade Datasette to 0.51 and superior, the horizontal scrollbar disappears.

Datasette 0.50: horizontal scrollbar

Datasette 0.51 and superior: no horizontal scrollbar

Thanks,