Component: Table responsiveLayout="stack" doesn't work since v17.8.9

[zlatanov]

Describe the bug

Setting reponsiveLayout to "stack" doesn't work in 17.18.9. It works with 17.18.8. I suspect that this PR https://github.com/primefaces/primeng/pull/16210 is the culprit.

https://github.com/primefaces/primeng/compare/17.18.8...17.18.9.

Check the demos - https://primeng.org/table#responsive-stack, it doesn't work also.

Environment

Windows 11

Reproducer

No response

Angular version

18.2.6

PrimeNG version

17.18.9

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.10.0

Browser(s)

Edge

Steps to reproduce the behavior

Open https://primeng.org/table#responsive-stack

Expected behavior

The table should be rendered correctly.

[imaksp]

Hi this could be issue with v17.18.9+ as you mentioned, but its deprecated in v18 & only scroll is supported, so if you use this option , you won't be able to upgrade.

[zlatanov]

Hi this could be issue with v17.18.9+ as you mentioned, but its deprecated in v18 & only scroll is supported, so if you use this option , you won't be able to upgrade.

Where can I read about its deprecation?

[imaksp]

Hi, you can check it here: https://v18.primeng.org/table#api.table.props.responsive

it says table is now always responsive with scroll behaviour.

[zlatanov]

Responsive is deprecated because it's always responsive, but responsiveLayout is not. And "stack" mode is still listed as supported.

[imaksp]

Ok, that property is present I missed it, but its still not available in v18 demo, may be demo needs to be updated. https://v18.primeng.org/table

[m4n50n]

Same problem here. So, am I forced to upgrade to Angular / PrimeNG 18?

[VicTMPDeV]

in my case, i'm using new version 19 and responsiveLayout="stack" has been fixed and it works

[m4n50n]

This new version looks like a different library. It gives the feeling that they don't care about projects that use older versions. If you're still on v16-17, you're starting to get really screwed.

[imaksp]

Hi @m4n50n they provide LTS version for that, but its paid, current v17 LTS version is 17.18.16-lts. it also comes with premium support you can get that if you can't update to the latest.

[ChrisRitchie]

This new version looks like a different library. It gives the feeling that they don't care about projects that use older versions. If you're still on v16-17, you're starting to get really screwed.

I have sunk days into fixing a large code base after upgrading to v18. Ive been using Primeng for years, and this release has just caused countless issues. Hours restyling, component name changes, various bugs, its been a nightmare

[epitzalis]

I think the same, I think it's a very bad decision by Prime NG. A disappointment and I will never recommend Prime NG again. I'm just reding everyone's discontent, and rightly so.

[VicTMPDeV]

Hi this could be issue with v17.18.9+ as you mentioned, but its deprecated in v18 & only scroll is supported, so if you use this option , you won't be able to upgrade.

Is the responsiveLayout="stack" gonna be deprecated? it wasn't working since 17.18 but in 19 is fixed and works properly. Please, don't remove this feature. This kind of table UI for mobile is very usefull.

[imaksp]

Hi @VicTMPDeV , no it was my misunderstanding that prop is still present here: https://primeng.org/table#api.table.props.responsiveLayout

but demo site needs to be updated, without demo most new users won't notice this feature.

[VicTMPDeV]

Hi @imaksp , thanks for your fast response. I'm a little bit afraid about this, because your partner @mertsincan has said in another issue that is gonna be removed (for primeVue, right? but i'm sure that you'll apply the same roadmap for all your products and i want to be sure for that, because it strikes on our app core). This is the thread I was talking about with the info provided by @mertsincan :

https://github.com/primefaces/primevue/issues/3682

[imaksp]

Hi @VicTMPDeV I am not associated with official team, I didn't knew that it was deprecated & later removed from PrimeVue. someone from official team could answer this in better way. they might remove if it gets difficult to support with new features. Personally I think for simple table like layout, table can be replaced with css grid to support such layout on small device.

[fensefernando]

Why span class="p-column-title"> don't work in desktop mode?

But it works in mobile mode

Did anything change in version 19?

My table code is:

<p-table #dt [value]="list" responsiveLayout="stack" selectionMode="multiple" [(selection)]="deudaSelectList" dataKey="nroemision" (onRowSelect)="onRowSelect($event,dt)" (onRowUnselect)="onRowUnselect($event,dt)" [loading]="loading!">

[DaveM22]

Why span class="p-column-title"> don't work in desktop mode?

But it works in mobile mode

Did anything change in version 19?

My table code is:

