Resizing Ag grid

Dash Python
1

Hi,

I am looking for the following hybrid resizing behavior for ag grid and I am not sure if it could be done out of the box by setting some grid parameters

I can achieve the result I want by double clicking (excel-style) the columns to resize to contents.

The end-state (which I want to achieve as start state) should look similar to the end of the clip, while still being responsive for the last column as of then. So in essence, columns which are excluded from responsive resize should resize to the content.

resize_ag_grid


                        grid_crashList = dag.AgGrid(
                            id="crashListTable",
                            rowData=df2.to_dict('records'),
                            className="ag-theme-balham",
                            columnDefs=[
                                    {
                                        'headerName': 'High',
                                        'children': [
                                            { 'headerName':'Date', 'field': 'HighTS', 'colId':'HighTS','type': 'dateColumn',
                                              "valueGetter": {"function": dff("params.data.HighTS")},
                                              "valueFormatter": {"function": f"d3.timeFormat('%d/%m/%Y')({ dff('params.data.HighTS')  })"},
                                              "suppressSizeToFit":True,
                                            },
                                            { 
                                              'headerName':'Close ($)', 'field': 'HighValue', 'colId':'HighValue', 'type': 'numericColumn' ,
                                              "valueFormatter": {"function": "d3.format('(.2f')(params.value)"},
                                              "suppressSizeToFit":True,
                                            },
                                        ],
                                    },
                                    {
                                        'headerName': 'Low',
                                        'children': [
                                            { 'headerName':'Date', 'field': 'LowTS', 'colId':'LowTS','type': ['dateColumn'],
                                              "valueGetter": {"function": dff("params.data.LowTS")},
                                              "valueFormatter": {"function": f"d3.timeFormat('%d/%m/%Y')({dff('params.data.LowTS')})"},
                                              "suppressSizeToFit":True
 },
                                            { 'headerName':'Close ($)', 'field': 'LowValue', 'colId':'LowValue', 'type': 'numericColumn', 
                                              "valueFormatter": {"function": "d3.format('(.2f')(params.value)"},
                                              "suppressSizeToFit":True
                                            },
                                             { 'headerName':'Loss (%)', 'field': 'DrawDownPct', 'colId':'DrawDownPct', 'type': 'numericColumn',
                                              "valueFormatter": {"function": "params.value !== null ? d3.format('.2%')(params.value/100) : ''"},
                                              "suppressSizeToFit":True
                                            },
                                            { 'headerName':'Duration (d)', 'field': 'DrawDownTime', 'colId':'DrawDownTime', 'type': 'numericColumn',
                                             "suppressSizeToFit":True },
                                        ]
                                    },
                                    {
                                        'headerName': 'Recovery',
                                        'children': [
                                            { 'headerName':'Date', 'field': 'RecoveryTS', 'colId':'RecoveryTS','type': 'dateColumn',
                                              "valueGetter": {"function": dff("params.data.RecoveryTS")},
                                              "valueFormatter": {"function": f"params.value !== null ? d3.timeFormat('%d/%m/%Y')({dff('params.data.RecoveryTS')}) :''"},
                                              "suppressSizeToFit":True 
                                            },
                                            { 'headerName':'Close ($)', 'field': 'RecoveryValue', 'colId':'RecoveryValue', 'type': 'numericColumn',
                                              "valueFormatter": {"function": "params.value !== null ? d3.format('(.2f')(params.value) : ''"},
                                              "suppressSizeToFit":True 
                                            },
                                            { 'headerName':'Gain (%)', 'field': 'RecoveryPct', 'colId':'RecoveryPct', 'type': 'numericColumn',
                                             "valueFormatter": {"function": "params.value !== null ? d3.format('.2%')(params.value/100) : ''"},
                                             "suppressSizeToFit":True 
                                            },
                                            { 'headerName':'Duration (d)', 'field': 'RecoveryTime', 'colId':'RecoveryTime', 'type': 'numericColumn',
                                              "valueFormatter": {"function": "params.value !== 'NaN' ? params.value : ''"},
                                              "suppressSizeToFit":True 
                                            },
                      
                                        ]
                                    },
                                    { 'headerName':'Ongoing', 'field': 'Ongoing', 'colId':'Ongoing',
                                       "valueFormatter": {"function": "params.value === true ? '✔️' : ''"},
                                      },
                                     
                            ],
                            defaultColDef={"resizable": True, "sortable": True, "filter": True},
                            columnSize="responsiveSizeToFit",
                        )
2

Hello @jcuypers,

I think this is possible. Check out here:

Basically, in the columnDef except for the ones you want to resize, you suppressSizeToFit: True. (Pro-tip: set this as the default in your case and then do, suppressSizeToFit: False for the columns you want to enable)

There are also arguments that you can set into columnSizeOptions, these are arguments that get passed to the api call.

1 Like
3

Hi @jinnyzor,

Thanks for getting back with suggestions.

I guess I did try most of the options available on the documentation pages.

