如何添加带有固定柱的水平滚动轴AG Grid-Angular

我的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;
}

export const approvalGridColDefs=（开始日期）=>{
常量approvalGridColDefs=[]；
ApprovalGridFS.push({
头名：''，
儿童：[
{
headerName:“内部SKU ID”，
字段：“internalSKUId”，
“左”，
suppressToolPanel:true
},
{
headerName:“状态”，
字段：“actionName”，
“左”，
suppressToolPanel:true
},
{
标题名称：“项目说明”，
字段：“itemDescription”，
“左”，
suppressToolPanel:true
},
{
标题名称：“发布日期”，
字段：“releaseDate”，
键入：“日期”，
“左”，
suppressToolPanel:true
},
{
headerName:'帐户'，
字段：“accountName”，
“左”，
suppressToolPanel:true
},
{
headerName:“Fixture”，
字段：“fixture”，
“左”，
suppressToolPanel:true
},
{
标题名称：“UPC”，
字段：“upc”，
“左”，
suppressToolPanel:true
},
{
headerName:'类名'，
字段：“className”，
//隐藏：是的，
“左”，
suppressToolPanel:true
},
{
headerName:“评级”，
字段：“ratingName”，
“左”，
suppressToolPanel:true
},
{
headerName:“戏剧版”，
字段：'ThermaticalReleaseDate'，
键入：“日期”，
“左”，
suppressToolPanel:true
}
]
});
对于（让weekIndex=1；weekIndex{
返回lookupValue（yesNoMapping，params.value）；
}
}
]
});
}
返回ApprovalFS；
}

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

---

有什么解决办法吗？@Upendra我还没有找到