p-table paginator

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
DanielFeeney95
Posts: 1
Joined: 28 Aug 2018, 14:33

28 Aug 2018, 15:02

Hi, i'm using p-table on my code and i'm currently tring to use the rowsPerPageOptions on it, but the paginator is doing some weird behavior. The numbers of the paginator are misplaced from the original position whem i put the rowsPerPageOptions. Here is the code of my p-table. Glad if someone helps :) .

Code: Select all

<p-table [value]="tecnicos"
                selectionMode="single" [paginator]="true" [rowsPerPageOptions]="[5,10,15]"  [rows]="5" [responsive]="true"
                paginatorPosition="bottom">
                <ng-template pTemplate="caption">
                    Lista de Tecnicos
                </ng-template>
                <ng-template pTemplate="header">
                    <tr>
                        <th>Nome</th>
                        <th>CPF</th>
                        <th colspan="2">Ações</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-tec>
                    <tr>
                        <td>{{tec.nome}}</td>
                        <td>{{tec.cpf}}</td>
                        <td>
                            <button pButton type="button" class="ui-button-warning " [routerLink]="['/tecnicoCadastro',tec.id]" icon="fa fa-pencil" title="Alterar"
                                pTooltip="Alterar" tooltipPosition="top"></button>

                        </td>
                        <td>
                            <button pButton type="button" class="ui-button-danger " icon="fa fa-trash" (click)="deletar(tec.id)" pTooltip="Excluir" tooltipPosition="top"></button>
                        </td>

                    </tr>
                </ng-template>
            </p-table>

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

29 Aug 2018, 08:36

We'll review and get back to you.

MariuszB
Posts: 1
Joined: 18 Jan 2019, 17:46

13 Feb 2019, 18:29

Greetings,

I've just stumbled into the same issue. When rowsPerPageOptions for the Table or for the Paginator directly is set, it positions the page numbers incorrect, demo:

Image


It has been now a few months since the thread starter asked for help. Could you look into this?

Thanks
Mariusz

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

19 Feb 2019, 12:31

Hi,
So sorry for the delayed reply. We fixed for next release but you can add the below code in your stylesheet or in src/assets/sass/overrides/_theme_styles.scss until release

Code: Select all

body {
    .ui-paginator {
        .ui-paginator-pages {
            vertical-align: inherit;
        }
    }
}

david.molloy@dcu.ie
Posts: 4
Joined: 15 Aug 2019, 20:04

15 Apr 2020, 11:27

Hi Merve7,
I'm not certain that this is fixed just yet? I tried 9.0.5 and the new stylesheet just now and the same misalignment is happening if you use the rowsPerPageOptions attribute in a table. Looking at the CSS I believe you were referring to from 9.0.5.

Maybe I'm doing something wrong here? This isn't an Avalon specific issue is it? Rather with the core libraries?

Many thanks,
Dave


.ui-paginator .ui-paginator-page,
.ui-paginator .ui-paginator-pages,
.ui-paginator .ui-paginator-next,
.ui-paginator .ui-paginator-last,
.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-current {
display: inline-block;
min-width: 1.5em;
height: 1.5em;
line-height: 1.5em;
zoom: 1;
margin-left: .063em;
margin-right: .063em;
text-decoration: none;
vertical-align: middle;
text-align: center;
position: relative;
}

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

23 Apr 2020, 16:44

Hi,
This concerns both the core and the template and we will make improvements soon. Please use the above code until we announce it.

Post Reply

Return to “Avalon - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest