How to do custom alignment and change label dynamically on user input for row headers, measure headers, column headers.

Hi, 

I am trying to align row headers, column headers, measure headers based on user selection.

For example - if user select left, justify-content should be set to start.

if user selects right, justify-content should be set to end.

I have below style which is predefined for alignment of row headers.

private customizePivotTableHeader(hastableFieldsChanged:boolean) {
      const rowHeaderAlignment:any = {
          'fm-left-header': "start",
          'fm-right-header': "end",
          'fm-center-header': "center",
      }
      this.rowAlignmentApplied = !hastableFieldsChanged;
      if (!this._pivotTable) {
          console.error('Pivot instance is not available.');
          return;
      }
      const props = this.properties;
      const {tableFields} = props;
      console.log("t", tableFields);
      let rowElements:any = this.shadowRoot?.querySelectorAll("#fm-pivot-view .fm-grid-layout div.fm-filter-header") || [];
      let headerElements:any = this.shadowRoot?.querySelectorAll("#fm-pivot-view .fm-grid-layout div.fm-measure-header[role='columnheader']") || [];
      if(!this.rowAlignmentApplied){
        headerElements.forEach((ele:HTMLElement) => {
          // to display user provided custom label in measure header
          tableFields.forEach((field:any, i:number) => {
              if(i >= rowElements?.length && field.userLabel){
                ele.innerText = field.userLabel;
              }
          })
          let filteredEle = tableFields.filter((field:any) => `Total ${field.id}`.toLowerCase() === ele.innerText.toLowerCase() || field.userLabel?.toLowerCase() === ele.innerText.toLowerCase());
          if(filteredEle && filteredEle.length > 0){
            let pivotAlignment = filteredEle[0].pivotColumnAlignment;
          if(pivotAlignment){
            ele.classList.add(pivotAlignment);
          }
          }
        })
          tableFields.forEach((field:any, index:number) => {
            // to display user provided custom label in row header
              if(index < rowElements?.length){
                  if(field.userLabel && rowElements[index]){
                    rowElements[index].innerText = field.userLabel;
                  }
              }
              if(index < rowElements?.length && field.pivotColumnAlignment && (rowElements[index]?.innerText.toLowerCase() === field.id.toLowerCase() || rowElements[index]?.innerText.toLowerCase() === field.userLabel?.toLowerCase())){
                  rowElements[index].style.setProperty('display', 'flex');
                  rowElements[index].style.setProperty('justify-content',  rowHeaderAlignment[field.pivotColumnAlignment], 'important');
                  this.rowAlignmentApplied = true;
      }
    })
  }
  }

This works only when there are row headers and measure headers. But when there are multiple combination of column headers as well or only row headers than applying using matching with tabelFields does not work.

I have tried following solutions, but it is not working.

1. Customizecell
2. Aftergriddraw

Can you please guide us to resolve this issue.
Is there any inbuilt method/property  where we can access all the header values and can do customization there?.

You can show any example on 
https://jsfiddle.net/flexmonster/rkprvhhs/