Setting the width of a grid in absolute pixels

🧩 Custom Components streamlit-aggrid
1

I am a newbie, i’ll say that right up front. I am trying to set the width of a grid in pixels. Nothing seems to affect the width. I only have one column of text read in from a cvs file. The column of text correctly shrinks to the fits size - which is great. But the header for that one column extends far to the right as if there were several more columns - but of course there are not. This seem like it would be very easy… but its got me stumped.
To test you need to create a cvs file called sample.cvs and paste in the following 5 lines:

AIRLINE
United
Delta
Southwest
American

BTW is there no way to upload files other than images?

Here’s the py code:

import altair as alt
from itertools import cycle

from st_aggrid import GridOptionsBuilder, AgGrid, GridUpdateMode, DataReturnMode, JsCode

#replace path in the following line with actual path to sampe.cvs
df = pd.read_csv(‘/path/to/sample.csv’)

selection_mode = ‘multiple’

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_selection(selection_mode)
gb.configure_selection(selection_mode, use_checkbox=True)

gridOptions = gb.build()

grid_response = AgGrid(
df,
gridOptions=gridOptions,
height=500,
fit_columns_on_grid_load=True,
width=50,
data_return_mode=‘AS_INPUT’,
)

selected = grid_response[‘selected_rows’]
selected_df = pd.DataFrame(selected)

2

Hi @TPMStreamer,

Thanks for posting and welcome to the Streamlit Community forum! We welcome everyone, especially newbies :blush:

So based on the code you’ve shared, this previous post might have a solution.

You should also consider using st.data_editor:

import streamlit as st
import altair as alt
from itertools import cycle
import pandas as pd

from st_aggrid import GridOptionsBuilder, AgGrid, GridUpdateMode, DataReturnMode, JsCode, ColumnsAutoSizeMode

st.title("Demo!")

# Upload file
st.file_uploader('Upload your file', type=['csv', 'json'])

#replace path in the following line with actual path to sampe.cvs
df = pd.read_csv("sample.csv")

df_editor = pd.DataFrame(
    [
       {"AIRLINE": "United", "is_widget": False},
       {"AIRLINE": "Delta", "is_widget": False},
       {"AIRLINE": "Southwest", "is_widget": False},
       {"AIRLINE": "American", "is_widget": False},
   ]
)

# Using AgGrid
selection_mode = "multiple"

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_selection(selection_mode)
gb.configure_selection(selection_mode, use_checkbox=True)

gridOptions = gb.build()

grid_response = AgGrid(
    df,
    gridOptions=gridOptions,
    height=500,
    fit_columns_on_grid_load=True,
    width=200,
    data_return_mode="AS_INPUT",
    columns_auto_size_mode=ColumnsAutoSizeMode.FIT_CONTENTS,
    )

selected = grid_response["selected_rows"]
selected_df = pd.DataFrame(selected)

# Using st.data_editor
st.subheader('Using `st.data_editor`')
uploaded_file = st.file_uploader("Choose a CSV file", type="csv")
if uploaded_file is not None:
    df = pd.read_csv(uploaded_file)

# Sample from the uploaded csv
st.data_editor(df_editor)

To your question on having an option to upload files, yes there’s a method to do this already in Streamlit;

# Using st.data_editor
uploaded_file = st.file_uploader("Choose a CSV file", type="csv")
if uploaded_file is not None:
    df = pd.read_csv(uploaded_file)
    st.data_editor(df)

Let me know if this helps.

3

Thanks for your response. Since I am starting from scratch every bit of advice or example of how to do something in streamlit will ultimately be helpful. For this particular task, the problem persists. The only issue is getting the column header to shrink to the same width as the column itself. I’ve simplified my code to make it easier to paste here. As before the csv file can be any one-column csv file. When the grid is displayed the column header does not match the column width. See the attached screen shot. Thanks for any help you can provide and for the help you have already provided.

import streamlit as st
import pandas as pd
from st_aggrid import AgGrid
from st_aggrid.grid_options_builder import GridOptionsBuilder

uploaded_file = st.file_uploader(“Choose a CSV file”, type=“csv”)
if uploaded_file is not None:
df = pd.read_csv(uploaded_file)
gd = GridOptionsBuilder.from_dataframe(df)
gd.configure_selection(selection_mode=‘multiple’,use_checkbox=True)
gridOptions = gd.build()
grid = AgGrid(
df,
gridOptions=gridOptions,
)

another newbie problem. the code I posted is indented properly but for some reason it’s removing the indents. Sorry about that.

gridout
gridout1510×992 48.7 KB