this is my html:

<div class="pivot-container" [hidden]="!(boqGridRows && boqGridRows.length > 0)">
    <igx-pivot-grid #boqPivotGrid [data]="boqGridRows" [pivotConfiguration]="pivotConfig" height="100%"  width="100%" [superCompactMode]="true" [defaultExpandState]='true' ></igx-pivot-grid>
    <igx-pivot-data-selector #dataSelector [grid]="boqPivotGrid"></igx-pivot-data-selector>
</div>

  private configurePivotGrid() {
    const formatter = (value) => {
      return isNaN(value) || value === null || value === undefined ? '' :

      new Intl.NumberFormat('en-US', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      }).format(value);
    };

    const areaTypeDimensions = this.areaTypeList.map(areaType => ({
      memberName: areaType.name,
      displayName: areaType.name,
      memberFunction: (record) => {
        const areaTypeValue = record.areaTypeValues.find(value => value.areaType === areaType.name);
        return areaTypeValue ? `${areaTypeValue.areaValue}` : '';
      },
      enabled: false
    }));

    this.pivotConfig = {
      pivotKeys: {
        aggregations: 'aggregations',
        records: 'records',
        children: 'children',
        level: 'level',
        columnDimensionSeparator: '*',
        rowDimensionSeparator: '*',
      },
      columns: [

      ],
      rows: [
        { memberName: 'discipline', displayName: 'Discipline', enabled: true},
        { memberName: 'schedule', displayName: 'Schedule', enabled: false}
      ],
      values: [
        {
            member: 'ccr',
            displayName: 'CCR',
            aggregate: {
                aggregator: IgxPivotNumericAggregate.sum,
                key: 'SUM',
                label: 'SUM'
            },
            enabled: false,
            formatter: (value) => formatter(value)
        },
        {
            member: 'factoredManhours',
            displayName: 'Factored Manhours',
            aggregate: {
                aggregator: IgxPivotNumericAggregate.sum,
                key: 'SUM',
                label: 'SUM'
            },
            enabled: false,
            formatter: (value) => formatter(value)
        },
        {
            member: 'labourCost',
            displayName: 'Labour Cost',
            aggregate: {
                aggregator: IgxPivotNumericAggregate.sum,
                key: 'SUM',
                label: 'SUM'
            },
            enabled: false,
            formatter: (value) => formatter(value)
        },
        {
            member: 'manhours',
            displayName: 'Manhours',
            aggregate: {
                aggregator: IgxPivotNumericAggregate.sum,
                key: 'SUM',
                label: 'SUM'
            },
            enabled: true,
            formatter: (value) => formatter(value)
        },
        {
            member: 'materialCost',
            displayName: 'Material Cost',
            aggregate: {
                aggregator: IgxPivotNumericAggregate.sum,
                key: 'SUM',
                label: 'SUM'
            },
            enabled: false,
            formatter: (value) => formatter(value)
        },
        {
            member: 'quantity',
            displayName: 'Quantity',
            aggregate: {
                aggregator: IgxPivotNumericAggregate.sum,
                key: 'SUM',
                label: 'SUM'
            },
            enabled: true,
            formatter: (value) => formatter(value)
        },
        {
            member: 'totalCost',
            displayName: 'Total Cost',
            aggregate: {
                aggregator: IgxPivotNumericAggregate.sum,
                key: 'SUM',
                label: 'SUM'
            },
            enabled: true,
            formatter: (value) => formatter(value)
        }
    ],

      filters: [
        ...areaTypeDimensions,
        { memberName: 'drawingNumber', displayName: 'Drawing Number', enabled: false },
        { memberName: 'drawingSheet', displayName: 'Drawing Sheet', enabled: false},
        { memberName: 'drawingRevision', displayName: 'Drawing Revision', enabled: false},
        { memberName: 'material', displayName: 'Material', enabled: false},
        { memberName: 'r6Item', displayName: 'R6 Item', enabled: false},
        { memberName: 'r7Item', displayName: 'R7 Item', enabled: false},
        { memberName: 'unitSymbol', displayName: 'Unit Symbol', enabled: false }
      ].sort((a, b) => a.displayName.localeCompare(b.displayName))

    };
  }

  public onItemSort(
    _: Event,
    dimension: IPivotDimension,
    dimensionType: PivotDimensionType
  ) {
    const dimensions = this.dataSelector.dims;

    dimensions.sort((a, b) => a.displayName.localeCompare(b.displayName));
    console.log(dimensions);

    this.dataSelector.grid.dimensionsChange.emit({
      dimensions: dimensions,
      dimensionCollectionType: dimensionType,
    });

    console.log(this.dataSelector.grid.allDimensions);
    const test = this.dataSelector.grid.allDimensions.sort((a, b) => a.displayName.localeCompare(b.displayName));
    console.log(test);

    this.dataSelector.grid.dimensionsChange.emit({
      dimensions: test,
      dimensionCollectionType: dimensionType,
    });
    
    this.cdr.detectChanges();

  }

and then call it within the oninit. The issue I'm having is that in the console logs I am seeing that the data is sorted, but it does not reflect that on the grid itself and still shows them in the order of columns, rows. filters and then values. What I'm wanting is to sort the list regardless of which dimension it is apart of.

Is there also a way to sort the data within the individual members like:

For example the data within disciplines will be things such as:


020- Discipline 1

010 - Discipline 2

I would like order them based off of the numbers at the start, is something like that possible?

Just to expand on this a bit more, I can there are the sort icons on the grid itself, but it's whether can sort the data within the filter list?