How do I display a table in a dashboard, filtered by UI inputs?

[simonada]

Description

I am trying to create an interactive dashboard with quarto version 1.5.56, using python. I am using shiny to get inputs from the user that allow to filter the data, but I have problems integrating that with a table visual. Any help would be appreciated!

Here are the first few rows of my data (it is public):

nct_id	brief_title	phase	overall_status	cluster	x	y
NCT00000307	Naltrexone as Adjunct in Alcoholic Cocaine Dependent Patients - 4	Phase 2	Completed	Disorder caused by cocaine	-21.18816944313050	-103.92691702765200
NCT00000333	Evaluation of Benztropine for Cocaine Craving - 2	Phase 2	Completed	Disorder caused by cocaine	-20.67828478796160	-107.76614900836300
NCT00000428	Combining N-of-1 Trials to Assess Fibromyalgia Treatments	Phase 4	Completed	Pain	28.749196308532700	6.979771258582180

I want to have one tab where the data is displayed as a table, and I also want to pre-filter it depending on the selections made by the user. I have tested displaying the full table with itables and it works. But I am not able to figure out how to integrate this with the interactivity functionality. When I run quarto preview <>.qmd I can see in the outputs this message, which I believe points to the problem:

WARNING (/Applications/quarto/share/filters/main.lua:9383) Unable to parse table from raw html block: skipping.

But I really can't find an example on how to correctly implement it. Below is the relevant part from my qmd file. The problematic function is def table_ui(): where besides @render.plot I also tried @render.data_frame with no success:

---
title: "NeuoTrialomics"
logo: stride_lab_logo_transparent.png
server: shiny
favicon: favicon.ico
format: 
  dashboard:
    scrolling: true 

---

```{python}
#| context: setup
import math
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
from shiny import render, reactive, ui
from shinywidgets import render_widget  

import pandas as pd
import plotly.express as px
```

```{python}
#| title: Filter Options
#| expandable: false

df = pd.read_csv("data_for_dashboard.csv")

cluster_options = ['Show All (C)'] + list(df['cluster'].unique())
phase_options = ['Show All (P)'] + list(df['phase'].unique())
status_options = ['Show All (S)'] + list(df['overall_status'].unique())
```

## {.sidebar}
```{python}
ui.input_select("cluster_name2", "Select Cluster", choices=cluster_options, selected='Show All (C)')
ui.input_select("phase_name2", "Select Phase", choices=phase_options, selected='Show All (P)')
ui.input_select("status_name2", "Select Status", choices=status_options, selected='Show All (S)')
```

```{python}
@reactive.calc
def filtered_trials():
    cluster = input.cluster_name2()
    phase = input.phase_name2()
    status = input.status_name2()

    filtered_df = df
    if cluster != 'Show All (C)':
        filtered_df = filtered_df[filtered_df['cluster'] == cluster]
    
    if phase != 'Show All (P)':  # Assuming "Show All (P)" is the label for showing all phases
        filtered_df = filtered_df[filtered_df['phase'] == phase]
    
    if status != 'Show All (S)':  # Assuming "Show All (S)" is the label for showing all statuses
        filtered_df = filtered_df[filtered_df['overall_status'] == status]

    return filtered_df
```

## Row

### Column {.tabset width="80%"}

```{python}
@render_widget  
def tane_scatter():  
    filtered_df = filtered_trials()
    cluster = input.cluster_name2()
    scatterplot = px.scatter(
        filtered_df, 
        x='x', 
        y='y', 
        color='cluster',
        hover_data={'x': False, 'y': False, 'nct_id': True, 'brief_title': True},
        title=f"t-SNE Visualization of {'All Clusters' if cluster == 'Show All' else cluster}",
        labels={'x': 't-SNE X', 'y': 't-SNE Y'},
        template="plotly_white",
        #legend='cluster'
    ).update_traces(marker=dict(size=10, line=dict(width=1, color='DarkSlateGrey')))#.update_layout(
        #width=900,
        #height=700,
        ##)
    return scatterplot  
```

```{python}
#| height: 50%
#| padding: 0;
from itables import show

df_to_show = df[['nct_id','brief_title','phase','overall_status','cluster']]
show(df_to_show, paging=True, buttons = ['excel'])
```

```{python}
#| height: 50%
#| padding: 0;
from itables import show

@render.plot
def table_ui():  
    filtered_df = filtered_trials()
    df_to_show = filtered_df[['nct_id','brief_title','phase','overall_status','cluster']]
    show(df_to_show, paging=True, buttons = ['excel']) 
```

[simonada]

Ok, I found one solution:

@render.data_frame
def datagrid():
    filtered_df = filtered_trials()
  
    df_to_show = filtered_df[['nct_id','brief_title','phase','overall_status','cluster']]
    return render.DataGrid(
        df_to_show,
        width="100%",
        filters=True,
    )

However I have two follow-up questions here:

1. Is there a way to enable download of the data?
2. I would also like for one column to be a hyperlink (clickable url) - any suggestions how to achieve this?

Many thanks in advance!

[mcanouil]

Take a look at itables and shiny documentation as this is done by those two libraries you are using. Quarto is not really doing anything here.

[jimjam-slam]

You could also use OJS to display inputs and a filtered table 😊

The example in the Quarto docs uses inputs to filter a plot, but you could just as easily use an [Observable Inputs Table][(https://observablehq.com/framework/lib/inputs) as the plot that receives the filtered data. That page has an example of this with a sport dropdown.