Table > Responsive: stack is equal scroll, stack not showing

[jorgegarinroman-uv]

Describe the bug

On a small screen, table responsive scroll and stack operate the same way: stack responsive is lost.

This error also happens in the primeng guide, in the table > responsive section

Environment

Chrome Versión 128.0.6613.84 (Build oficial) (64 bits)

Reproducer

No response

Angular version

17.3.12

PrimeNG version

17.18.9

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

latest

Browser(s)

Chrome

Steps to reproduce the behavior

No response

Expected behavior

The rows should be displayed as a stack facing down.

[andresrestrepo]

I can see the same, on version 17.18.8 works fine

[noradroid]

i have the same issue

[jorgegarinroman-uv]

temporal solutions:

1. Downgrade to version 17.18.8.

or

2. Apply this CSS

@media screen and (max-width: 992px) {
  .p-datatable-tbody > tr > td > .p-column-title {
    display: block;
  }
  .p-datatable-tbody > tr > td:not(:last-child) {
    border: 0 none;
  }
  .p-datatable-tbody > tr > td {
    display: flex;
    width: 100% !important;
    align-items: center;
    justify-content: space-between;
  }
  .p-datatable-thead > tr > th,
  .p-datatable-tfoot > tr > td {
    display: none !important;
  }
}

[nick-allen]

Looks to be an issue with the dom sanitization, checking the created style when stack is enabled shows this:

<style type="text/css">SafeValue must use [property]=binding: 
    @media screen and (max-width: 960px) {
        #pn_id_2-table > .p-datatable-thead > tr > th,
        #pn_id_2-table > .p-datatable-tfoot > tr > td {
            display: none !important;
        }

        #pn_id_2-table > .p-datatable-tbody > tr > td {
            display: flex;
            width: 100% !important;
            align-items: center;
            justify-content: space-between;
        }

        #pn_id_2-table > .p-datatable-tbody > tr > td:not(:last-child) {
            border: 0 none;
        }

        #pn_id_2.p-datatable-gridlines > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tbody > tr > td:last-child {
            border-top: 0;
            border-right: 0;
            border-left: 0;
        }

        #pn_id_2-table > .p-datatable-tbody > tr > td > .p-column-title {
            display: block;
        }
    }
     (see https://g.co/ng/security#xss)</style>

17.18.8 -> https://github.com/primefaces/primeng/blob/17.18.8/src/app/components/table/table.ts#L3043 17.18.9 -> https://github.com/primefaces/primeng/blob/17.18.9/src/app/components/table/table.ts#L3046

Removing the dom sanitization bypass that was added in 17.18.9 for the style looks to be the fix unless that's needed for this style and just misbehaving for some reason.

[devildant]

trouble also exist in 17.18.10 :(

[devildant]

the stack option does not work regardless of the version of primeng with angular 18

[devildant]

inspired by the previous comment, I have this temporary fix

in html:

<p-table [value]="globalConfig" styleClass="customstack" >
....
</p-table>

in style.css (global):

/*fix bug with primeng and option stack*/
@media screen and (max-width: 992px) {
  .customstack > div > table > .p-datatable-tbody > tr > td > .p-column-title {
    display: block;
  }
  .customstack > div > table > .p-datatable-tbody > tr > td:not(:last-child) {
    border: 0 none;
  }
  .customstack > div > table > .p-datatable-tbody > tr > td {
    display: flex;
    width: 100% !important;
    align-items: center;
    justify-content: space-between;
  }
  .customstack > div > table > .p-datatable-thead > tr > th,
  .customstack > div > table > .p-datatable-tfoot > tr > td {
    display: none !important;
  }
}

[Venom1991]

I noticed that the whole "Responsive" section for v18's Table page is completely gone. Does this mean that support for this very, very useful feature is gone for good?

[github-actions[bot]]

Unfortunately, this issue cannot be fixed due to technical limitations. PrimeNg team has decided not to pursue a fix, as addressing it would introduce other complications. Thanks a lot for your understanding!