Datatable responsive issue in PrimeReact version 8.6.1

[Ramakrishna.Jetti]

Hi Team,

We are updating PrimeReact version 8.6.1, but we are facing an issue in Datatable responsive mode.
Below dynamically generating CSS properties are override the default CSS.
can we disable pr_id_xx from datatable ?
can you please check the code snippet below and suggest how to resolve the issue?

Data table

Code: Select all

<DataTable responsiveLayout="stack" ........ />

Below highlighted dynamically generated CSS is breaking the responsive design
how to prevent generating dynamically CSS?

Code: Select all

@media screen and (max-width: 960px) {
    .p-datatable[pr_id_2] .p-datatable-thead > tr > th,
    .p-datatable[pr_id_2] .p-datatable-tfoot > tr > td {
        [b]display: none !important;[/b]
    }

    .p-datatable[pr_id_2] .p-datatable-tbody > tr > td {
       [b] display: flex;[/b]
        width: 100% !important;
        align-items: center;
        justify-content: space-between;
    }

    .p-datatable[pr_id_2] .p-datatable-tbody > tr > td:not(:last-child) {
        border: 0 none;
    }

    .p-datatable[pr_id_2].p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
        border-top: 0;
        border-right: 0;
        border-left: 0;
    }

    .p-datatable[pr_id_2] .p-datatable-tbody > tr > td > .p-column-title {
        display: block;
    }
}

[Melloware]

Can you explain more what is breaking? I am using "stack" mode with 8.6.1 and it works fine?

[Ramakrishna.Jetti]

can we disable the dynamic CSS? ( please check the above CSS code) dynamic CSS is breaking custom CSS
we don't want that dynamic CSS

[Melloware]

I can't do anything with a code snippet i would need to see it in a Code Sandbox or Stackblitz reproducer.

[Ramakrishna.Jetti]

Hi Team,

Please check the attached sandbox URL: https://codesandbox.io/s/modest-satoshi-nyvt8z


Requirement: in the mobile response view, row edit, delete, and user icons should be in the same row.
for that requirement, we implemented a template for the body so we can able to show the all icon in one row.

Issue: if I click the PENCIL icon how can I call the default rowedit functionality?

below code for default the data table view, but icons are showing in a different row

Code: Select all

 <Column rowEditor headerStyle={{ width: "10%", minWidth: "8rem" }}  bodyStyle={{ textAlign: "center" }}></Column>

<Column  body={this.actionTemplate}  className="actionPanel" style={{ width: "20%" }}/>

[Melloware]

Can you open an enhancment ticket on Github here and include your Code Sandbox: https://github.com/primefaces/primereact/issues