Datatable responsive issue in PrimeReact version 8.6.1

UI Components for React
Post Reply
Ramakrishna.Jetti
Posts: 9
Joined: 20 May 2022, 18:07

17 Oct 2022, 09:45

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
Posts: 3385
Joined: 22 Apr 2013, 15:48

17 Oct 2022, 17:28

Can you explain more what is breaking? I am using "stack" mode with 8.6.1 and it works fine?
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 12.0.0 / PF Extensions 12.0.1
PrimeReact 8.6.1

Ramakrishna.Jetti
Posts: 9
Joined: 20 May 2022, 18:07

20 Oct 2022, 13:45

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
Posts: 3385
Joined: 22 Apr 2013, 15:48

20 Oct 2022, 15:54

I can't do anything with a code snippet i would need to see it in a Code Sandbox or Stackblitz reproducer.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 12.0.0 / PF Extensions 12.0.1
PrimeReact 8.6.1

Ramakrishna.Jetti
Posts: 9
Joined: 20 May 2022, 18:07

04 Nov 2022, 10:13

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
Posts: 3385
Joined: 22 Apr 2013, 15:48

04 Nov 2022, 14:33

Can you open an enhancment ticket on Github here and include your Code Sandbox: https://github.com/primefaces/primereact/issues
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 12.0.0 / PF Extensions 12.0.1
PrimeReact 8.6.1

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests