AG Grid Uneven Column Widths

Question

I am struggling to get my grid to reliably display its column widths evenly when using api.sizeColumnsToFit().

I have configured my grid to resize the columns when the parent div/browser window resizes:

this.gridOptions = <GridOptions>{
        onModelUpdated: () => {
            this.gridOptions.api.sizeColumnsToFit();
        },
        onGridSizeChanged: () => {
            this.gridOptions.api.sizeColumnsToFit();
        }
    };

This works, but the resulting column widths are more often than not uneven. Please see the first and second day of the month for week 13 below:

Any suggestions to make this more reliable will be very welcome.

I suppose that your initial columnDefs have equal widths for each column, except for "Task" which appears to have the "suppressSizeToFit set to true? Similar to this plnkr? — Jarod Moser
Spot on. If you run the plnkr and increase the window width to the right and back again a few times and then slowly decrease the window width back again, the Athlete Age column shrinks in width disproportionally to all of the other columns. This is what I am trying to avoid. — TDC

Jarod Moser Jarod Moser · Accepted Answer · 2017-04-10T23:14:45

Here is a plnkr with a possible solution for you. In essence here is what you could do:

var windowWidth = document.querySelector('#myGrid').offsetWidth - 170 - 17,
// calculate the window width minus any columns you don't want to size for
   and a little magic number for the vertical scrollbar (17 was for chrome on mac)

    sizableColumns = gridOptions.columnApi.getColumnState().map(e=>e.colId).filter(e=>e!='athlete'),
// get the colId of only the columns that you want to resize 

    sizableColumnWidth = Math.floor(windowWidth/sizableColumns.length);
// calculate the width of each column by dividing the available width by the number of columns

    sizableColumns.forEach(e=>gridOptions.columnApi.setColumnWidth(e,sizableColumnWidth))
// iterate through the columns you want to resize and set their new column width

However, I think that you might be better off by considering how many users are going to be resizing their browser windows... not only that but resizing their windows slowly multiple times. Check these posts:

http://davidgoss.co/2014/04/15/users-do-resize-their-browser-windows-take-2/

https://medium.com/@stephenkeable/do-users-resize-their-browser-windows-or-is-it-just-developers-and-designers-e1635cbae1e1

Both of these posts indicate that roughly 2% of desktop users are resizing their browsers. And a much smaller portion will be resizing their browsers slowly multiple times. Perhaps you simply tell these <1% to not resize their browsers like they do, or allow for the columns to be manually sized so that if they do notice this odd behavior they can resize the columns themselves.

Technical Note:

Your reported behavior is happening because the algorithm to size the columns to fit is quite sophisticated. It takes into account the relative sizes of all the columns and widens them appropriately, so if you had 4 columns sized 100, 200, 100; and you resized the window, then the middle column will still appear as twice the size of the others.

The algorithm is also placing whatever is leftover in pixels to the first column so if you have 9 columns and 100px to fit it into, 8 columns would be sized at 11 px and one would be sized at 12. That way the columns will truly "fit" and not leave a few pixels not filled by columns (like my suggested option)

AG Grid Uneven Column Widths

1 Answers