DataTable: Using "Striped Rows" with "Frozen Columns" causes overlapping text

[lenaschimmel]

Describe the bug

When a DataTable has stripedRows and scrollable, and some of the columns have frozen, scrolling horizontally results in a visual glitch: the text of the grey rows overlaps, while the text in the white rows is properly clipped. Example screenshot:

I initially noticed this with PrimeVue version 3.33.0, but in the Reproducer it also happens with version 3.50.0. If affects all my browsers (Firefox 124.0, Chromium 102.0.4984.0, Safari Version 17.2 (19617.1.17.11.9), all on MacOS).

It seems to be caused by transparent background colors used in some themes, like in bootstrap4-light-blue/theme.css:

  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
    background: rgba(0, 0, 0, 0.05);
  }

This seems to be the case in about 60% of the themes. The other 40% use non-transparent colors for striped rows, and the bug does not occur.

Reproducer

https://stackblitz.com/edit/bys5hf?file=src%2FApp.vue

PrimeVue version

3.50.0

Vue version

3.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. open the Reproducer
2. scroll the table to the right
3. see the overlapping text

Expected behavior

The text of the grey rows should be clipped / hidden behind the background of the frozen column, just like it is in the white rows.

[lenaschimmel]

I just realized that something very similar happens with components inside cells. But unlike text, which is only overlapping in every second row, a <Button> will actually overlap in every row. It's hard to explain, so please see this short clip, or try the updated Reproducer.

https://github.com/primefaces/primevue/assets/1325019/274d53c0-f2db-4b21-a277-274bba229142

[flier268]

Any solution? So do I on PrimeNG

[flier268]

.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even){
  background-color: #FAFAFA; /* 等同於 rgba(0, 0, 0, 0.02) 疊加在白色背景上 */
}

[FatimaMedusa]

any solutions? I also have this issue

[OoHenryoO]

The problem with overlapping input controls (e.g. Button, InputNumber, ...) also exists in version 4.2.3 I am using a TreeTable and the (left aligned) frozen column is overlapped by all input controls.

[incutonez]

I was having this issue as well when using the "hybrid" theme. I downloaded the base CSS files from these docs (releases page), and I modified the td background color to be inherited, because otherwise, it's transparent. My CSS now looks like this:

.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-even {
  @apply bg-slate-200;
}

.p-datatable .p-datatable-tbody {
  & > tr {
    @apply bg-white;
  }

  & > tr.p-datatable-selectable-row.p-datatable-row-selected {
    @apply bg-sky-200;
  }

  & > tr.p-datatable-selectable-row:not(.p-datatable-row-selected):hover {
    @apply bg-sky-100;
  }

  /* This is crucial... otherwise, we'll get https://github.com/primefaces/primevue/issues/5473 */
  & > tr > td {
    @apply bg-inherit;
  }
}

[rwarren]

I had the problem with PrimeVue 4.2.1, and primevue/themes 4.4.1. Specifically, I had Select components that were rendering on top of the frozen/sticky column.

This is/was a z-index problem with frozen column. You can hack a fix in place with the following style addition:

deep(.p-datatable-frozen-column) {
  position: relative;
  z-index: 20;
}

That works for the DataTable design where it is done via two sibling containers (the frozen and unfrozen tables). It does not work for the older examples linked above with striping issues.