Could you recommend a scaling for HTML (datatables.net) tables?

[mwouts]

Description

Hi, I am trying to provide examples on how to use itables in Quarto documents (see this question).

I find that itables works very well in Quarto HTML documents, with e.g.

---
title: ITables in Quarto (HTML)
author: Marc Wouts
standalone: true
format:
  html
---

You can use `itables` in
[Quarto HTML](https://quarto.org/docs/reference/formats/html.html) documents.
It works exactly the same way as for your Jupyter notebooks.

```{python}
from itables import init_notebook_mode
from itables.sample_dfs import get_countries

init_notebook_mode(all_interactive=True)
```

```{python}
get_countries()
```

It also works well in Quarto RevealJS documents, however I find that I need to adjust the document dimensions manually if I want the table to fit within the page:

---
title: ITables in Quarto (RevealJS)
author: Marc Wouts
standalone: true
format:
  revealjs:
    width: 2240
    height: 1400
---

You can use `itables` in
[Quarto RevealJS](https://quarto.org/docs/reference/formats/presentations/revealjs.html) presentations.

It works exactly the same way as for your Jupyter notebooks.

Because the font size in presentations is usually quite large, you might need to increase the dimensions
of your presentations. Here I have used:
```
format:
  revealjs:
    width: 2240
    height: 1400
```

---

```{python}
from itables import init_notebook_mode, show
from itables.sample_dfs import get_countries

init_notebook_mode(all_interactive=True)
```

```{python}
show(get_countries(), dom='tipr')
```

Maybe changing the document size is not the best approach? Can you think of better alternatives?

I have tried using a ~~~{.smaller} paragraph around the show command, but that was not enough. Also I was thinking that maybe we could show less rows by default with itables's lengthMenu command. Any other recommendations on this? Do you have to do anything special to adjust the size of the table shown in the revealjs demo?

[mcanouil]

Use itables to format the output, it's all described in the documentation, for example:

• https://mwouts.github.io/itables/custom_css.html
• https://mwouts.github.io/itables/advanced_parameters.html#position-and-width

You're gonna need to disable Quarto table processing (see https://quarto.org/docs/prerelease/1.3/tables.html#html-tables-are-now-processed-in-every-format):

show(get_countries(), attrs="data-quarto-disable-processing='true'")

[mwouts]

Hey @mcanouil , thank you for your answer. Very helpful indeed. What do you think of this?

import itables.options as opt


# opt.lengthMenu = [5, 10]
opt.css = ".itables { font-size: medium; }"
opt.style = 'data-quarto-disable-processing="true" table-layout:auto;width:100%'

(see also the full example at https://github.com/mwouts/itables/blob/document_quarto/docs/quarto/quarto_revealjs.qmd)

The font size seems to work well, however I am not sure that the style modification is required. What do you think is the appropriate style? Sorry for asking - I am far from being an HTML expert.

Re data-quarto-disable-processing='true', is this supposed to fix this warning? (it's still there actually)

WARNING: Unable to parse table from raw html block: skipping.

[mcanouil]

Styling is a question of taste.
Mine is not yours.

data-quarto-disable-processing='true' is to literally do what it says it does, i.e., without or set to false allows Quarto to inject CSS and style the table by itself, regardless of if it's right/pretty or not.
Try for yourself, keep everything and set it to false, you'll see that none of your options are respected anymore.

[mwouts]

I see. I will add the support for the data-quarto-disable-processing option in itables then.

One more question and then I'll be done. In the revealjs slides that I have generated here, the table appears with the expected dimensions first, but if I reload the page, it becomes much wider.

That's a pattern that I have also seen with Plotly plots. The first time the plot is displayed, the dimensions are not always right, but when I refresh the page the dimensions become right. Is this a behavior (different size on reload) that you have experienced already? Thanks!

[mcanouil]

No, but Reveal.js is a JavaScript framework to format and display elements.
Since plotly and itables also uses JavaScript to allow interactivity, it's possible there are some conflicts or latencies.