search

cldellow / datasette-ui-extras

Add editing UI and other power-user features to Datasette.
Apache License 2.0
12 stars 1 forks source link

wide tables: fixed table header #6

Closed cldellow closed 1 year ago

cldellow commented 1 year ago

https://github.com/simonw/datasette/issues/596

There are a few things in the linked issue, this ticket is about having a fixed table header on the table page

cldellow commented 1 year ago

A trick: position: sticky is incompatible with ancestor elements who have overflow: hidden.

https://uxdesign.cc/position-stuck-96c9f55d9526 is a workaround.

I think it requires explicit sizing of the columns, which is unfortunate. Possible workaround: render as a table, inspect the actual sizes of things, then inject CSS that adds explicit sizes and possibly changes from display: table-* to display: block or what-have-you.

cldellow commented 1 year ago

https://medium.com/neocoast/fixing-a-table-header-on-a-horizontally-scrolling-table-de3364610957 describes a solution that requires JS but works for tables