How to use Quarto embed to include notebook output which is a pandas DataFrame but with correct column title alignment?

[lgonzalezsa]

Description

Exploring the notebook embed option and notice the pandas DataFrame does not render properly, specifically the header or column names, which are shifted to the right.

There is a way to show the headers or column names properly when using embed?

Here reproducible example: https://github.com/lgonzalezsa/hello_quarto/blob/main/test/presentation.md

Using Quarto 1.3.450

[mcanouil]

You need to disable Quarto processing (https://quarto.org/docs/authoring/tables.html#disabling-quarto-table-processing) or to output raw HTML code.
See Pandas and IPython documentation to tweak outputs.

[lgonzalezsa]

Thank you for your response! I was able to test the IPython display Markdown option and the pandas.to_markdown()
However not sure if I applied properly the disabling quarto table processing option. From the documentation assumed I could replaced the html as follow:

html = markdown_string.to_html().replace(
    "<table>", '<table data-quarto-disable-processing="true">'
)
Markdown(html)

Here the result of my testing:
https://github.com/lgonzalezsa/hello_quarto/blob/test_website/test/presentation.md

[mcanouil]

You can check the results in the intermediary file using keep-md: true.

[lgonzalezsa]

Now I can see intermediary files.
The extra info I see is: echo:false,warning:false,asis:true,eval:false
Not different as when I do not use the '<table data-quarto-disable-processing="true">' option.

Testing with `table data-quarto-disable-processing` using the pandas Styler

<!-- 12A0366C|/workspaces/hello_quarto/test/presentation.qmd|:testing.ipynb#tbl-test-to-markdown-option-quarto-disable |  | echo:false,warning:false,asis:true,eval:false -->

Checking the resultant html file, after fixing the replace condition from:

html = markdown_string.to_html().replace(
    "<table>", '<table data-quarto-disable-processing="true">'
)
Markdown(html)

to:

html = markdown_string.to_html().replace(
    "<table ", '<table data-quarto-disable-processing="true" '
)
Markdown(html)

Now I can see the html having the data-quarto-disable-processing="true"

However, the output seems no different as when I don't use the option.

In any case, the .to_markdown() using IPython seems to work fine for the majority of the tables, just odd ?(caption) label not working when I use pandas Styler html output.

[mcanouil]

Could you share a small reproducible example?

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

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

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)
```

The end.
````

[lgonzalezsa]

I thought I shared a minimum reproducible example in my initial post, maybe not a clean repo, sorry for that.

Here a new clean branch on same repo: https://github.com/lgonzalezsa/hello_quarto/tree/test_embed

The output is already there in the ipynb, then you don't need to run the code but if you like it is possible as well.

The feature I am testing is the embed from another ipynb notebooks (running Python kernel) and consolidating my narrative in a qmd file, then for that reason I am not using backtick blocks but instead using the embed directive. I need to create my narrative in a separate file from my computations.

With regard to the disabling-quarto-table-processing option, in line 1061 of html output I see it enable, hoping is the right HTML.

What I mentioned in the previous post is that to me, there is no effect on putting or not the disabling-quarto-table-processing, the HTML seems to me to render fine with or without the option. Certainly, the figure/table caption issue was not expected.

[mcanouil]

Could you really keep it simple without all the temporary files, log files, "copy" files, "docs" folder, etc.
Focus only on the needed files to reproduce your issue.

[lgonzalezsa]

Here new repo: https://github.com/lgonzalezsa/quarto_embed
Only 3 files.

[mcanouil]

Unfortunately since you did not provide requirements.txt it is not reproducible as you apparently don't use the latest of the python modules.

[mcanouil]

Also, if you want to output markdown html table, then you need to do so in a raw HTML block ```{=html}.

[mcanouil]

Quarto document

---
title: "How to use Quarto embed"
author: "Luis R. Gonzalez"
date: "August 21, 2023"
format: html
---

## Embed 1

{{< embed demo.ipynb#tbl-test-pandas1 >}}


## Embed 2

{{< embed demo.ipynb#tbl-test-pandas2 >}}

demo.ipynb

---
skip_exec: true
title: Testing cross-reference with holoviews charts
author: "Luis R. Gonzalez"
date: 'Aug 20, 2022'
format:
    html:
        code-fold: true
output-file: cross.html
description: Testing cross reference with holoviews
---

```{python}
#| label: tbl-test-pandas1
#| tbl-cap: Embedding a table with panda styler local
import pandas as pd

# create a sample dataframe
data = {'Name': ['John', 'Jane', 'Bob', 'Alice'],
        'Age': [25, 30, 35, 40],
        'City': ['New York', 'Paris', 'London', 'Tokyo']}
df = pd.DataFrame(data)

# format dataframe with blue text and right-aligned content
styled_table = df.style.set_properties(**{'color': 'blue', 'text-align': 'right'})

# generate HTML table
html_table = styled_table.to_html()

# display HTML table
from IPython.core.display import HTML
HTML(html_table)
```

```{python}
#| label: tbl-test-pandas2
#| tbl-cap: Embedding a table with panda styler local
HTML(html_table.replace(
  "<table ", '<table data-quarto-disable-processing="true" '
))
```

[lgonzalezsa]

Thank you very much! I changed the code to use HTML (from IPython.core.display import HTML) instead of Markdown and caption shown.
Included your examples as well and all works, awesome!

My bad for not adding the requirements.txt, I updated the repo accordingly.

2023-08-24.15-35-38.mp4