Thicken specific gridlines of st.dataframe?

[Joao_Couto]

I have been searching about thicken gridlines of a dataframe using DataFrame.style attribute. But this is not possible at all, because all the focus is on the content.

So, I tried to search if there’s something streamlit allows us to do to thicken some specific gridlines, 'cause I think it’s a good tool for data visualization.

Does anybody know about it?

[arnaud]

Hey @Joao_Couto,

Do I understand correctly that you’d want to use st.dataframe and have a way to thicken certain cell grids within the dataframe? I’m not sure this has been raised a lot. But generally, we are conscious that supporting pandas Styler would be a great addition!

[Joao_Couto]

That’s it, @arnaud. At this moment, I’ve got a dataframe with 3 columns for each month of the year. So, every column gridline from the last column of a month and beginning of the other month column, I’d like to thicken it, so that we can visualize better everytime a month data ends and starts another.

But, yeah, supporting Styler would be great. Although it would still not fit my purposes right now, 'cause pandas really doesn’t do it. So, that’s why I’m asking about this kind of edit tool in a st.dataframe.

[arnaud]

I see! Passing this to the product team, but I’m not sure this is a very common request. By the way, you can always hack that using custom CSS with st.table (Markdown/HTML tables)

import streamlit as st 

# Useful CSS to change the line thickness
st.markdown("""
<style>
  table {
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid black;
    padding: 8px;
  }

  th:nth-child(3n), td:nth-child(3n) {
    border-right: 3px solid black; /* Add thicker border to every third column */
  }
</style>
""", unsafe_allow_html=True)

# That's just to show a table. You should probably use `st.table(df)`
# if you are using a Pandas dataframe instead.
st.markdown("""
| January     |          |          | February    |          |          | March       |          |          |
|-------------|----------|----------|-------------|----------|----------|-------------|----------|----------|
| Item A      | Item B   | Item C   | Item D      | Item E   | Item F   | Item G      | Item H   | Item I   |
""")

[Joao_Couto]

Man, that’s really good. Thanks, @arnaud, for your time. I’ll try this now. But I’d really like not lose all this glamor st.dataframe has. But we, streamlitters, are growing and I’m sure this will be supported soon. Thanks a lot, again.

[arnaud]

Happy it helps @Joao_Couto!

Maybe a compromise is to try highlighting those columns differently using Pandas Styler which is supported by st.dataframe. I just tried having light background colors every three columns… Looks decent too!

Code:

import pandas as pd

# Create a sample DataFrame
data = {
    'January 1': ['Item A', 'Item B', 'Item C'],
    'January 2': ['Item A', 'Item B', 'Item C'],
    'January 3': ['Item A', 'Item B', 'Item C'],
    'February 1': ['Item D', 'Item E', 'Item F'],
    'February 2': ['Item D', 'Item E', 'Item F'],
    'February 3': ['Item D', 'Item E', 'Item F'],
    'March 1': ['Item G', 'Item H', 'Item I'],
    'March 2': ['Item G', 'Item H', 'Item I'],
    'March 3': ['Item G', 'Item H', 'Item I']
}

df = pd.DataFrame(data)

# Define a custom styling function
def alternate_column_color(val):
    n = len(val)
    colors = ['background-color: #eee' if i // 3 % 2 == 0 else 'background-color: white' for i in range(n)]
    return colors

# Apply the custom styling function
styled_df = df.style.apply(alternate_column_color, axis=1)

# Display the styled DataFrame

st.dataframe(styled_df)

[Joao_Couto]

Thanks a lot, @arnaud .

That’s exactly what I did.

That’s the code i adapted:

def color_background(df):
    bg_colors = []
    color = 'background-color: #ffffff'
    for col in df.index:
        if '%' in col:
            color = 'background-color: #e8fbff' if color == 'background-color: #ffffff' else 'background-color: #ffffff'
        bg_colors.append(color)
    return bg_colors

df19_styled = df18_monthly.style.apply(color_background, axis=1)

Again, thanks a lot for your time and patience.

[arnaud]

Aha, well played @Joao_Couto!