Regarding your proposals:

  • responsiveSizeToFit global + suppressSizeToFit: True / False on specific columns, just makes the columns that are set to False, resizing to the remaining space of the grid. so if I also set it on the first column (beside the last one) and I click one random column (resize handler) to make that column resize to content, the freed up space is divided to all columns that have set supressSizeToFit set to false.

  • columnSizeOptions: there are indeed a lot of options, as to min / max and those kind of options. kind of similar to the flex option, but there is nothing like “fit to column content” (without fiddling with min/max for each type of data you might want to have) when you click the handle, this behavior seems to be only available globally (out-of-the-box) as “autoSize” which obviously doesn’t go together with “responsiveSizeToFit”

My main idea or goal was to have an initial resize for each column to its contents (except the last one which would take up remaining space) . Based on the above, I imagine it will only be possible with some custom JS simulating a click event an the resize handlers in the headers of the table?

Reg,
J.

4

Hi @jinnyzor

It’s not a perfect solution, as to really auto-sizing to actual varying content, but for now it’s good enough without too much of custom fiddling.

Thanks,
J

                        grid_crashList = dag.AgGrid(
                            id="crashListTable",
                            rowData=df2.to_dict('records'),
                            className="ag-theme-balham",
                            columnSizeOptions={
                                'columnLimits' : [{
                                    'key': 'Ongoing',
                                    'minWidth': 20,
                                    'maxWidth':5000
                                }],
                                'defaultMinWidth': 20, 
                                'defaultMaxWidth': 100,
                            },
                            columnDefs=[
                                    {
                                        'headerName': 'High',
                                        'children': [
                                            { 'headerName':'Date', 'field': 'HighTS', 'colId':'HighTS','type': 'dateColumn',
                                              "valueGetter": {"function": dff("params.data.HighTS")},
                                              "valueFormatter": {"function": f"d3.timeFormat('%d/%m/%Y')({ dff('params.data.HighTS')  })"},
                                            },
                                            { 
                                              'headerName':'Close ($)', 'field': 'HighValue', 'colId':'HighValue', 'type': 'numericColumn' ,
                                              "valueFormatter": {"function": "d3.format('(.2f')(params.value)"},
                                            },
                                        ],
                                    },
                                    {
                                        'headerName': 'Low',
                                        'children': [
                                            { 'headerName':'Date', 'field': 'LowTS', 'colId':'LowTS','type': ['dateColumn'],
                                              "valueGetter": {"function": dff("params.data.LowTS")},
                                              "valueFormatter": {"function": f"d3.timeFormat('%d/%m/%Y')({dff('params.data.LowTS')})"},
                                            },
                                            { 'headerName':'Close ($)', 'field': 'LowValue', 'colId':'LowValue', 'type': 'numericColumn', 
                                              "valueFormatter": {"function": "d3.format('(.2f')(params.value)"},
                                            },
                                            { 'headerName':'Loss (%)', 'field': 'DrawDownPct', 'colId':'DrawDownPct', 'type': 'numericColumn',
                                              "valueFormatter": {"function": "params.value !== null ? d3.format('.2%')(params.value/100) : ''"},
                                            },
                                            { 'headerName':'Duration (d)', 'field': 'DrawDownTime', 'colId':'DrawDownTime', 'type': 'numericColumn', 
                                             },
                                        ]
                                    },
                                    {
                                        'headerName': 'Recovery',
                                        'children': [
                                            { 'headerName':'Date', 'field': 'RecoveryTS', 'colId':'RecoveryTS','type': 'dateColumn',
                                              "valueGetter": {"function": dff("params.data.RecoveryTS")},
                                              "valueFormatter": {"function": f"params.value !== null ? d3.timeFormat('%d/%m/%Y')({dff('params.data.RecoveryTS')}) :''"}, 
                                            },
                                            { 'headerName':'Close ($)', 'field': 'RecoveryValue', 'colId':'RecoveryValue', 'type': 'numericColumn',
                                              "valueFormatter": {"function": "params.value !== null ? d3.format('(.2f')(params.value) : ''"}, 
                                            },
                                            { 'headerName':'Gain (%)', 'field': 'RecoveryPct', 'colId':'RecoveryPct', 'type': 'numericColumn',
                                             "valueFormatter": {"function": "params.value !== null ? d3.format('.2%')(params.value/100) : ''"}, 
                                            },
                                            { 'headerName':'Duration (d)', 'field': 'RecoveryTime', 'colId':'RecoveryTime', 'type': 'numericColumn',
                                              "valueFormatter": {"function": "params.value !== 'NaN' ? params.value : ''"}, 
                                            },
                      
                                        ]
                                    },
                                    { 'headerName':'Ongoing', 'field': 'Ongoing', 'colId':'Ongoing',
                                       "valueFormatter": {"function": "params.value === true ? '✔️' : ''"},
                                      },
                                     
                            ],
                            defaultColDef={"resizable": True, "sortable": True, "filter": True},
                            columnSize="responsiveSizeToFit",
                        )