Dynamic width of a Dash AG Grid

[shwiftyRick]

I have a Dash AG Grid object defined as:

grid = dag.AgGrid(
  id = grid_id,
  columnDefs = column_defs,
  rowData = df_perf.to_dict("records"),
  className = "ag-theme-alpine-dark",
  columnSize = "sizeToFit",
  dashGridOptions = {"dataTypeDefinitions": dataTypeDefinitions},
  style = {"height": "100%", "width": "100%"},
)

When this gets rendered, it does indeed occupy 100% the width of the div that I place it into, however, upon browser resizing, the parent gets wider but the AG Grid stays the same width.

Example…
If my browser is half the width of my screen and I initially render the table, here’s how it looks:

If I then resize my browser to take up the full screen, then there is a large gap between the right edge of the table and the parent div:

Is there a setting that would make this dynamically adjust (without having to refresh the page after window resizing)? With Plotly, one could set config={'responsive': True} for a dcc.Graph() object to accomplish this, but I see no analog for a Grid.

Thanks!

[jinnyzor]

Hello @shwiftyRick,

This is all grid:

Your columns arent growing, if you want that to happen, I’d recommend having flex: 1 to your columnDefs.

[shwiftyRick]

Oops, great eye! Thanks, this solution worked!