<p-table #dt [value]="list" responsiveLayout="stack" selectionMode="multiple" [(selection)]="deudaSelectList" dataKey="nroemision" (onRowSelect)="onRowSelect($event,dt)" (onRowUnselect)="onRowUnselect($event,dt)" [loading]="loading!">

add this: @media (min-width: 768px) { .p-column-title { display: none; } }

on your styles.scss / styles.css

[dgmatiz]

I had the same problem, but I solved it by incorporating my own style. I believe this can help others.

`@media screen and (max-width: 960px) { /* Contenedor en bloque para habilitar scroll horizontal */ ::ng-deep .p-datatable { display: block; overflow-x: auto; }

/* Cabecera, cuerpo y pie en bloque */ ::ng-deep .p-datatable .p-datatable-thead, ::ng-deep .p-datatable .p-datatable-tbody, ::ng-deep .p-datatable .p-datatable-tfoot { display: block; width: 100%; }

/* Ocultar la cabecera */ ::ng-deep .p-datatable .p-datatable-thead > tr { display: none; }

/* Cada fila se muestra como bloque con separación y borde */ ::ng-deep .p-datatable .p-datatable-tbody > tr { display: block; margin-bottom: 1rem; border: 1px solid #ddd; border-radius: 4px; }

/* Cada celda se organiza en fila para ubicar el título a la izquierda y el contenido a la derecha / ::ng-deep .p-datatable .p-datatable-tbody > tr > td { display: flex; align-items: center; padding: 0.5rem; border-bottom: 1px solid #eee; width: 100vw !important; / Fuerza que la celda ocupe el ancho del viewport */ box-sizing: border-box; }

/* Título de la columna (p-column-title) a la izquierda */ ::ng-deep .p-datatable .p-datatable-tbody > tr > td .p-column-title { font-weight: bold; text-align: left; margin-right: 1rem; }

/* El contenido restante se alinea a la derecha */ ::ng-deep .p-datatable .p-datatable-tbody > tr > td > :not(.p-column-title) { margin-left: auto; text-align: right; } } `

[fensefernando]

Why span class="p-column-title"> don't work in desktop mode? But it works in mobile mode Did anything change in version 19? My table code is: <p-table #dt [value]="list" responsiveLayout="stack" selectionMode="multiple" [(selection)]="deudaSelectList" dataKey="nroemision" (onRowSelect)="onRowSelect($event,dt)" (onRowUnselect)="onRowUnselect($event,dt)" [loading]="loading!">

add this: @media (min-width: 768px) { .p-column-title { display: none; } }

on your styles.scss / styles.css

It works! Thanks!

[zlatanov]

It seems that this has been addressed in the latest v19.

The css class .p-column-title has been replaced with .p-datatable-column-title, however there is still one issue remaining - by default .p-datatable-column-title should have display: none.

[kekude]

I had the same problem, but I solved it by incorporating my own style. I believe this can help others.

`@media screen and (max-width: 960px) { /* Contenedor en bloque para habilitar scroll horizontal */ ::ng-deep .p-datatable { display: block; overflow-x: auto; }

/* Cabecera, cuerpo y pie en bloque */ ::ng-deep .p-datatable .p-datatable-thead, ::ng-deep .p-datatable .p-datatable-tbody, ::ng-deep .p-datatable .p-datatable-tfoot { display: block; width: 100%; }

/* Ocultar la cabecera */ ::ng-deep .p-datatable .p-datatable-thead > tr { display: none; }

/* Cada fila se muestra como bloque con separación y borde */ ::ng-deep .p-datatable .p-datatable-tbody > tr { display: block; margin-bottom: 1rem; border: 1px solid #ddd; border-radius: 4px; }

/* Cada celda se organiza en fila para ubicar el título a la izquierda y el contenido a la derecha / ::ng-deep .p-datatable .p-datatable-tbody > tr > td { display: flex; align-items: center; padding: 0.5rem; border-bottom: 1px solid #eee; width: 100vw !important; / Fuerza que la celda ocupe el ancho del viewport */ box-sizing: border-box; }

/* Título de la columna (p-column-title) a la izquierda */ ::ng-deep .p-datatable .p-datatable-tbody > tr > td .p-column-title { font-weight: bold; text-align: left; margin-right: 1rem; }

/* El contenido restante se alinea a la derecha */ ::ng-deep .p-datatable .p-datatable-tbody > tr > td > :not(.p-column-title) { margin-left: auto; text-align: right; } } `

[the ](width: 100vw !important;) is making the horizontal scrollbar still visible on my end i have removed this part in case someone encounters it