'How to add horizontal scroll with pinned columns AG Grid - Angular

I have multiple columns groups in my Ag-Grid Column Definitions and in them first one static pinned columns and remaining groups will be calculated based on given date, and I want to pinned first column group to left but the thing is it contain 10 number of columns and on pinning left they occupy all of view port, so I hoping someone guide me how to add horizontal scroll on pinned columns or to set max-width of column group to show horizontal scroll.

Here are my Column Definitions:

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

By default no horizontal scroll is visible because pinned columns occupy all of the space and after adjusting the width of individual column here is how the grid is showing: enter image description here

angulargridag-gridag-grid-angular


Solution 1:[1]

We had this requirement for many of our Grids at work.

We fixed it by setting a value for pinnedWidth in our AdapTable Layout. This then created the horizontal scrollbar automatically if the pinned columns width was greater than that width.

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

Solution 2:[2]

I also had a requirement like this. What I suggest is that you make the pinned column a separate grid. You can then align the two grids there is a section in ag grid which will then act as one grid.ag grid aligned grids

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Henders
Solution 2 Shashika

Related Questions