PrimeNG p表向左对齐分页下拉菜单并添加自定义文本

时间:2020-09-24 15:36:17

标签: angular primeng primeng-turbotable primeng-dropdowns p-table

我正在使用PrimeNG p-table来显示表格数据,如下所示:

    <p-table [value]="data" [columns]="settings.columns" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[10,25,50,100]" 
 [totalRecords]="total" [autoLayout]="true" [pageLinks]="3"
    [loading]="loading">
    <ng-template pTemplate="header">
        <tr>
            <th *ngFor="let header of settings.columns" [pSortableColumn]="header.field">
                {{ header.title }}
    
            </th>
            <th *ngIf="settings.actions">Actions</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-row>
        <tr>
            <ng-container *ngFor="let column of settings.columns">
                <td class="rm-release_table-cell" [style.width]=column.width>
                    <div>
                        <p *ngIf="column.dataType !='html'" class="rm-release_data-id">
                            {{row[column.field]}}
                        </p>
                        <span *ngIf="column.dataType =='html'">
                            <div innerHTML="{{ cellRender(column.render, row) }}"></div>
                        </span>
                    </div>
                </td>
            </ng-container>
        </tr>
    </ng-template>
    </p-table>

现在显示表格和分页。我实际上需要自定义分页,以使其显示下拉列表,以选择左侧的行数和右侧的分页链接。 我当前的输出如下图所示:

enter image description here

但是我要实现的目标如下图所示:

enter image description here

如何将下拉列表向左移动并添加自定义文本?

0 个答案:

没有答案