Resize ag-grid on window resize?

Custom Components streamlit-aggrid
1

Is there an option that I’m missing that will re-fit the grid when the window size changes? It does it fine on first render, but when I resize the window, the columns all stay the same width.

2

Hey @cwhatley,

Have you tried adding ColumnsAutoSizeMode to your imports and adding columns_auto_size_mode=ColumnsAutoSizeMode.FIT_ALL_COLUMNS_TO_VIEW, to the AgGrid() call?

3

Yes, but that only operates on the first load of the page and doesn’t make it respond to window resize. Minimal test.

import streamlit as st
import pandas as pd
import numpy as np
from st_aggrid import AgGrid, GridOptionsBuilder, ColumnsAutoSizeMode


data = pd.DataFrame(np.random.rand(2,3), columns=["a", "b", "c"])
gb = GridOptionsBuilder.from_dataframe(data)
grid_res = AgGrid(
    data,
    gridOptions=gb.build(),
    theme='material',
    columns_auto_size_mode=ColumnsAutoSizeMode.FIT_ALL_COLUMNS_TO_VIEW,
)
4

I’ve not found any automatic width resize on window resizing in AG Grid docs, so, I’ve used this piece of code as a workaround:

Accordingly to JavaScript Data Grid: Column Sizing, I’ve used the api.sizeColumnsToFit(params) function to resize my table.

And I’ve just managed this function catching the event, as below:

window.addEventListener('resize', () => sizeToFit());
// cleanup
return () => {
	window.removeEventListener('resize', () => sizeToFit());
};
5

How did you do this in python?

1 Like