2

I am currently developing the user interface of a web application using angular5. I have a p-dataTable component (PrimeNG v5) with several rows, and a half of it frozen and the rest scrollable horizontally.

The goal is attaching a footer row to the frozen side with some summation, etc. But what I'm getting instead is this final row attached to the scrollable side of the table.

Do you know how can I acieve this?

That's a simplified markup example:

<p-dataTable [scrollable]="true" frozenWidth="45vw">
    <p-column field="name"></p-column>
    <p-column field="surname"></p-column>
    <p-column field="adults_booking" frozen="true"></p-column>
    <p-column field="children_booking" frozen="true"></p-column>
    <p-footerColumnGroup>
        <p-row>
            <p-column footer="" colspan="2"></p-column>
            <p-column footer="{{nmbAdults}}"></p-column>
            <p-column footer="{{nmbChildren}}"></p-column>
        </p-row>
    </p-footerColumnsGroup>
<p-dataTable>

And a basic image of the goal from view:

enter image description here

Note that left side half is the scrollable one, and the right side half is the frozen one where I really need to position those values.

Thanks in advance and greetings!

rmi8092
  • 63
  • 9

0 Answers0