How can I increase the height of table rows in st.dataframe?

The default size of the images displayed in the dataframe are too small. Is there a way to increase the table height? Thanks!

2 Likes

Hi @AyushExel,

Thank you for sharing your question with the community!

Can you please share your code snippet? You can also use st.table and use CSS to customize the table size as such:

import streamlit as st
import pandas as pd

data = {
    'Images': ['🐢', '🐱', '🦊', '🐻'],
    'Names': ['Dog', 'Cat', 'Fox', 'Bear']
}
df = pd.DataFrame(data)

st.markdown("""
    <style>
        .stTable tr {
            height: 50px; # use this to adjust the height
        }
    </style>
""", unsafe_allow_html=True)

st.table(df)

Also, as a reminder, please check out our guidelines on how to post an effective question here and update your post to help the community answer your question.

2 Likes

Thanks for the pointers. I opened another issue as I thought this went under the radar and the project is quite critical. Sorry if it was inappropriate, I’ll take care in the future.

The solution you suggested works but I cannot render images the way I am able to with st.dataframe.
The reproduction code is spread across modules but I’ll try to explain the gist of it.

column_config = {
    'img': (lambda x: "data:image/png;base64," + base64.b64encode(x[1]).decode() if isinstance(x[1], bytes) else "data:image/png;base64,",
            st.column_config.ImageColumn())
}
st.dataframe(data=df, use_container_width=True, column_config=column_config)

here I pass column config that tell streamlit the img column is base64 and it gets rendered.
Your solution works but the base64 string is printed on screen, I want the image.

st.table(df)
1 Like

hi @AyushExel
you can try applying st.column_config.ImageColumn properties

st.column_config.ImageColumn(label=None, *, width=None, help=None)

in which you can set width

width ("small", "medium", "large", or None) 

as per your requirement !

1 Like

Changing width in column config of st.dataframe only changes the column width, the image size remains fixed. I tried that!

2 Likes

may be you can use css styling for resize the mages after rendering
just a small example below.

import streamlit as st
import pandas as pd

# Sample DataFrame with image URLs
data = {
    'Name': ['Image 1', 'Image 2'],
    'Image URL': ['https://example.com/image1.jpg', 'https://example.com/image2.jpg']
}

df = pd.DataFrame(data)

# Define a custom CSS style to control image size
# Adjust the width and height as per your requirements
custom_css = """
<style>
    .image-cell img {
        max-width: 200px;
        max-height: 200px;
    }
</style>
"""

# Display the custom CSS style
st.markdown(custom_css, unsafe_allow_html=True)

# Display the DataFrame with the custom CSS style
st.dataframe(df, height=300)

1 Like

Yeah custom css injection also doesn’t change anything. My guess is that css for dataframe elements is hardcoded when generated maybe… See here I changed the width of the column but image size remains the same

1 Like

Did you managed to make it works with st.dataframe? I tryed to inspect the rendered but I did not figure out which style should I change.

1 Like

Thanks for your solution, but it’s not work in my case, I have multiple inter-action needed in this table, like checkbox, so I have to use st.Dataframe. The missing configuration of image size seems really inconvenient. Hope features can solve this problem.

2 Likes