How to combine column groups in PrimeNg Tree table with unscrollable column?

Question

I'm using primeng 7.1.3.

What I'm trying to create is a scrollable tree table (horizontal and vertical) with:

• the 1st column not scrollable
• 2 groups of column excluding the 1st one

I managed to get something like this: StackBlitz code.

Begin of Edit ---------------------------------------------------

I found a way around so I have updated the Stackblitz link to correct the problem. If you want to see the original problem, comment the ngAfterViewInit() in the app-component.ts file. Also updated tags of the question because of said solution.

End of Edit -------------------------------------------------------

From what I understand, it puts the 2 groups above the first column - instead of leaving an empty cell the size of 2 rows - and the other columns as it should be.

Documentation for tree tables: PrimeNg Tree Table documentation

• Column group
• Scroll

Any hint on how to solve this?

Thanks.

Answer 1

So I came up with a solution but it's not very clean.

Instead of going deep in PrimeNg framework and tinkering with its code, I decided to use ngAfterViewInit and work on the produced DOM. From here, I just looked for the cells that shouldn't have been here and deleted them. I also updated the height of the empty cell.

Below is the function used in ngAfterViewInit():

correctDOM(): void {
  function cleanFixedHeader(tagName: string, element: Element): Element {
    const listElementsByTagName = element.getElementsByTagName(tagName);

    if (listElementsByTagName.length === 0) {
      return null;
    }

    for (let i = 0; i < listElementsByTagName.length - 1; i++) {
      element.removeChild(listElementsByTagName[i]);
    }
    return listElementsByTagName[listElementsByTagName.length - 1];
  }

  const treeTableFixedHead: Element = this.elRef.nativeElement
                                  .getElementsByClassName('ui-treetable-frozen-view')[0]
                                  .getElementsByClassName('ui-treetable-thead')[0];

  const treeTableFixedRow = cleanFixedHeader('TR', treeTableFixedHead);
  if (treeTableFixedRow !== null) {
    const treeTableFixedHeaderCell = cleanFixedHeader('TH', treeTableFixedRow);
    treeTableFixedHeaderCell.setAttribute('height', String(treeTableFixedHeaderCell.getBoundingClientRect().height * 2));
  }
}

Stackblitz link, same as in the question. I will edit said question to indicate how to see the original issue.

Hope it'll help someone as it doesn't seem many questions are asked about PrimeNg. Still, keep in mind that this solution is really not a clean one. But it saved me a lot of time so...