Tabelle responsive in PrimeNG

PrimeNG ci fornisce tutta una serie componenti HTML da usare nei progetti Angular (e in verità non solo).

Oggi vediamo come far diventare una tabella responsive, partendo dalla documentazione ufficiale.

Prima di tutto aggiungete una classe CSS alle vostre tabelle:

styleClass="p-datatable-striped p-datatable-customers p-datatable-responsive-demo"

Seguendo l'esempio della documentazione, la classe è p-datatable-responsive-demo (ma potete rinominarla come volete).

A questo punto avete due scelte:

• aggiungere il codice ad un file SCSS globale
• usare il CSS in un folgio di stile globale

Nel primo caso il codice sarà questo:

:host ::ng-deep {    
    .p-datatable-responsive-demo .p-datatable-tbody > tr > td .p-column-title {
        display: none;
    }
}

@media screen and (max-width: 40rem) {
    :host ::ng-deep {
        .p-datatable {
            &.p-datatable-responsive-demo {
                .p-datatable-thead > tr > th,
                .p-datatable-tfoot > tr > td {
                    display: none !important;
                }

                .p-datatable-tbody > tr > td {
                    text-align: left;
                    display: block;
                    width: 100%;
                    float: left;
                    clear: left;
                    border: 0 none;

                    .p-column-title {
                        padding: .4rem;
                        min-width: 30%;
                        display: inline-block;
                        margin: -.4em 1em -.4em -.4rem;
                        font-weight: bold;
                    }

                    &:last-child {
                        border-bottom: 1px solid var(--surface-d);
                    }
                }
            }
        }
    }
}

Non so perchè ma a me i codici SCSS personali globali non funzionano; quindi ho optato per il CSS:

/* TABLE RESPONSIVE */
.p-datatable-responsive-demo .p-datatable-tbody > tr > td .p-column-title {
    display: none;
}

@media screen and (max-width: 40rem) {
    .p-datatable.p-datatable-responsive-demo .p-datatable-thead > tr > th,
    .p-datatable.p-datatable-responsive-demo .p-datatable-tfoot > tr > td {
        display: none !important;
    }

    .p-datatable.p-datatable-responsive-demo .p-datatable-tbody > tr > td {
        text-align: left;
        display: block;
        width: 100%;
        float: left;
        clear: left;
        border: 0 none;
    }

    .p-datatable.p-datatable-responsive-demo .p-datatable-tbody > tr > td .p-column-title {
        padding: 0.4rem;
        min-width: 30%;
        display: inline-block;
        margin: -0.4em 1em -0.4em -0.4rem;
        font-weight: bold;
    }

    .p-datatable.p-datatable-responsive-demo .p-datatable-tbody > tr > td:last-child {
        border-bottom: 1px solid var(--surface-d);
    }
}
/* END TABLE RESPONSIVE */

Poi richiamo il file con questo codice direttamente nell'index.html.

Enjoy!