itables buttons in html outputs

[RichardGillott]

itables buttons in html outputs

Hello, with Quarto 1.4 dashboards, we can now enable itables buttons as shown in the documentation.

The documentation states "All base options are available, as well as the options for the following extensions (which are automatically included by Quarto)" - but this only seems to be the case for dashboard outputs. Is there a way to enable this behaviour for html outputs, please?

[mcanouil]

Could you edit the title of the thread to state what this is about?

Could you share a small self-contained "working" (reproducible) example to work with of what you want as input, i.e., a complete Quarto document or a Git repository? Thanks.

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

````qmd
---
title: "Reproducible Quarto Document"
format: html
engine: knitr
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

![A placeholder image](https://placehold.co/600x400.png)

The end.
````

Additionally and if not already given, please share the output of quarto check within a code blocks (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[RichardGillott]

Hello, sure - I hope the examples below help:

In this dashboard example, itables buttons are displayed:

--- 
title: "Dashboard output"
format: dashboard
---

```{python}
import seaborn as sns
from itables import show

penguins = sns.load_dataset("penguins")
show(penguins, buttons = ['copy', 'excel', 'pdf'])

```

However, in a similar html example, buttons are not displayed. Is it possible to enable them, please?

--- 
title: "HTML output"
format: html
--- 

```{python}
import seaborn as sns
from itables import show

penguins = sns.load_dataset("penguins")
show(penguins, buttons = ['copy', 'excel', 'pdf'])

```

quarto check output:

Quarto 1.4.549
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.4.549
      Path: C:\Program Files\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: (external install)
      Chromium: 869685

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: C:\Users\[username]\AppData\Roaming\TinyTeX\bin\win32\
      Version: undefined

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
      Version: 3.11.5
      Path: C:/Users/[username]/AppData/Local/Programs/Python/Python311/python.exe
      Jupyter: 5.2.0
      Kernels: python3

[>] Checking Jupyter engine render....OK

[>] Checking R installation...........OK
      Version: 4.3.1
      Path: C:/Users/[username]/AppData/Local/Programs/R/R-4.3.1      
      LibPaths:
        - C:/Users/[username]/AppData/Local/Programs/R/R-4.3.1/library
      knitr: 1.45
      rmarkdown: 2.25

[>] Checking Knitr engine render......OK

[mcanouil]

@mwouts @cscheid do you have any insights here?
Probably related to Quarto table processing, but I can't see why it is so different between dashboard and simple html format.
I know there were some changes on both itables and Quarto side regarding table processing.

[cscheid]

We made a number of fixes to how itables are treated and styled, and they should be out soon in a new patch release of 1.4.

[mcanouil]

FYI as of the current development version (297a37e)

HTML	Dashboard

[mshqn]

Hello, I am having a similar issue. Is there any way to make Datatables extensions work in Quarto html files? https://mwouts.github.io/itables/extensions.html In my case, I need the searchBuilder instead of buttons but neither of them work in Quarto and both of them work in Jupyter.

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

"It does not work" is unfortunately never enough for anyone to do something.

[mwouts]

Hello, I am having a similar issue. Is there any way to make Datatables extensions work in Quarto html files? https://mwouts.github.io/itables/extensions.html In my case, I need the searchBuilder instead of buttons but neither of them work in Quarto and both of them work in Jupyter.

Hi there, I just gave it a try, and I can confirm that on my end the extensions DO work in a Quarto HTML document.

I have used itables==2.1.2 and quarto==1.4.549, and the source code for my .qmd document is available below. @mshqn I'd be curious to know what is different on your end.

---
title: ITables in Quarto
subtitle: Interactive Tables in HTML reports
standalone: true
format:
  html:
    code-line-numbers: false
jupyter:
  jupytext:
    text_representation:
      extension: .qmd
      format_name: quarto
      format_version: '1.0'
      jupytext_version: 1.16.1
  kernelspec:
    display_name: itables
    language: python
    name: itables
---

# Activate ITables

```{python}
import string

import numpy as np
import pandas as pd

from itables import init_notebook_mode, show
from itables.sample_dfs import get_countries
from itables.version import __version__


print(f"This is itables v{__version__}")


df = get_countries(html=False)
# Add columns for the searchPanes demo
df["climate_zone"] = np.where(
    df["latitude"].abs() < 23.43615,
    "Tropical",
    np.where(
        df["latitude"].abs() < 35,
        "Sub-tropical",
        # Artic circle is 66.563861 but there is no capital there => using 64
        np.where(df["latitude"].abs() < 64, "Temperate", "Frigid"),
    ),
)
df["hemisphere"] = np.where(df["latitude"] > 0, "North", "South")
wide_df = pd.DataFrame(
    {
        letter: np.random.normal(size=100)
        for letter in string.ascii_lowercase + string.ascii_uppercase
    }
)

init_notebook_mode(all_interactive=True)
```

# Testing DataTables' extensions with ITables in Quarto

## Buttons

```{python}
show(df, buttons=["copyHtml5", "csvHtml5", "excelHtml5"])
```

## SearchPanes

```{python}
show(
    df,
    layout={"top1": "searchPanes"},
    searchPanes={"layout": "columns-3", "cascadePanes": True},
)
```

## SearchBuilder

```{python}
show(
    df,
    layout={"top1": "searchBuilder"},
    searchBuilder={
        "preDefined": {
            "criteria": [
                {"data": "climate_zone", "condition": "=", "value": ["Sub-tropical"]}
            ]
        }
    },
)
```

## FixedColumns

```{python}
show(
    wide_df,
    fixedColumns={"start": 1, "end": 2},
    scrollX=True,
)
```

[mshqn]

@mwouts Thank you for your example. It helped me see that although I was sure that I updated itables in the environment I was using, in fact I did not. So the reason of my problem was simple: I had itables==1.7.0 in the environment for Quarto, and itables==2.1.2 in the environment for notebooks.

[mwouts]

Glad to hear that it helped! Oh I see you've been a long time user then 😉 Thanks for keeping me posted!

[mwouts]

@RichardGillott I think I know what the original problem was. Back in February only ITables==1.7 was available, and that version did not support the DataTables extensions. I do remember that although the extensions were not provided by ITables, by some magic (well I mean something outside of ITables) they were still available in some Quarto contexts.

Since ITables==2.0 (March 2024, cf. https://mwouts.github.io/itables/changelog.html) the extensions are bundled with ITables and now they are indeed expected to work in all the HTML rendering contexts. Would you mind confirming that they work for you too now?