react ag-grid 自动调整列大小和网格宽度

Question

我正在使用ag-grid，我希望列宽根据网格内容是动态的， 我通过使用来做到这一点：

const onGridReady = params => {
    params.columnApi.autoSizeAllColumns();
};

但是网格的宽度是固定的，我在网格的一侧有一个空间。 （我也无法将宽度发送到网格，因为我不知道内容的大小是多少） 我需要的是如何结合 autoSizeAllColumns 和 sizeColumnsToFit 函数。

Answer 1

ag-grid 有一个名为

defaultColDef

的属性，可用于网格设置。如果您将

flex: 1

作为参数之一传递，则所有列的大小都会适合，这样侧面就不会出现空白区域（扩展以填充）。查看此页面上的 ag-grid 文档并搜索单词“flex”以获取有关自动/Flex 大小调整的更多详细信息。

Answer 2

如果我理解正确，您希望具有以下调整大小的行为 - 确保每列的内容首先可见，但也要确保至少填充整个网格宽度。

不幸的是，似乎没有一种真正简单的方法来实现这一目标。我所做的是

onGridReady

，我将使用

autoSizeColumns

函数来确保每列的内容完全可见，然后如果还有剩余空间来填充网格的宽度，我会将其均匀分布到每列。然后通过

gridApi.applyColumnState

应用新的列状态。这是vue中的一个例子 这应该很容易转移到其他框架（或 vanilla js）。

interface UseGridColumnResizeOptions {
  // we need access to the grid container so we can calculate
  // the space that is left unfilled.
  gridContainerRef: Ref<null | HTMLElement>;
  // for any columns that you don't want to resize for whatever reason
  skipResizeColumnIds: string[];
}

export const useGridColumnResize = ({ gridContainerRef, skipResizeColumnIds }: UseGridColumnResizeOptions) => {
  const handleResize = ({ columnApi }: AgGridEvent) => {
    columnApi.autoSizeAllColumns();

    if (!gridContainerRef.value) {
      console.warn('Unable to resize columns, gridContainer ref is not provided');

      return;
    }

    const isColumnResizable = (colDef: ColDef) => colDef.resizable && !skipResizeColumnIds.includes(colDef.colId!);
    const columns = columnApi.getAllGridColumns().filter((column) => isColumnResizable(column.getColDef()));

    if (columns.length === 0) {
      return;
    }

    const lastColumn = columns[columns.length - 1];
    const lastColumnLeft = lastColumn.getLeft();
    const lastColumnWidth = lastColumn.getActualWidth();
    const { width: gridWidth } = gridContainerRef.value.getBoundingClientRect();
    const gridSpaceLeftToFill = Math.max(0, gridWidth - (lastColumnLeft! + lastColumnWidth));

    if (gridSpaceLeftToFill === 0) {
      return;
    }

    const additionalSpaceForEachColumn = gridSpaceLeftToFill / columns.length;
    const columnState = columnApi.getColumnState();

    columnState.forEach((column) => {
      const skipResizeForColumn = !columns.some((col) => col.getColId() === column.colId);

      if (skipResizeForColumn) {
        return;
      }

      column.width = column.width! + additionalSpaceForEachColumn;
    });

    columnApi.applyColumnState({ state: columnState });
  };

  return { handleResize };
};

您可以在

handleResize

事件上插入

row-data-updated

函数，以便在新数据到达网格时或仅在

grid-ready

或

first-data-rendered

中调整列大小。

请记住，这种实现在我的例子中效果很好，因为列是不可移动的。我期望列数组中的最后一列是 UI 中最后一个可见的列，但情况可能并非总是如此，并且您最终可能会错误地计算剩余的填充空间。因此，您可能需要更改检索 UI 中最后一个可见列的方式，以使其适合您的情况。

Answer 3

您可以将属性传递到 defaultColDef 列，如下所示。

  <AgGridReact
                    rowData={rowData}
                    columnDefs={colDefs}
                    onGridReady={onGridReady}
                    domLayout="autoHeight"
                    defaultColDef={{
                        // flex: 1,
                        minWidth: 150,
                        resizable: true,
                        sortable: true,
                        filter: true,
                        floatingFilter: true,
                        // wrapText: true,
                        autoHeight: true,
                        // cellStyle: { whiteSpace: 'normal' },
                    }}
                    singleClickEdit
                    rowSelection="multiple"
                    stopEditingWhenCellsLoseFocus={true}
                />