Issue with SizeToFit when default px widths are set in columnDefs (in v2.0.0a2)

[andredfb]

I installed v2.0.0a2 and noticed that it broke my table where I had set default column widths in columnDefs and also included columnSize="sizeToFit". In v2.0.0a1 when I did this the table automatically resized and kept the width ratios of the columns but in v2.0.0a2 the table keeps the pixel widths defined in columnDefs and does not resize at all. I rolled back to v2.0.0a1 without changing the code and the behaviour returned to the expected automatic resizing to fit. Just posting here in case it isn't a known issue (maybe an intentional change was made).

[BSd3v]

In a1, the columns would not keep width adjustments after being reordered.

Also, there was a significant delay on responsiveness when using a larger dataset.

We haven’t figured out what we are going to do it the columnSize just yet. But I can take a look at this for sure.

Can you post a specific code example for your instance?

[andredfb]

The code below should work to reproduce it. Sorry it isn't directly runnable, I am working with a df I can't post. I think the issue is probably general when widths are defined like this and columnSize="sizeToFit". Maybe there is a better way to control the column width ratios that I don't know.

widths = {'a': 750, 'b': 750, 'c': 750, 'd': 750, 'e': 1000, 'f': 1000, 'g': 1000, 'h': 500, 'i':2500, 'j': 1000, 'k': 500, 'l': 500}
dag.AgGrid(
    id='table',
    className="ag-theme-alpine-dark",
    columnDefs=[{"headerName": i, "field": i, "width": widths[i]} for i in df.columns],
    columnSize="sizeToFit",
    enableCellTextSelection= True,
    defaultColDef={
        "resizable":True,
        "editable":True,
        "filter": True,
        "sortable": True,
        "floatingFilter": True,
        "wrapText": True,
    },
   style={"height": "100%", "width": "100%"}
)

[BSd3v]

You could pass None for the columnSize and not pass the widths, and see what the normal layout of the grid looks like.

[andredfb]

Thanks for the suggestion. In this case the grid expands and needs horizontal scrolling which is what I was trying to avoid. My data is unfortunately quite varied in length across the different columns so my aim is to fix the table at 100% width of the parent with predefined width ratios for the columns.

[BSd3v]

@andredfb, have you looked into using flex within the columnDefs, I got a promising result:

from dash import Dash, dcc, html
import dash_ag_grid as dag
import pandas as pd

app = Dash(__name__)

widths = {'a': 750, 'b': 750, 'c': 750, 'd': 750, 'e': 1000, 'f': 1000, 'g': 1000, 'h': 750, 'i':2500, 'j': 1000, 'k': 750, 'l': 750}
df = pd.DataFrame({i: [x for x in range(12)] for i in widths})
tbl = dag.AgGrid(
    id='table',
    rowData=df.to_dict('records'),
    className="ag-theme-alpine-dark",
    columnDefs=[{"headerName": i, "field": i, "flex": widths[i]} for i in df.columns],
    columnSize="sizeToFit",
    enableCellTextSelection= True,
    defaultColDef={
        "resizable":True,
        "editable":True,
        "filter": True,
        "sortable": True,
        "floatingFilter": True,
        "wrapText": True,
    },
)

app.layout = tbl

app.run(debug=True)

[andredfb]

@BSd3v that works. Thanks so much for taking the time to help me out!