CSS help needed for table formatting in Julia package

Offtopic
1

I am working on a Julia package that supports the Tables.jl interface. It does one thing: given a table, it formats it into HTML for browsing:

I would like to implement the following in CSS: for large tables, have the header (<thead>) fixed at the top of the screen, and the table body (<tbody>) scrollable if it does not fit on the screen. I am looking for a pure CSS solution, no JS. As simple as possible, with reasonable browser support (or a sensible fallback).

Help in the form of a PR would be appreciated. (I of course tried searching online, but ended up with so many options, many of which did not work, that I gave up for now).

1 Like
2

It’s a little rough, but not too bad for a quick answer
tested on firefox here

<style>
thead {position:fixed; color:green; background-color:white; z-index:10}
tbody {color:blue; position:relative; top:2em;}
tfoot {color:red; position:relative; top:2em;}
table {padding: 0 0 2em 0} //2em is a little bit nicer

thead th {width:5em;} // set some minimum widths
tbody td {width:5em;}

I think it looks ok, simple and perfect with css isn’t too easy

3

Thanks, but I am not looking for the “rough” solution, I found plenty of those online.

I can accept if there is no clean solution (in the sense of something that does not rely on fixed dimensions for elements, JS, browser-specific hacks, etc), then I just don’t implement this feature — so that would also be useful information.

4

Have you seen TableView? @pfitzseb is working on a new and improved version so you could use that instead. Not sure whether there are strong reason to prefer HTLM table versus “excel style”.

As for your question, all solutions seem a bit hacky so it may be better to simply rely on a js library for more advanced table rendering.

5

I came to the conclusion that this is not possible at the moment. I will just keep the header at the top.

6

I think that is something different (if I understand correctly).

I just need a very compact view of a table supported by Tables.jl, no editing (in fact, the Tables.jl interface does not require/support modification).

(Also, after the long upgrade period to JuliaDB.jl, I am wary of using anything from JuliaComputing for production.)

7

TableView does not actually support editing (which indeed is a bit confusing as you can edit the field in the spreadsheet but that has no effect on the underlying Julia data). I had created a TableWidgets package for this (that I can’t upgrade yet as it depends on JuliaDB), but I was wondering whether it’d be better to do a more lighweight version of generally useful widgets for tables (for display / filtering / manipulations) that only depends on basic packages .

2 Likes
8

So to make the table scrollable instead of the page, you can wrap in a div and use

.divstyle{ position:relative; overflow-y:scroll; overflow-x:auto; max-height:90vh;
   border: 2px solid black; }

You could combine this with a seperate header table instead of using position:fixed on the top row
It would be pretty nice to have a css column toggle/select but that one might just be easier on the julia side

9

Again, I am at the limits of my knowledge of CSS, PRs are welcome.

10

My PR to TableViews doesn’t include any editing capabilities and should soon be a pretty good option to display arbitrarily large datasets.
A non-JS fallback might be useful – do note that it’s usually not a good idea to display many (> 500 maybe?) rows in pure HTML though so it’d probably be good to limit the number of displayable rows.

1 Like
11

I just tried 100_000 rows with BrowseTables.jl, and it displays just fine in about 2 seconds (Firefox 64.0b2, Linux, just a normal 3-year old laptop, I have about 30 other tabs open). This is precisely why I am keeping it simple, with a relatively clean HTML.

12

I made a pr, here is a demo of the output

13

Thanks, but unfortunately the rows and the header look misaligned:
table

14

Seems to be a side effect of the different position: type. It’s quite easy to set all the widths larger than the longest probable header field but it loses out on compactness.

15

This is impossible to know in advance. Also, compactness is a priority. Thanks for the PR but I think I will keep the package as is.

16

github: You can’t comment at this time. -Posting here instead

It did make visible a few other glitches with the position:fixed approach, and could be handy for database-like linked tables. I’m not super-familiar with how github does it’s pr’s and branch merges yet, so that was a little unexpected. Any thoughts on the Scrolltables.css approach?

17

Github is apparently experiencing a problem, I am seeing this too in other repos (I got a message that you closed the PR, but it is still open). I hope this is not becoming systematic.

Regarding the PR: as I commented on it there, I am reluctant to specify width manually, as it would sacrifice compactness. Lacking that, I think the misalignment remains, isn’t that so? Also, I don’t want multiple tables in a file, that’s what browser tabs are for.

18

Misalignment is fixed by position:sticky, and the widths are still there but seem to shrink when required in firefox at least (~30 cols with short headers and data -expanded to 49 - shrunk). I think we’re both happy enough with our seperate versions

19

Thanks for your help, I have released and announced the package. Now with fixed footers, too! :tada:

2 Likes
20

Looks good =)

I just had a thought for very wide tables, you could probably use the sticky trick again with left:0 on the row_id columns. Maybe something for the next release

You’re quite welcome, hit us up if there’s any other css you get stuck with

2 Likes