Handle really wide tables better

[simonw]

If a table has hundreds of columns the Datasette UI starts getting unwieldy.

Addressing this would be neat. One option would be to only select the first 30 columns by default and provide a UI for selecting more.

[simonw]

This means moving away from select *. I've been thinking this would be worthwhile anyway, since that way when you click "Edit SQL" you'll get a more useful SQL statement to start hacking away at.

[terrycojones]

I initially went looking for a way to hide a column completely. Today I found the setting to truncate cells, but it applies to all cells. In my case I have text columns that can have many thousands of characters. I was wondering whether the metadata JSON would be an appropriate place to indicate how columns are displayed (on a col-by-col basis). E.g., I'd like to be able to specify that only 20 chars of a given column be shown, and the font be monospace. But maybe I can do that in some other way - I barely know anything about datasette yet, sorry!

[terrycojones]

Meant to add that of course it would be better not to reinvent CSS (one time was already enough). But one option would be to provide a mechanism to specify a CSS class for a column (a cell, a row...) and let the user give a URL path to a CSS file on the command line.

[simonw]

Related: #862 - a time limit on the total time spent considering suggested facets for a table.

[simonw]

In #998 I implemented a horizontal scrollbar for these tables, which is a big improvement - demo here: https://global-power-plants.datasettes.com/global-power-plants/global-power-plants

[terrycojones]

Hi & thanks for the note @simonw! I wish I had more time to play with (and contribute to) datasette. I know you don't need me to tell you that it's super cool :-)

[CharlesNepote]

Perhaps some ways to address this.

1. Add a horizontal scrollbar at the top of the table. There are some solutions here: https://stackoverflow.com/questions/3934271/horizontal-scrollbar-on-top-and-bottom-of-table
2. Use a fixed table header. It would be useful when you're lost in the middle of a very big table. Pure CSS solutions seem to exist: https://stackoverflow.com/questions/21168521/table-fixed-header-and-scrollable-body
3. Maybe a possibility to resize columns. Not sure about that because it would more work not to lose it after each reload.
4. A way to keep favorite views for each user. The process would be: I select the column I want or not (with existing "settings" icon of each column); then I select a "favoritize view" option somewhere; then I can recall all my favorite views from a menu. These data could be hosted on the browser.

[simonw]

The jqDoubleScroll plugin is interesting: https://github.com/avianey/jqDoubleScroll/blob/master/jquery.doubleScroll.js

Here's a demo: https://6317eba21040d42c0228aab9--tiny-tarsier-c1f294.netlify.app/example.html

Wouldn't be too hard to port that to work without jQuery.

[simonw]

Or there's this recipe on StackOverflow that does the same thing without jQuery - there's an interactive demo on that page if you click "Run code snippet": https://stackoverflow.com/a/47038108/6083

All sorts of other potential solutions in that thread too.