ag-grid 列文本截断问题

Question

Want to render the column width based on the text. Few characters are missing after crossing min width(200px) of the column.

Note: Columns are loading dynamically, so that i can't add width property for every column.

I am using Ag-Grid Enterprise edition

Thank you in-advance.

Answer 1

You can't. You have to preset the value of the column's width in the columnDef

const columnDefs: Array<ColDef | ColGroupDef> = [
  // ...
  {
    // ...
    width: number,
  }
];

You can also have a cellStyle or cellClass property in the column definition.

You can see the API here: https://github.com/ag-grid/ag-grid/blob/master/packages/ag-grid/src/ts/entities/colDef.ts

Answer 2

I think you have a couple of options.

1) Set column widths before rendering. Before the grid is rendered, cycle through your data object for max length of each element that will be displayed in the grid and then set your columnDefs accordingly. To edit columnDefs, you'll need to make it a variable, not a constant and then you are just editing an array of objects. See How to change value of object which is inside an array using JavaScript or jQuery? This approach will slow the initial rendering while calculating the widths.

2) Set column widths after rendering. After the grid is rendered, use the gridApi.setColumnWidth() method. https://www.ag-grid.com/javascript-grid-column-api/

onGridReady(params) {
  params.columnApi.setColumnWidth('someColumn', someColumnWidth, true);
}

With this approach, the grid will start rendering a little quicker, but the user might see the column width adjust.

Answer 3

Not exactly what you're trying to do, I don't think, but another option is to let the text truncate and have it show on mouse hover:

  agGridColumnDef.cellRenderer = function(params) {
    return "<span title='" + params.value + "'>" + params.value + "</span>";
  };

Answer 4

The answer for future googlers

<AgGridColumn
  wrapText={true}
  autoHeight={true}
/>