I am using Angular/Infragistics 12.0.3.

I have a data grid that runs a lot of calculations before exposing data. I am also pinning the first 5 columns as a result of the size of the grid.

The grid looks correct, but when I export it, the pinned columns contain the first 5 unpinned columns' worth of data and the last 5 columns contain the pinned column data. The column headers are in the right place, but the data is not.

Additionally, the header row is not also pinned in the export, so when scrolling down, the column headers don't stay put, as would be expected.

For the column data being in the wrong place, I suspect it is because of the "pinned" attribute I added to the column definitions. Perhaps I have named it incorrectly?

      this.columns = [
        { field: 'Scenario', type: GridColumnDataType.String, pinned: true, width: '250' },
        { field: 'Design', type: GridColumnDataType.String, pinned: true, width: '110' },
        { field: 'Family', type: GridColumnDataType.String, pinned: true, width: '80' },
        { field: 'Facility', type: GridColumnDataType.String, pinned: true, width: '80' },
        { field: 'Process', type: GridColumnDataType.String, pinned: true, width: '75' },
      ];

I dynamically allocate other columns for the time period the data falls within:

      if (this.rollup !== 'WW' ) { this.scenarioService.getCompareTimePeriods(this.scenarioWorkweeks, startIndex, endIndex, this.rollup).forEach(w => this.columns.push({ field: w, type: GridColumnDataType.Number, pinned: false, width: shorter ? '80' : '115', formatter: this.formatColumnData })); }
      else { for (let i:number = startIndex; i < endIndex; i++) { this.columns.push({ field: this.scenarioWorkweeks[i].name, type: GridColumnDataType.Number, pinned: false, width: shorter ? '80' : '115', formatter: this.formatColumnData }); } }

Column width and styling depend on the parameter being processed. I doubt this is cause for error in exporting Excel, though, since they come out properly in the sheet.