Primeng: Scrollable p-table - header and columns are misaligned

[ctrl-brk]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting

When scrolling is enabled for p-table the header columns don't align with body columns.
Here's the screenshot of the demo page (https://www.primefaces.org/primeng/#/table/scroll) at 200% magnification.

[tigrenok00]

I wish they would fix this or at least respond... There are tons of issues open on this and they are being ignored...

[bluelbow]

I'm having the same issue.
To workaournd the issue change the css to something like that:

.ui-table-scrollable-header-box {
margin-right: 17px !important;
}

.ui-table-scrollable-body {
margin-right: 17px !important;
}

It's not beautiful, but at least the column are aligned.

[cagataycivici]

@tigrenok00 This is from the issue template;

If you have a PrimeNG PRO Support subscription please post your issue at;

https://pro.primefaces.org 

where our team will respond within 4 business hours.

If you do not have a PrimeNG PRO Support subscription, fill-in the report below. Please note that
your issue will be added to the waiting list of community issues and will be reviewed on a first-come first-serve basis, as a result, the support team is unable to guarantee a specific schedule on when it will be reviewed. Thank you for your understanding.

Current Waiting Time: ~8 weeks.

Afaik, there is no way to catch the zoom event so there is a technical limitation here. Feel free to send a PR if you have a solution.

[damatri]

@bluelbow
only having:

.ui-table-scrollable-header-box {
margin-right: 17px !important;
}

is sufficient though

[damatri]

Thanks :)

[amir-mehrizi]

hi everyone. i had the same problem and i studied the all issues carefully and finally i fix the problem. you can use the CSS class and you can see that the problem is perfectly done.
something that is really important and crucial is, you must write all codes in CSS style together.

.ui-table-scrollable-header-box {
margin-right: 17px !important;
}

.ui-table-scrollable-body {
margin-right: 17px !important;
}
///// this code below is for width of the scroll bar
::-webkit-scrollbar {
width: 10px;
}
.ui-table-scrollable-header {
overflow-y: scroll;
}

i think that this helps you.

[rubmz]

This issue is far from being close ... Just saying... If you got a vertical scrollbar that is on 'auto' it causes the headers to be sometimes aligned and sometimes misaligned based on the existence of the scrollbar on the body part...

[capc0]

still an issue on version 9 LTS for me

[catonice]

Version: 10.0.0
Still an issue for me - we went with making the container scrollable for now but this isn't an ideal situation

[mcrtricolor]

I'm having the same problem with 11.0, it's like the header doesn't know if the table is scrolling or not, always put that padding-right there.

[capc0]

FYI this is my workaround for this issue.

<p-table #table>...</p-table>

@ViewChild('table', { static: true }) public table: Table;

ngAfterViewInit() {
    this.resizeObs = new window.ResizeObserver(() => {
        this.checkScrollBarAlignment();
    });
    this.resizeObs.observe(this.table?.el?.nativeElement);
}


// if offsetWidth or offsetHeight is 0, the table is not visible/rendered on screen
checkScrollBarAlignment() {
    if (this.table?.scrollableViewChild && (this.table?.el?.nativeElement as HTMLElement).offsetWidth !== 0 && (this.table?.el?.nativeElement as HTMLElement).offsetHeight !== 0) {
        (this.table.scrollableViewChild as ScrollableView).alignScrollBar();
        this.cd.markForCheck();
    }
}

[rolandsoh96]

I am using Angular 11 with Primeng 10.0.3. The below code works for me.

::ng-deep .p-datatable-scrollable-header-box {
padding: 0 !important;
}

[mcrtricolor]

I'm using Primeng 11.2.3 and the bug still exists. It doesn't happen on Mac, but i don't know if it happens on Linux OS.

This is my workaround:

• I check if there is scroll in table, if there is one then apply some style with padding 17px in the header, in other case i remove it and apply 0 instead.

Edit: Updated the code, much better now.

configureScrollTable() {
  
  let isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
    if (!isMacLike) {
      let elementoScrollableView: HTMLCollection = document.getElementsByClassName('p-datatable-scrollable-view');
      setTimeout(() => {
        for (let i = 0; i < elementoScrollableView.length; i++) {
          let tabla = elementoScrollableView[i];
          let cabezal;
          let contenido;
          for (let j = 0; j < tabla.children.length; j++) {
            let hijo = tabla.children[j];
            if (hijo.className == 'p-datatable-scrollable-header') {
              for (let k = 0; k < hijo.children.length; k++) {
                let cabezalPadre = hijo.children[k];
                if (cabezalPadre.className == 'p-datatable-scrollable-header-box') {
                  cabezal = cabezalPadre;
                }
              }
            } else if (hijo.className.indexOf('p-datatable-virtual-scrollable-body') != -1 || hijo.className.indexOf('p-datatable-scrollable-body') != -1) {
              contenido = hijo;
            }
          }
          if (contenido != null && cabezal != null) {
            if (contenido.scrollHeight > contenido.offsetHeight) {
              cabezal.classList.remove('cabezalTablaSinPadding');
              cabezal.classList.add('cabezalTablaConPadding');
            } else {
              cabezal.classList.remove('cabezalTablaConPadding');
              cabezal.classList.add('cabezalTablaSinPadding');
            }
          }
        }
      }, 300);
    }

}

// Global styles 
.cabezalTablaConPadding.p-datatable-scrollable-header-box {
  padding-right: 17px !important;
}
.cabezalTablaSinPadding.p-datatable-scrollable-header-box {
  padding-right: 0 !important;
}

[danbord]

I have found a new simple workaround... Seems to work pretty well on my side :

p-table {
    cdk-virtual-scroll-viewport {
        overflow-y: scroll !important;
    }
}

[PHuhn]

Hey, I tried all of the CSS fixes, but none worked for my grid with filters. I looked at the demos and removed all width CSS and the misalignment was fixed.