Ag-网格:如何调整列的大小以适应内容？

Question

Ag-grid有一个sizeColumnsToFit函数，用于调整列的大小以适应屏幕，但我想要的是调整列的大小以适应数据。换句话说，我希望每一列的宽度是容纳其内容所需的最小宽度(不需要截断字符串和添加省略号)，即使这意味着我必须水平滚动才能看到其中的一些列。

autoSizeColumns函数似乎使所有列的宽度相等，而忽略了内容的宽度。

您可以在“调整大小的示例”此页面上的演示中看到这两个函数。

对于"size to fit“选项，可以在某些列中看到截短的字符串，但不能看到第一列，这可能是因为它有"suppressSizeToFit: true”。但是，将该选项添加到所有列defs并不能解决问题；有些列仍然存在一些截断，而其他列的范围比内容所需的要宽。

下面是该示例的代码：

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

有什么帮助吗？

实际上，我正在尝试使用JustPy来使用api接口，而且我已经(某种程度上)起作用了，除了sizeColumnsToFit函数没有执行我所期望的那样。

我的大多数数据列都由固定宽度的字符串组成(不同的宽度，但对于列中的所有字符串都是相同的宽度)，所以我想我的“计划B”是提交一个单空间字体和字体大小，并尝试使用试用和错误来根据字符串长度得出一个宽度计算公式。

但是，调整列的大小以适应数据是非常常见的事情(这不是Excel中autofit所做的吗？)，所以我希望有一个更健壮的解决方案。

Answer 1

我想你会发现autoSizeColumns做了你需要做的事。

看一看这演示。