Stewart_R Stewart_R - 2 months ago 14
CSS Question

How to make FsLab tables render nicely?

Is there some template or trick to help data tables render nicely in FsLab? The tables I produce are not as pretty as the tables I see in samples/tutorials.

As an example, when I do this example I end up with a table that looks like this:

enter image description here

whereas the sample on Tomas' walkthrough looks much prettier with the fonts & look/feel matching the surrounding page:

enter image description here

Is there some theme, setting or control in FsLab that I am missing or is Tomas just doing some css wizardry on his site?

It seems like most of the other examples I see on the web look much closer to the pretty version than the version I see

Answer

The recent version of FsLab changed how the formatting works - rather than having built-in formatters for Deedle, it now uses fsi.AddHtmlPrinter, which also works in Atom.

The styling for tables is currently hard-coded in the formatter for Deedle.

I think it should be possible to override those with the appropriate CSS - after all, the generated document is just HTML.

One other trick in the new version of FsLab is that it generates different HTML when you run it "live" (then it can load all data from a table on demand) and when you run it in offline mode (then you get standalone HTML).

You can explicitly change this by adding the following to the script:

#if HAS_FSI_ADDHTMLPRINTER
fsi.HtmlPrinterParameters.["html-standalone-output"] <- true
#endif

The journal template is still a beta version, so the documentation is sadly a bit lacking.