St.data_editor modify the column headers font size

🎈 Using Streamlit
1

it seems current version of data_editor has no entry for modifying headers font size, background color and so on, I wonder if we can use some css to overwrite the original one to get it modified?
Thanks everyone for this awesome app.

2

@Siming_Yan Use st.markdown() to inject custom css:

  1. In your browser > click inspect element > select element (header)
  2. Change the css proprties to your liking (this is for quick live testing only)
  3. Copy the class name
  4. Inject CSS through st.markdwon():
st.markdown(
"""
<style>
    /*Data editor header class name*/
    .classname {
        font-size: 22px;
        background-color: red;
        padding: 1rem;
    }
</style>
""", unsafe_allow_html=True)
3

Hi Mr. Wizard,

Thank you for replying. I tried the way you mentioned here. It can be very useful on other elements, but for data_editor, the component is made by glideDataEditor in React JS I believe? ( Glide-Data-Grid / Docs - 03. Grid Columns ⋅ Storybook (quicktype.github.io))

Therefore a traditional css injection might be failed because there are deeper css rewriting this. I just making wild guess, so please correct me if I am wrong.

I saw the headers in glide-data-grid React JS is defined as:


<DataEditor
                   getCellContent={basicGetCellContent}
                   columns={[
                       { title: "Name", width: 250, icon: GridColumnIcon.HeaderString },
                       {
                           title: "Age",
                           width: 100,
                           icon: GridColumnIcon.HeaderNumber,
                           themeOverride: {
                               bgIconHeader: "#00967d",
                               textDark: "#00c5a4",
                               textHeader: "#00c5a4",
                           },
                       },
                       { title: "Avatar", width: 80, icon: GridColumnIcon.HeaderImage },
                   ]}
                   rows={50}
               />

so do you think there is a way to modify it?
thank you again

4

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.