Center dataframe header

šŸŽˆ Using Streamlit
1

Morning, guys. Could you help me? Iā€™ve been struggling to get to center the dataframe header text. These column names style are kind of hard to change. I tried to use CSS, but I barely know CSS and it was really hard to locate the ā€œcss addressā€ of what I had to change. In my streamlit dashboard, I could change form style and its button. But itā€™s been hard to do this with the dataframe.

st.markdown(ā€œā€"

.stButton > button {
background-color: rgb(245, 245, 245);
width: -webkit-fill-available;
}

.css-1544g2n h2 {
        text-align : center;
        color : white;
        font-weight: bold;
        font-size: 1.8rem;
}

.css-r421ms {
        border: 1px solid rgba(255, 255, 255, 2);
}

</style>

ā€œā€",
unsafe_allow_html=True
)

Anyway, I just want to introduce in this code that one piece left, to finally change, as well, the text align of the dataframe header.

2

Hi @Joao_Couto, and welcome to our community! :raised_hands:

Could you please provide a reproducible code snippet so we can review it?

Best wishes,
Charly

1 Like
3

Morning, @Charly_Wargnier. Thanks for answering and trying to help. The code is really big now. Briefly, I have a sidebar in which Iā€™ve got this form with 4 fields and a button, that will append some info into the dataframe in the main page. So, in this main, Iā€™ve got some filters to the dataframe and then I have the dataframe with 9 columns. The default header is text-aligned to the left. I wish I could center this text. Iā€™ve googled it and i just find css solutions. Although I barely know css, I changed some styles like in the button background-color and its alignment inside the form; I also changed the form header style; Then I changed the form border style. But speaking of the dataframe, I just canā€™t inspect the css and html script (using F12) to get to know whereā€™s the part Iā€™ve got to change. In this example I gave, the locations I changed were .css-1544g2n h2 and .css-r421ms.

4

Thanks for your feedback, @Joao_Couto!

The code below centers the headers in your dataframe (see table #2 in the screenshot below)

image
image856Ɨ766 31.9 KB

import pandas as pd
import streamlit as st

df = pd.DataFrame({'Column1': [1, 2, 3], 
                   'Column2': [4, 5, 6],
                   'Column3': [7, 8, 9]})

df.style.set_properties(**{'text-align': 'center'}).set_table_styles([{'selector': 'th', 'props': [('text-align', 'center')]}])
st.markdown('<style>.col_heading{text-align: center;}</style>', unsafe_allow_html=True)
df.columns = ['<div class="col_heading">'+col+'</div>' for col in df.columns] 
st.write(df.to_html(escape=False), unsafe_allow_html=True)

Itā€™s worth noting that you would lose functionalities such as sorting. If losing that is an issue, you may want to resort to 3rd party alternatives such as Plotly tables.

Have a look at this excellent tutorial from @misraturp to see how to integrate this library into Streamlit.

I hope this helps,

Best,
Charly

1 Like
5

Thanks a lot, @Charly_Wargnier . But itā€™s kind of different from what Iā€™ve expected. The dataframe style completely changed. And I just love the original dataframe style from streamlit. I wish I could only change this little part in the dataframe, using some kind of CSS knowledge, to inspect the location exactly and change that by adding something like .col_heading{text-align: center;} in my markdown.

I like this @misraturp video, but I am so close to do this one little change in streamlit dataframe that I can not imagine to raise a whole new table from scratch again.

6

Thanks @Joao_Couto!

I might actually hit up @lukasmasuch as heā€™s probably got some tips and tricks I havenā€™t thought of! :wink:

Best,
Charly

1 Like
7

Unfortunately, this isnā€™t possible at the moment :frowning: You can change the alignment of the cells but not the column headers. And since the dataframe uses HTML Canvas for rendering, there isnā€™t any CSS-based hack for this.

1 Like
8

Thanks a lot for answering, @lukasmasuch. Iā€™ve got used to this default style, now hahaha.