Ag-grid: how to size columns to fit contents?

Question

Ag-grid has a sizeColumnsToFit function that sizes the columns to fit the screen, but what I want is to size the columns to fit the data. In other words I want each column's width to be the minimum required to fit its content (without truncating strings and adding ellipses) even if that means I have to scroll horizontally to see some of the columns.

The autoSizeColumns function seems to be making all the columns equal width, disregarding the width of the contents.

You can see both of these functions in the "Resizing Example" demo on this page.

For the "size to fit" option you can see truncated strings in some columns, but not the first column, presumably because it has "suppressSizeToFit: true". But adding that option to all column defs doesn't solve the problem; there's still some truncation in some columns, while others are wider than they need to be for the content.

Here's the code from that example:

const columnDefs = [
  { field: 'athlete', width: 150, suppressSizeToFit: true },
  {
    field: 'age',
    headerName: 'Age of Athlete',
    width: 90,
    minWidth: 50,
    maxWidth: 150,
  },
  { field: 'country', width: 120 },
  { field: 'year', width: 90 },
  { field: 'date', width: 110 },
  { field: 'sport', width: 110 },
  { field: 'gold', width: 100 },
  { field: 'silver', width: 100 },
  { field: 'bronze', width: 100 },
  { field: 'total', width: 100 },
];

const gridOptions = {
  defaultColDef: {
    resizable: true,
  },
  columnDefs: columnDefs,
  rowData: null,
  onColumnResized: (params) => {
    console.log(params);
  },
};

function sizeToFit() {
  gridOptions.api.sizeColumnsToFit();
}

function autoSizeAll(skipHeader) {
  const allColumnIds = [];
  gridOptions.columnApi.getAllColumns().forEach((column) => {
    allColumnIds.push(column.getId());
  });

  gridOptions.columnApi.autoSizeColumns(allColumnIds, skipHeader);
}

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', () => {
  const gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);

  fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
    .then((response) => response.json())
    .then((data) => gridOptions.api.setRowData(data));
});

Any help?

I'm actually trying to get this working with JustPy using run_api, and I have that (sort of) working, except that the sizeColumnsToFit function doesn't do what I expected.

Most columns of my data consist of fixed-width strings (different widths, but the same width for all strings in a column), so I guess my "plan B" is to commit to a monospace font and font size and try to use trial and error to come up with a width calculation formula based on string lengths.

But sizing columns to fit data is a pretty common thing to want (isn't that what autofit does in Excel?), so I'm hoping there's a more robust solution.

Answer 1

I think you'll find autoSizeColumns does what you need it to.

Take a look at this demo.

Answer 2

so basically gridOptions has an entity called autoSizeStrategy you can set your desired config:

const autoSizeStrategy = {
    type: "fitCellContents",
  };

this is what you want to add to the gridOptions. what it does is, after setting data in the grid columns will be sized automatically to fit content.

for other strategy you can take a look at this link below.

ag grid docs - autoSizeStrategy