Paging, column visibility selectors invisible in ITable (2.4.0, marimo/anywidget)

[liquidcarbon]

When used in marimo, the UI that opens on clicking colvis or pagination is hidden and unusable.

The helpful "X rows copied to clipboard" message that appears on copying is also hidden; the contents do go into the clipboard.

When you click on either of the buttons, a second scroll bar appears on the right, suggesting it's a CSS issue.

https://marimo.app/l/w73z4l (may need to run 2-3 times while it installs packages)
or:

import pandas as pd
from itables import options as itoptions
from itables.widget import ITable

itoptions.layout = {
    "top": {
        "buttons": [
            {
                "extend": "copyHtml5",  #  <--- THE COPY BUTTON
                "messageBottom": None,
                "messageTop": None,
                "title": None,
            },
            "csvHtml5",
            {
                "extend": "colvis",
            },
            "pageLength",
        ],
    },
    "top2": "search",
    "top3": "info",
    "topStart": None,
    "topEnd": None,
    "bottom": "paging",
    "bottomStart": None,
    "bottomEnd": None,
}

df = pd.DataFrame({"x": [2, 1, 3], "y": list("cbc")})

ITable(df)

[mwouts]

As discussed at #388 this problem is likely connected to the shadow DOM used by Marimo for displaying widgets. We don't have many examples of datatables.net being displayed in a shadow DOM, so I will leave this issue open until we have more insight on how to address that challenge - but that will likely require changes on datatables.net itself.

I will make a note of this problem in the documentation. In the meantime I see that fallbacking to the mo.iframe is a workaround for this issue - it might have limitations however, like e.g. requiring an internet connection