Reactable-py table malformed in Desktop

[ivelasq]

System details:

Positron and OS details:

Positron Version: 2025.01.0 (Universal) build 152
Code - OSS Version: 1.95.0
Commit: 66aa3fb
Date: 2025-01-06T02:47:02.050Z (2 wks ago)
Electron: 32.2.1
Chromium: 128.0.6613.186
Node.js: 20.18.0
V8: 12.8.374.38-electron.0
OS: Darwin arm64 24.2.0

Interpreter details:

Python 3.13.1

Describe the issue:

When creating an interactive table using reactable-py v0.1.5 in a Quarto document, the table appears malformed in the Plot viewer after running the Python code chunk.

Steps to reproduce the issue:

1. Create a Quarto document.
2. Install reactable-py: https://machow.github.io/reactable-py/get-started/index.html
3. Add the following Python code chunk to the document:

---
format: html
---

```{python}
from reactable import Reactable, embed_css
from reactable.data import cars_93

# Note that currently this function is required
# to put css into notebooks.
embed_css()


Reactable(
    cars_93[["manufacturer", "model", "type", "price"]],
    default_page_size=5,
    searchable=True,
    filterable=True,
)
```

4. Run the Python code chunk in the Quarto document.

Expected or desired behavior:

The interactive table generated by reactable-py should display properly in the Plot viewer without visual or structural malformation.

Were there any error messages in the UI, Output panel, or Developer Tools console?

The following error appears in the Developer Tools console:

preload.js:1966 
        
GET vscode-webview://1etre38pfsuil6v9fq79h6pguphqvunpeas6kukb88s9fh67n9em/@widgetti/jupyter-react.js net::ERR_ACCESS_DENIED

[juliasilge]

I can confirm this problem. I bet it is some problem with how this package handles CSS (see the embed_css() function).

Also, it would make more sense for this type of HTML to go to the Viewer (not Plots), similar to how we handle the R package reactable objects.