Elements row spaces

Using Streamlit
1

I am using a lot of inputs from users so i would like an easy way to show them their tables of data and for that i want to create a custom “table”. below is my code, which already works fine (i commented the whole streamlit_extra container to see if it originated there, so to run it thats not needed at all). The Columns / Edit are perfectly fine but, but the main part i cant get around is that each row has a “spacing” to the next row. how can i prevent / adjust the space ?

image
image799×378 8.35 KB

here u can see it with enabled style_container.

What i want to archive is:

image
image799×378 8.17 KB

I am a PURE python developer, and just clicked around in the CSS. after having
stVerticalBlock set to display: inline; it works, but i have no clue if i broke anything or what the “correct” way would be, or even how to persist that.

import streamlit as st
from streamlit_extras.stylable_container import stylable_container
@st.dialog("Edit")
def edit_table_data(x):
    with st.popover("Edit"):
        st.write(f"Editing {x}")

def display_table(table_data, column_formating = None, edit_function=False, has_header = True, header_color = None, alternating_row_colors = False):
    modifier = 0 if not edit_function else 1
    for j,row in enumerate(table_data):
        row_len = len(row) + modifier
        if j == 0 and header_color:
            style= f"{{background-color: {header_color};}}"
        else:
            if alternating_row_colors == True and (j % 2 != 0):
                style = f"{{background-color: lightblue;}}"
            else:
                style = f"{{background-color: transparent;}}"
        #with stylable_container(key=f"header_{j}",css_styles=style):
        columns = st.columns(row_len if not column_formating else column_formating)
        for i,col in enumerate(row):
            columns[i].write(col)
        if edit_function and (j != 0 and has_header):
            with columns[i+1]:
                if st.button("Edit",key=f'edit_{j}'):
                    edit_function(j)




data = [['First', 'Second', 'Third'],
        ['A', 'B', 'C'],
        ['D', 'E', 'F'],
        ['G', 'H', 'I']]
display_table(data, edit_function=edit_table_data, header_color= "lightgray",alternating_row_colors=True)
2

You can do that by setting the display to block for the whole table – here’s one way to accomplish that with streamlit 1.39+, which adds a class to anything that has a key, including a container:

with st.container(key="MyTable"):
    display_table(
        data,
        edit_function=edit_table_data,
        header_color="lightgray",
        alternating_row_colors=True,
    )


st.html("""
<style>
.st-key-MyTable {
    display: block;
}
</style>
""")
3

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