如何让 AG 网格列自动调整大小工作

Question

问题

我无法让列扩展到网格渲染上其内容的大小。

根据官方文档中的示例，以及此处所引用，我已经尝试了所有三种主要方法来实现此目的：

• api.sizeColumnsToFit()

• columnApi.autoSizeColumns([columnIds])

• columnApi.autoSizeAllColumns()

我尝试让每个选项在

onGridReady

和

onFirstDataRendered

（推荐这里）中工作，并将列宽度定义为 flex，然后定义为宽度。没有任何效果。

代码

我首先从这里收集专栏：

export const configMsDetailsData = function (msDetails: MilestoneDetails) {
  let msRowData: any = [];
  let msColDefs = [
    {
      field: genericRowHeaderTitle,
      cellStyle: genericRowHeaderStyle,
      headerClass: transparentHeaderClass,
      cellClassRules: subMSGrayTextRule,
      resizable: false,
      flex: 1,
      suppressMovable: true,
      pinned: "left",

    },
    {
      field: "Forecast",
      headerClass: blueHeaderClass,
      flex: 1,
      resizable: false,
      valueFormatter: dateFormatter,
      valueGetter: BasicValGetter,
      cellClassRules: grayCellRule,

    },
...

然后创建我的 gridOptions（注意：我在代码块中包含所有三个建议选项仅用于演示目的。在实际代码中，我一次尝试一个）：

let gridOptions = {
    onRowDataUpdated: () => {
      if (!ready) {
        setReady(true);
      }
    },
    onGridReady: (event: any) => {
      event.api.sizeColumnsToFit() //auto-size columns to fit grid
      event.columnApi.autoSizeAllColumns(); //auto-size columns to fit grid

      let allColIds = event.columnApi.getAllColumns().map((col: any) => col.colId);
      event.columnApi.autoSizeColumns(allColIds);
    },
    onFirstDataRendered: (event: any) => {
      event.api.sizeColumnsToFit() //auto-size columns to fit grid
      event.columnApi.autoSizeAllColumns(); //auto-size columns to fit grid
      let allColIds = event.columnApi.getAllColumns().map((col: any) => col.colId);
      event.columnApi.autoSizeColumns(allColIds);

    }
  };

接下来，我将选项传递到我的网格：

const msDeetsGrid = getGrid(
    msDetailsData,
    msDetailsCols,
    defaultColDefMSDeets,
    gridOptions
  );

function getGrid(
  rowData: any,
  colDefs: any,
  defaultColDef: ColDef<any>,
  gridOptions?: any
) {
  return (
    <div className="ag-theme-alpine" style={{ height: "100%", width: "100%" }}>
      <AgGridReact<any>
        gridOptions={gridOptions}
        rowData={rowData}
        columnDefs={colDefs}
        headerHeight={defaultHeaderHeight}
        rowSelection={"single"}
        domLayout={"autoHeight"}
        rowHeight={defaultRowHeight}
        tooltipShowDelay={0}
        tooltipHideDelay={20000}
        defaultColDef={defaultColDef}
      ></AgGridReact>
    </div>
  );
}

然后我渲染。

onGridReady

和

onFirstDataRendered

都着火，所以我知道这是有效的。但无论我使用哪个选项来扩展列，都没有任何反应。

我尝试过的其他尝试：

• 这重申了文档中的内容，但不起作用。
• suppressSizeToFit：假
• 保持容器的宽度< 100%

Answer 1

注意：以下是对我多次有效的一般建议。分享它是因为考虑到你的情况有点难以猜测。

要从你似乎掉入的兔子洞中出来，请执行以下操作：

1. 复制您链接的示例 - https://www.ag-grid.com/react-data-grid/column-sizing/#resizing-example（完全，无需修改）
2. 无论您在应用程序中测试什么，都可以将其注入。
3. 验证其是否按链接中所示工作
4. 慢慢地、逐步地替换示例中的代码，直到达到您想要的网格效果。开始于：

...
const onGridReady = useCallback((params) => {
    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .then((resp) => resp.json())
      .then((data) => setRowData(data));
  }, []); 
...

无需获取数据，只需使用

setRowData(...)

和一些随机数据即可。

...
const onGridReady = useCallback((params) => {
   setRowData({...})
})

要慢慢来，甚至不要更改示例中的列数（标题）或任何其他内容。只需注入您的一些数据来匹配示例即可。

验证调整大小是否有效。然后更改标题键（保留宽度和其他所有内容）。验证，...（继续操作，直到调整大小不再起作用，或者您刚刚使页面按预期工作）

所有这一切的目的都是为了走出兔子洞，看看它会在哪里为你带来突破。

如果我需要疯狂猜测出了什么问题 - 那就是 - 你的

width

中缺少

msColDefs

，或者

allColIds

不包含正确的 ID，或者与将所有内容连接在一起相关的内容......

祝你好运！