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

Using Streamlit
1

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

3 Likes
2

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
3

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
4

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
5

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

3 Likes
6

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
7

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

Screenshot 2023-09-30 at 7.49.58 PM
Screenshot 2023-09-30 at 7.49.58 PM1430×912 139 KB

1 Like
8

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.

2 Likes
9

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.

4 Likes
10

I have the same issue with st.data_editor. One column shows images, but they are so small that you cannot see much. So I am in need of a way to enlarge the images.

I have tried the custom css approach but it did not work. Also using table as you suggested did not work.

Is there a way to enlarge the images? If a new feature is required, where could I ask/vote for that?

3 Likes
11

Does not work. The CSS is not working, makes no difference if I adjust the height or even delete the st.markdown() altogether.

Please, Streamlit team, enable the height of the rows in dataframes and st.data_editor() to be edited.

1 Like
12

It would indeed be very good to have some way of controlling the appearance of st.dataframe tables, specifically the width and height (preferably in pixels). Images should be rendered in a way that takes advantage of the cell size.

On the surface streamlit seems quite capable, but once you start to dig deep it becomes quite difficult to achieve the desired result.

1 Like