Modifying table cells from javascript (dom node modified but not the page)

[vspinu]

Summary

I try to adjust the html of some of the table cells directly from JS but, while DOM nodes are modified rendered page is not.

import streamlit as st
import pandas as pd

st.data_editor(pd.DataFrame({"id": ["a", "b", "c"], "col": [1, 2, 3]}))

In the chrome’s console modify the “id” nodes:

function fixids(xpath = './/tr/td[2]') {
    let nodes = $x(xpath)
    for (i=0; i < nodes.length; i++) {
      nodes[i].innerHTML = 'blabla'
    }
    return nodes
};
fixids()

The nodes are modified but the rendered table stays the same.

Why is this happening and what could be done to fix it?

Many thanks!

[mathcatsand]

I’m not an expert frontend developer, but the dataframes are much more complicated than a simple table. They are dynamic elements which include things like sorting, so they are very difficult, perhaps impossible to edit like that. If you want to tweak the HTML of your tables (understanding that you’d lose the dynamic/sorting capabilities), you can try a static table instead. Pandas also has a .to_html() method and you could use st.markdown(df.to_html(), unsafe_allow_html=True).

[vspinu]

I figured out the reason behind this issue but no good idea of how to workaround.

glide-data-grid component on which streamlit dataframes are based is a very complex piece of software which is using canvas2D as a front-layer and the actual table underneath is a kinda template. So users interact with the canvas not the actual table.