primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
9.82k stars 1.18k forks source link

DataTable: Frozen Column Breaks Frozen RowSpan Column #6067

Open yuugou727 opened 2 months ago

yuugou727 commented 2 months ago

Describe the bug

I think this issue is related to #752

If there is a frozen column next to a frozen rowspan column, only the first row of row group works correctly. Other rows will squeeze into the rowspan.

Screen Recording 2024-07-16 at 10 48 04 AM

Reproducer

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

PrimeVue version

3.53.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

alphasensei commented 1 month ago

Same is happening with me. Even tried to do a workaround with CSS and wasn't able to fix it.

alphasensei commented 1 month ago

For reference I managed to create a temporary workaround, which might be helpful for others with the same issue:

<template>
<Column
    header="Geo"
    field="campaign__geo"
    style="min-width: 8rem; text-align: center"
    frozen
    sortable
    :class="['first-column']"
 />
<Column field="type" :class="['second-column']" />
</template>

<style>
.first-column {
    position: sticky;
    left: 0;
    width: 8rem;
    z-index: 3;
    text-align: center;
}

.second-column {
    position: sticky;
    left: 8rem;
    min-width: 8rem;
    width: 8rem;
    z-index: 2;
    background: inherit;
}
</style>