Unable to display itables in a Quarto Dashboard.

[mhusted]

Description

I'm trying to implement itables with Quarto Dashboard. I've been trying to figure it out but I haven't really been able to.

Here how I implemented it so far:

@reactive.calc
def filtered_penguins():
    # Access input values correctly
    selected_species = input.species()
    selected_islands = input.islands()
    
    # Filter the penguins dataset
    data = penguins[penguins["species"].isin(selected_species)]
    data = data[data["island"].isin(selected_islands)]
    return data 

This is where filtered_penguins is coming from.

from itables import show

#| title: Table
@render.table
def dataview():
    data = filtered_penguins()
    return show(data)

I would like it to be dynamic based on specific filters on dashboard, but when I try to preview the dashboard the table doesn't appear.

[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.

---

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.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

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.

[mhusted]

Sure, I hope this is good enough.

---
title: "Palmer Penguins Heatmap and Table"
author: "Cobblepot Analytics"
format: dashboard
server: shiny
---

```{python}
#| context: setup
import seaborn as sns
import pandas as pd
from shiny import reactive
from shiny.express import render, ui
import matplotlib.pyplot as plt
import plotly.graph_objects as go
import os
from dash import dash_table, dcc, html

# Load the penguins dataset
penguins = sns.load_dataset("penguins")

# Define the path to the output directory
output_dir = "output"
if not os.path.exists(output_dir):
    os.makedirs(output_dir)

```

# {.sidebar}

![](images/penguins.png){width="80%"}

```{python}
# Define checkboxes for filtering by species
species = list(penguins["species"].value_counts().index)
ui.input_checkbox_group(
    "species", "Species:",
    species, selected=species
)

# Define checkboxes for filtering by islands
islands = list(penguins["island"].value_counts().index)
ui.input_checkbox_group(
    "islands", "Islands:",
    islands, selected=islands
)

# Define select input for distribution type
ui.input_select(
    "dist", "Distribution Type:",
    choices=["kde", "hist"], selected="kde"
)

# Define checkbox for rug plot
ui.input_checkbox("rug", "Show Rug Plot", value=True)

# Define a reactive calculation that filters the dataset based on inputs
@reactive.calc
def filtered_penguins():
    # Access input values correctly
    selected_species = input.species()
    selected_islands = input.islands()
    
    # Filter the penguins dataset
    data = penguins[penguins["species"].isin(selected_species)]
    data = data[data["island"].isin(selected_islands)]
    return data
```



# Plots

## Row
```{python}
import tempfile
import plotly.io as pio

@render.ui
def heatmap():
    # Filter data and create a pivot table
    filtered_data = filtered_penguins()
    heatmap_data = filtered_data.pivot_table(
        index="species", columns="island", aggfunc="size", fill_value=0
    )
    
    # Define custom hover text for each cell
    hover_text = [[f"Species: {species}<br>Island: {island}<br>Count: {count}"
                   for island, count in zip(heatmap_data.columns, row)]
                  for species, row in zip(heatmap_data.index, heatmap_data.values)]
    
    # Generate the interactive heatmap with customized hover text
    fig = go.Figure(
        data=go.Heatmap(
            z=heatmap_data.values,
            x=heatmap_data.columns,
            y=heatmap_data.index,
            text=hover_text,  # Add custom hover text
            hovertemplate="%{text}<extra></extra>",  # Suppress additional info
            colorscale="YlGnBu",
            hoverongaps=False,
            colorbar=dict(title="Count")
        )
    )
    fig.update_layout(
        title="Penguin Count by Species and Island",
        xaxis_title="Island",
        yaxis_title="Species",
    )
    
    # Convert Plotly figure to HTML
    html_content = pio.to_html(fig, full_html=False)
    
    # Render the HTML content inline
    return ui.HTML(html_content)

```

## Row {.tabset}

```{python}
#| title: Distribution
@render.plot
def depth():
    # Access the filtered data and input values correctly
    data = filtered_penguins()
    distribution_type = input.dist()
    show_rug = input.rug()
    
    sns.displot(
        data, x="bill_depth_mm",
        hue="species", kind=distribution_type,
        fill=True, rug=show_rug
    )
```

```{python}
from itables import show

#| title: Table
@render.table
def dataview():
    data = filtered_penguins()
    return show(data)

[mhusted]

Here is the output from quarto check

Quarto 1.6.31
[>] Checking environment information...
      Quarto cache location: C:\Users\aurmhust\AppData\Local\quarto
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.46.3: OK
      Typst version 0.11.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.6.31
      Path: C:\Users\aurmhust\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

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

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: C:\Users\aurmhust\AppData\Roaming\TinyTeX\bin\windows\
      Version: 2024

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

[>] Checking Python 3 installation....OK
      Version: 3.9.20 (Conda)
      Path: C:/Users/aurmhust/Miniconda3/envs/quarto_framework/python.exe
      Jupyter: 5.7.2
      Kernels: python3, myenv

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

[>] Checking R installation...........OK
      Version: 4.2.2
      Path: C:/Users/aurmhust/AppData/Local/Programs/R/R-4.2.2
      LibPaths:
        - C:/Users/aurmhust/AppData/Local/Programs/R/R-4.2.2/library
      knitr: 1.41
      rmarkdown: 2.18

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

[mhusted]

I figured it out after doing some testing. I was able to get it to work with this:

```{python}
#| title: Table 
@render.ui
def dataview():
    data = filtered_penguins()
    return ui.HTML(itables.to_html_datatable(data))
```