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)

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) — Eliran Malka, Feb 25 '20 at 14:49

score 43 · Answer 1 · edited Jun 18 '20 at 15:39

43

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

edited Jun 18 '20 at 15:39

Vishnudev Krishnadas

10,679
2
23
55

answered Sep 12 '18 at 19:20

Dan Obregon

941
9
22

is there any way to set column width based content of cell ? – Revansiddh Sep 20 '19 at 02:23
2

`params.columnApi.autoSizeColumns()` result not look good, got same width columns only, for whatever contents. – zipper Oct 23 '19 at 07:23
@Revansiddh - yes, that's exactly what `autoSizeColumns()` is for – Eliran Malka Feb 25 '20 at 14:45
1

also, this answer should definitely be accepted, @Nico – Eliran Malka Feb 25 '20 at 14:50
3

https://www.ag-grid.com/documentation/javascript/column-sizing/#resizing-columns-when-data-is-rendered <= worth to read this part to make sure that the method call is placed at the right event handler – jackycflau Feb 19 '21 at 10:41
@jackycflau yeah this is very important – YogendraR May 06 '21 at 12:29

score 11 · Answer 2 · answered Oct 21 '21 at 08:12

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

The key for me was to call `gridApi.sizeColumnsToFit()` from `onGridReady` — Charney Kaye, Apr 11 '22 at 19:11

score 2 · Accepted Answer · answered Jan 31 '23 at 16:49

2

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

answered Jan 31 '23 at 16:49

user2555515

779
6
20

score 1 · Answer 4 · answered Feb 24 '21 at 16:30

1

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

answered Feb 24 '21 at 16:30

Hassan Ajaz

613
8
15

score 1 · Answer 5 · answered Jun 17 '23 at 05:06

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

score 0 · Answer 6 · answered May 04 '23 at 07:27

0

Please remove the width property in columnDefs array.

answered May 04 '23 at 07:27

risingagain

210
2
12

Auto Size all columns to fit content

6 Answers6

Linked