CODEWITHSUNDEEP
ag-grid
Nico
Nico

Reputation: 323

Auto Size all columns to fit content

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)

Upvotes: 35

Views: 135807

Answers (6)

asquare
asquare

Reputation: 269

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,
)

Upvotes: 1

risingagain
risingagain

Reputation: 308

Please remove the width property in columnDefs array.

Upvotes: 0

user2555515
user2555515

Reputation: 1033

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

Upvotes: 3

ibenjelloun
ibenjelloun

Reputation: 7733

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(); 
};

Upvotes: 14

Hassan Ajaz
Hassan Ajaz

Reputation: 663

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);

Upvotes: 3

Dan Obregon
Dan Obregon

Reputation: 1101

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();

Upvotes: 52

Related Questions