Auto Size all columns to fit content

Question

All my searches turned up for sizeColumnsToFit and autoSizeColumns which is not what I want.

My grids have many columns, so it scroll horizontal which is fine

But I cannot know in advance what would be the most space needed for the widest text in a column, so want the grid to auto size all columns to accommodate for whatever is the longest line of text in the cell.

Can one do that? (pretty much like have nowrap on a html table column, not that ag-grid wrap text, it just hide what is too long)

Pozzy

reading between the lines, i see that your use case may involve hidden columns (if the table has horizontal scroll). note that you cannot control the size of non-visible columns, unless you turn off virtualization (the grid's feature that renders only what's should be visible on screen) – Pronghorn

Answer 1

Simply use flex instead of width in the column definitions. The grid will adjust automatically.

Yahiya

This one causes serious performance issues – Bodi

@pantonis, can you reference a link from the docs to that? – Desrochers

This answer is wrong. The flex property does not set the width to fit the content, The flex property determines how much space a column should take up concerning the available space and other columns. It's a numeric value that represents the flex grow factor of the column. – Desrochers

@Desrochers RTFM ag-grid.com/javascript-data-grid/column-sizing – Yahiya

Answer 2

Grid Resizing: https://www.ag-grid.com/javascript-grid-resizing/

sizeColumnsToFit - this tries to squeeze all the columns in the view - no horizontal scrolling

autoSizeAllColumns - this tries to size all columns to to fit the data - horizontal scrolling

// If you need to resize specific columns 
var allColIds = params.columnApi.getAllColumns()
    .map(column => column.colId);
params.columnApi.autoSizeColumns(allColIds);

// If you want to resize all columns
params.columnApi.autoSizeAllColumns();

Limassol

is there any way to set column width based content of cell ? – Jennijennica

params.columnApi.autoSizeColumns() result not look good, got same width columns only, for whatever contents. – Tedric

@Jennijennica - yes, that's exactly what autoSizeColumns() is for – Pronghorn

also, this answer should definitely be accepted, @Pozzy – Pronghorn

ag-grid.com/documentation/javascript/column-sizing/… <= worth to read this part to make sure that the method call is placed at the right event handler – Lowly

@Lowly yeah this is very important – Unprepared

Answer 3

I passed through this and it took me some time to make it work the way I wanted to, by that I mean :

• Use all the available space
• Make each column take the width required to display its content correctly

Solution :

• Add the width parameter for each column (requires some manual tuning to set the right values)
• Call gridApi.sizeColumnsToFit() in the onGridReady which will resize to take the available space while making sure that columns having bigger width will take more space

const gridOptions = {
 ...
 columnDefs: [
  {
    ...,
    width: 100
  },
  {
    ...,
    width: 50
  },
  ...
 ],
 ...
 onGridReady: (event) => event.api.sizeColumnsToFit(); 
};

Orndorff

The key for me was to call gridApi.sizeColumnsToFit() from onGridReady – Deus

The marked answer is incorrect and This one should be the accepted answer – Desrochers

Answer 4

You can find a complete example for auto resizing all column. column-sizing

Simply call autoSizeColumns() function, all columns will be resized according to content.

gridColumnApi.autoSizeColumns(allColumnIds, skipHeader);

Fellini

Answer 5

This will help if anyone is looking to do this in python streamlit.

• Assuming gb is a AgGrid
• By setting flex=1, the columns will automatically adjust their width based on the content and available space within the grid
• If you have many columns and don't want to specify them one by one, you can use the configure_default_column method to set the default configuration for all columns.

gb = GridOptionsBuilder.from_dataframe(df_glb)
gb.configure_default_column(
    flex=1,
    minWidth=100,
    maxWidth=500,
    resizable=True,
)

Thearchy

Answer 6

Please remove the width property in columnDefs array.

Asthenopia

default width is hardcoded to be 200px – Desrochers

Answer 7

we can able to set auto size of column using this method params.api.sizeColumnsToFit()

const onGridReadyOC = useCallback(params => {
    params.api.sizeColumnsToFit() // while loading grid, we are setting 
}, [])
                    
<div style={{height: '260px'}}>
    <Grid
        ref={gridParamsOCRef}
        columnDefs={columnDefs}
        defaultColDef={{ resizable: true, sortable: true, suppressMenu: true }}
        licenseKey={'abc-123'}
        onGridReady={onGridReadyOC}
        rowData={Clients}
        overlayNoRowsTemplate={'No results found. Please refine your search criteria.'}
    />
</div>

Rammer