Search code examples
html-tablejuliastylingplotly-dash

Formatting HTML tables in Julia with Dash


I am trying to format an HTML table using Dash in Julia. Based on the third example from the Julia Plotly page, I am using the "generate_table" function:

function generate_table(dataframe, max_rows = size(dataframe)[1])
    html_table([
    html_thead(html_tr([html_th(col) for col in names(dataframe)])),
    html_tbody([
        html_tr([html_td(dataframe[r, c]) for c in names(dataframe)]) for r = 1:min(nrow(dataframe), max_rows)]),
    ])
end

and calling this function with a dataframe, cleverly called "df":

generate_table(df)

This works fine, but the resulting table is shoved against the left-hand side of the webpage. How can I style the table to be centered on the page?

I've tried defining the style of the html_table using this example from Python, using style="text-align:center" or style=["text:align:center"] at the end of the html_table` tag as in the following example. Since Julia no longer uses curly brackets, I've changed the curly brackets in the Python example to both parentheses and square brackets (and no brackets at all), but still have not found a solution.

function generate_table(dataframe, max_rows = size(dataframe)[1])
    html_table([
    html_thead(html_tr([html_th(col) for col in names(dataframe)])),
    html_tbody([
        html_tr([html_td(dataframe[r, c]) for c in names(dataframe)]) for r = 1:min(nrow(dataframe), max_rows)]),
    ], style="text-align:center")
end

This generate_table function gives me this error on the resulting page:

enter image description here

I've tried looking for Julia-based examples of how to style these tables, but I'm not finding much.


Solution

  • Style arguments — like all key-value-like arguments — are passed as dictionaries. The transliteration of a python dict like {'text-align': 'center'} is a Dict:

    style = Dict("text-align"=>"center")
    

    Note that you can also use NamedTuples for a more succinct shorthand, but dashes aren't valid Julia identifiers so you instead use camelCase:

    style = (textAlign="center",) # The comma is important!