自动调整所有列以适应内容大小

Question

我所有的搜索结果都出现了 sizeColumnsToFit 和 autoSizeColumns，但这不是我想要的。

我的网格有很多列，所以可以水平滚动，这很好。

但我无法预先知道每列最宽文本所需的空间大小，因此希望网格自动调整所有列的大小以适应单元格中最长的文本行。

是否可以做到这一点？（就像在 html 表格列上有 nowrap 一样，不是让ag-grid换行文本，而是隐藏过长的内容）

- Nico

---

阅读文字背后的含义，我发现您的用例可能涉及隐藏列（如果表格具有水平滚动条）。请注意，除非关闭虚拟化（网格仅呈现屏幕上可见的内容的功能），否则无法控制非可见列的大小。 - Eliran Malka

Answer 1

网格调整大小： https://www.ag-grid.com/javascript-grid-resizing/

sizeColumnsToFit - 该方法尝试将所有列压缩到视图中 - 不会出现水平滚动条

autoSizeAllColumns - 该方法尝试使所有列适应数据大小 - 可以出现水平滚动条

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

- Dan Obregon

---

有没有办法根据单元格内容设置列宽？ - Revansiddh

params.columnApi.autoSizeColumns() 的结果不太好看，所有列的宽度都一样，无论内容是什么。 - zipper

@Revansiddh - 是的，这正是autoSizeColumns()的作用。 - Eliran Malka

此外，这个答案应该被接受，@Nico。 - Eliran Malka

值得阅读此部分以确保方法调用放置在正确的事件处理程序中：https://www.ag-grid.com/documentation/javascript/column-sizing/#resizing-columns-when-data-is-rendered - jackycflau

@jackycflau 是的，这非常重要。 - YogendraR

Answer 2

我经历了一番尝试，花费了不少时间才使它按照我期望的方式工作，也就是：

• 使用所有可用的空间
• 使每个列只占据显示其内容所需的宽度

解决方法：

• 为每个列添加 width 参数（需要手动调整以设置正确的值）
• 在 onGridReady 中调用 gridApi.sizeColumnsToFit()，它会自适应大小以利用可用空间，同时确保具有更大宽度的列会占用更多空间

const gridOptions = {
 ...
 columnDefs: [
  {
    ...,
    width: 100
  },
  {
    ...,
    width: 50
  },
  ...
 ],
 ...
 onGridReady: (event) => event.api.sizeColumnsToFit(); 
};

- ibenjelloun

---

关键在于在 onGridReady 函数中调用 gridApi.sizeColumnsToFit()。该函数可使表格自适应列宽。 - Charney Kaye

Answer 3

在列定义中，只需使用flex而不是width。网格将自动调整。

- user2555515

Answer 4

你可以找到一个完整的示例来自动调整所有列的大小。 列大小调整 只需调用autoSizeColumns()函数，所有列将根据内容调整大小。

gridColumnApi.autoSizeColumns(allColumnIds, skipHeader);

- Hassan Ajaz

Answer 5

请在columnDefs数组中删除width属性。

- risingagain

Answer 6

这将有助于任何想在Python Streamlit中进行此操作的人。

• 假设gb是一个AgGrid
• 通过设置flex=1，列将根据内容和网格内可用空间自动调整宽度
• 如果您有很多列并且不想逐个指定它们，可以使用configure_default_column方法为所有列设置默认配置。

gb = GridOptionsBuilder.from_dataframe(df_glb)
gb.configure_default_column(
    flex=1,
    minWidth=100,
    maxWidth=500,
    resizable=True,
)

- asquare