如何使用固定列添加水平滚动 AG Grid - Angular

Question

我的 Ag-Grid 列定义中有多个列组，其中第一个静态固定列和剩余组将根据给定日期计算，我想将第一个列组固定在左侧，但问题是它包含10 列并且在左侧固定它们占据了所有视口，所以我希望有人指导我如何在固定列上添加水平滚动或设置列组的最大宽度以显示水平滚动。

这是我的列定义：

export const approvalGridColDefs = (startDate) => {
  const approvalGridColDefs = [];
  approvalGridColDefs.push({
    headerName: '',
    children: [
      {
        headerName: 'Internal SKU ID',
        field: 'internalSKUId',
        pinned: 'left',
        suppressToolPanel: true
      },
      {
        headerName: 'Status',
        field: 'actionName',
        pinned: 'left',
        suppressToolPanel: true
      },
      {
        headerName: 'Item Description',
        field: 'itemDescription',
        pinned: 'left',
        suppressToolPanel: true
      },
      {
        headerName: 'Release Date',
        field: 'releaseDate',
        type: 'date',
        pinned: 'left',
        suppressToolPanel: true
      },
      {
        headerName: 'Account',
        field: 'accountName',
        pinned: 'left',
        suppressToolPanel: true
      },
      {
        headerName: 'Fixture',
        field: 'fixture',
        pinned: 'left',
        suppressToolPanel: true
      },
      {
        headerName: 'UPC',
        field: 'upc',
        pinned: 'left',
        suppressToolPanel: true
      },
      {
        headerName: 'Class Name',
        field: 'className',
        // hide: true,
        pinned: 'left',
        suppressToolPanel: true
      },
      {
        headerName: 'Rating',
        field: 'ratingName',
        pinned: 'left',
        suppressToolPanel: true
      },
      {
        headerName: 'Theatrical Release',
        field: 'theatricalReleaseDate',
        type: 'date',
        pinned: 'left',
        suppressToolPanel: true
      }
    ]
  });
  for (let weekIndex = 1; weekIndex <= 8; weekIndex++) {
    const weekDate = addWeeks(new Date(startDate), weekIndex);
    approvalGridColDefs.push({
      headerName: moment(weekDate).format('MM/DD/YYYY'),
      field: `week${weekIndex}`,
      marryChildren: true,
      headerClass: 'approval-column-group',
      cellStyle: { textAlign: 'center', justifyContent: 'center' },
      children: [
        {
          headerName: 'Promo Price',
          field: `promoPriceWeek${weekIndex}`,
          editable: true,
          cellEditor: 'numericCellEditor',
          headerClass: 'approval-first-header',
          cellStyle: { borderLeft: '2px solid lightgray' }
        },
        {
          headerName: 'Margin Credit',
          field: `marginCreditWeek${weekIndex}`,
          editable: true,
          cellEditor: 'numericCellEditor'
        },
        {
          headerName: 'B&M Promo Week Forecast',
          field: `bAndMPromoForecastWeek${weekIndex}`,
          editable: true,
          cellEditor: 'numericCellEditor'
        },
        {
          headerName: 'Dotcom Week Forecast',
          field: `dotComForecastWeek${weekIndex}`,
          editable: true,
          cellEditor: 'numericCellEditor'
        },
        {
          headerName: 'On Ad',
          field: `onAdWeek${weekIndex}`,
          editable: true,
          cellEditor: 'agSelectCellEditor',
          cellEditorParams: {
            values: extractValues(yesNoMapping)
          },
          filterParams: {
            valueFormatter: function (params) {
              return lookupValue(yesNoMapping, params.value);
            },
          },
          valueFormatter: params => {
            return lookupValue(yesNoMapping, params.value);
          }
        }
      ]
    });
  }
  return approvalGridColDefs;
}

默认情况下，水平滚动是不可见的，因为固定列占据了所有空间，并且在调整单个列的宽度后，网格的显示方式如下：

Answer 1

我们的许多工作网格都有这个要求。

我们通过在我们的 AdapTable 布局中设置 pinnedWidth 的值来修复它。如果固定列的宽度大于该宽度，则会自动创建水平滚动条。

见https://docs.adaptabletools.com/guide/dev-guide-tutorial-tips-and-tricks#scrollbar-in-pinned-columns

Answer 2

我也有这样的需求。我建议您将固定列设为单独的网格。 然后您可以对齐两个网格，在 ag 网格中有一个部分将充当一个网格。ag grid aligned grids