How to change af-grid width?

Summary

I am using ag-grid to display dataframe, I want to display more columns, so I zoomed first, but I can’t change the width, how can I change the width of ag-grid?

Steps to reproduce

Code snippet:

import streamlit as st
import numpy as np
import pandas as pd
from st_aggrid import GridOptionsBuilder, AgGrid, GridUpdateMode, DataReturnMode, JsCode
import streamlit.components.v1 as components

st.set_page_config(page_title="test", layout="wide", initial_sidebar_state='collapsed')

my_large_df = pd.DataFrame(np.random.randint(0, 2, size=(10, 20)), columns=[str(i) for i in range(20)])

gb = GridOptionsBuilder.from_dataframe(my_large_df, axis=1)
gb.configure_default_column(cellStyle={'color': 'black', 'font-size': '12px'}, suppressMenu=True, wrapHeaderText=True, autoHeaderHeight=True)

custom_css = {".ag-header-cell-text": {"font-size": "12px", 'text-overflow': 'revert;', 'font-weight': 700},
              ".ag-theme-streamlit": {'transform': "scale(0.8)", "transform-origin": '0 0'}}

gridOptions = gb.build()
AgGrid(my_large_df, gridOptions=gridOptions, custom_css=custom_css, allow_unsafe_jscode=True)

I tried setting width in “.ag-theme-streamlit”, but it didn’t work, it will be replaced by others unknown.

To fit to page width, add ColumnsAutoSizeMode to your imports from st_aggrid and add columns_auto_size_mode=ColumnsAutoSizeMode.FIT_ALL_COLUMNS_TO_VIEW, to your AgGrid() call.

Thanks for your reply!
Unfortunately,
AgGrid(my_large_df, columns_auto_size_mode=1, custom_css=customs_css) doesnt’ work.
AgGrid(my_large_df, columns_auto_size_mode=1) can indeed display all columns, but if the cell value is too long, it will become ungly, like “info…” .

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