How to make table rendering consistent across languages?

[emmansh]

I'm writing a Quarto document where I mix R, Python, and SQL code chunks. In each language I end up printing a table of data. However, tables are rendered differently. Is there a way to set a global rule to ensure that all tables, regardless of language, will be in the same format/aesthetics? In other words, is this a feature Quarto already has?

I did use

format: 
   html:
     df-print: paged

but it seems to affect only tables resulting from R code chunks.

The Python table (DataFrame) looks like a console print:

And the SQL table is just a thing of its own, although somewhat similar to R's table:

---

Is there a way to make all tables be rendered in the same format/style?

---

• I deployed the quarto page so you can play with it here.

• qmd code

  ---
  title: "how-tables-render-across-languages"
  format: 
     html:
       df-print: paged
  ---
  
  ## Set up python virtual environment
  I have created a python virtual environent using Windows CMD & python's `venv`, in the same quarto folder as this `.qmd`.
  I named that virtual environment as `env`, and installed some python modules there, such as `pandas` and `numpy`.
  Now, I need to tell quarto (via `{reticulate}`) to refer to `env` when executing python code chunks.
  ```{r}
  # R
  reticulate::use_virtualenv("./env", required = TRUE)
  ```
  
  ## Set up SQL
  ```{r}
  # R
  library(DBI)
  library(duckdb)
  library(ggplot2)
  ```
  
  ```{r}
  # R
  ## create connection to SQL database
  con <- DBI::dbConnect(duckdb::duckdb(), dbdir = "duckdb")
  ## copy mpg dataset from ggplot2 onto the SQL database, via `con`
  dbWriteTable(con, "mpg", ggplot2::mpg, overwrite = TRUE)
  ```
  
  ## Print tables from R, Python, and SQL in panel tabset
  ::: {.panel-tabset}
  
  ## R
  ```{r}
  ggplot2::mpg
  ```
  
  ## Python
  
  ```{python}
  import pandas as pd
  import numpy as np
  x = [1,2,np.nan]
  y = [3,4,5]
  df = pd.DataFrame({'x':x,'y':y})
  df
  ```
  
  
  ## SQL
  ```{sql, connection = con}
  SELECT manufacturer, displ, cty
  FROM mpg;
  ```
  :::
  

[mcanouil]

Write or use something that produces the same HTML/CSS output, or leave all the styling to Quarto by "printing" markdown tables.

To note, Quarto cannot standardise outputs of nearly infinity of functions designed to output tables (or anything), e.g., in R, there is already knitr::kable, gt, DT, and many more, also these produces markdown or HTML with their own stylesheet.

[emmansh]

Thanks for replying!

Write or use something that produces the same HTML/CSS output, or leave all the styling to Quarto by "printing" markdown tables.

Could you elaborate on that or suggest how? I'm pretty new to quarto so would appreciate any guidance :)

[mcanouil]

This is independent of Quarto.
Quarto is using Boostrap (https://getbootstrap.com/docs/5.1/content/tables/), so you have access to all the CSS classes.
You can write an R function, Python function, etc. to output HTML with your styling.

Or write/use function printing markdown, such as knitr::kable in R, then styling will be up to Quarto. (https://www.w3schools.io/file/markdown-table/)

To note df-print is an R option (https://quarto.org/docs/computations/r.html#data-frames), so it won't be used by everything else.

[emmansh]

I see. Well unfortunately I don't know how to go about this. For instance, I have no clue how the SQL code chunks end up looking this way and not otherwise, nor do I know how to customize the SQL table print to be in plain markdown.

[mcanouil]

You could use your browser developer mode to look at the table and the associated CSS, then overwrite it to your convenience.

[emmansh]

I found a DT::datatable() solution based on this issue comment.

It is not perfect. It relies on an additional R chunk to print the dataframe/tibble/python-DataFrame/SQL-table. But it does work and it gives a consistent look to all tables in the .qmd -> HTML page, regardless of language.

```{r}
#| echo: false
library(reticulate)
use_virtualenv("./env", required = TRUE)
```


## Set up SQL
```{r}
# R
library(DBI)
library(duckdb)
library(ggplot2)
```

```{r}
# R
## create connection to SQL database
con <- DBI::dbConnect(duckdb::duckdb(), dbdir = "duckdb")
## copy mpg dataset from ggplot2 onto the SQL database, via `con`
dbWriteTable(con, "mpg", ggplot2::mpg, overwrite = TRUE)
```

## Print tables from R, Python, and SQL in panel tabset
```{r}
#| echo: false
# display NaN cells in DT::datatable()
options(htmlwidgets.TOJSON_ARGS = list(na = 'string')) # https://stackoverflow.com/a/48694410/6105259

print_as_dt <- function(x){
  DT::datatable(x,
                rownames = FALSE,
                options = list(
                  dom = 'ltipr', # to remove search box; https://stackoverflow.com/a/61952067/6105259
                  autoWidth = TRUE,
                  columnDefs = list(
                    list(className = 'dt-left', targets = "_all"),
                    list(width = '200px', targets = "_all")
                    )
                  )
                )
}
```

::: {.panel-tabset}

## R
```{r}
ggplot2::mpg |> 
  dplyr::select(manufacturer, displ, cty) |> 
  print_as_dt()
```

## Python

```{python}
import pandas as pd
import numpy as np
x = [1,2,np.nan]
y = [3,4,5]
df = pd.DataFrame({'x':x,'y':y})
```

```{r}
#| echo: false
print_as_dt(py$df)
```


## SQL
```{sql}
#| connection: con
#| output.var: "tab_sql"
SELECT manufacturer, displ, cty
FROM mpg;
```

```{r}
#| echo: false
print_as_dt(tab_sql)
```

:::

[cscheid]

That's a clever workaround, I like it!

Quarto currently doesn't have such a feature. We'll be working on it in the next 3-6 months.

In the meantime, the issue is that we defer the styling of the tables to individual libraries, and different libraries tend to make different choices. We want to design something that allows libraries the option to control formatting, while also providing an option for quarto to take over formatting.

Still, I like your idea of serializing the table and sending it through your preferred library while we figure this all out.

[emmansh]

Thanks, @cscheid.

In fact, I realized that the solution I posted above with DT::datatable() is limited because it works poorly with dark themes. In my case, my _quarto.yml specifies:

format:
  html:
    theme:
      light: cosmo
      dark: superhero

So I ended up with a different solution that relies on {kableExtra} package:

library(kableExtra)

print_table <- function(tbl, n_rows = 10){
  tbl |> 
    head(n_rows) |> 
    kableExtra::kbl(row.names = FALSE) |> 
    kableExtra::kable_styling(bootstrap_options = "striped", full_width = FALSE, position = "left")
}

This one works well with both light (cosmo) and dark (superhero) themes. I played around with kableExtra functions, including kable_classic(lightable_options = "hover") which gives a nice effect of highlighting the row being hovered (see here for example). Unfortunately, this doesn't work well in Quarto's dark themes.

My knowledge of HTML and CSS is minimal, so I can't tell why some things work (e.g., my print_table()) while others don't.

Also, the print_table() solution, while OK with light/dark themes, isn't giving me the nice paging feature that DT::datatable() has, which is unfortunate. But I guess I can't have it all...

[cscheid]

Yes, you're seeing that because kable and DT::datatable are completely different implementations (which are also different from GT, or from flextables, or from pandas's table output.. As you can see, table printing is complicated :))