How to modify or delete the maxWidth of a column?

Viewed 341

eg:

const colDefs =   [{ field: 'country', maxWidth:100,}]

when the grid ready,i use the setColumnDefs to change maxWidth, but it didn't take effect.

function changeMaxWidth(){
  const colDefs = gridOptions.api.getColumnDefs()
  colDefs[0].maxWidth = 130 
  gridOptions.api.setColumnDefs(colDefs)
}

this is example: plunker

3 Answers

MaxWidth can not be changed that way via the setColumnDefs. from the docs, only the framework bound attributes would change using the setColumnDefs, which probably means the headerframework or cellRendererFramework as those would return reactJs or angular components.

The only attribute related to the maxWidth that you can change dynamically is width which will set the current width.(docs)

You can also use api.sizeColumnsToFit() to try and fit the available table width, or api.autoSizeAllColumns() to size the columns based on their content (both these methods would take consideration of width, maxWidth, and minWidth).

If you are like me just want to not exceed the maxWidth when using api.autoSizeAllColumns(), other times (for example, drag and drop column width) may exceed the limit, you can refer to my approach.

.ag-center-cols-container > span:last-child{
  max-width: 248px;
}

This style will limit the size of the adaptive width when api.autoSizeAllColumns()

Related