标签: primeng-datatable

PrimeNG DataTable提供了[scrollable]定义垂直和/或水平滚动的属性。必须与set scrollHeight和/或组合使用scrollWidth。

我如何有一个可以调整窗口大小或保持滚动功能的表格？

这是我尝试过的代码：

<div class="ui-g-12">

    <p-dataTable class="ui-g-12" [value]="rows"    [hidden]="this.apiService.spinnerIsVisible"
    [style]="{ height: 'fit-content', 'margin-top': '10px' }"
    [resizableColumns]="false" columnResizeMode="fit" emptyMessage="No records found"
    [responsive]="false"
    [globalFilter]="tableSearch"
    [editable]="true"
    [scrollable]="true" scrollHeight="100%" scrollWidth="100%">

      <p-header>
        <button pButton type="button" icon="fa-refresh" (click)="refresh()" style="float:left"></button>
        <label for="tableSearch">Global search: </label>
        <input id="tableSearch" #tableSearch type="text" placeholder="type here">
      </p-header>

      <p-column
        *ngFor="let col of cols" [header]="col" [field]="col"
        [style]="{'width': '250px', 'min-width': '50px', 'word-wrap': 'break-word'}"
        [sortable]="true"
        [filter]="true" filterPlaceholder="" filterMatchMode="contains"
        [editable]="true">
      </p-column>

    </p-dataTable>
</div>

但这仅解决了响应宽度问题。在屏幕截图中，您可以查看可水平滚动的表：

由于在百分比值的情况下的height属性p-dataTable是相对于父级的，因此我尝试div …

我想减少在primeng网格中使用的几列的宽度。但是，据我了解，我们只能更改使用“ p-column”或“ th”标签创建的列的宽度。

以下是PFA代码段：HTML：

 <th *ngFor="let col of columns" [pSortableColumn]="col.field"colspan="col.colspan" style="text-align: 
center;">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
      </th>

和TS：

this.cols = [
                { field: 'first', header:'FIRST'},
                { field: 'second', header: 'SECOND'},
                { field: 'third', header: 'THIRD'},
                { field: 'fourth', header: 'FOURTH'},
                { field: 'fifth', header: 'FIFTH'},
                { field: 'sixth', header: 'SIXTH'}
            ];

我们如何更改可排序primeng表中动态列的宽度？

我正在尝试禁用基于 PrimeNG 表中的布尔值对选定列进行排序。下面是我的列数组

cols = [
    { field: 'name', header: 'Name', sort: true },
    { field: 'age', header: 'Age', sort: true },
    { field: 'gender', header: 'Gender', sort: false },
    { field: 'status', header: 'Status', sort: false }
  ];

某些列的sort值为 as false，我需要禁用这些列的排序。

<p-table [columns]="cols" [value]="persons" [resizableColumns]="true" sortField="name" sortMode="single">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th pResizableColumn  *ngFor="let col of columns" [pSortableColumn]="col.field" [pSortableColumnDisabled]="col.field === 'name' || col.field === 'age'">
                <div class="tb-heading">{{col.header}}</div>
                <div class="sort-icons-container">
                </div>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData …

我正在使用来自 primefaces 的数据表 - primeNg。我可以获取我所在的当前页面并以编程方式将数据表设置为特定页面吗？

我看到数据表在其中使用了分页组件，但是如何使用 @ViewChild 访问它？任何帮助将不胜感激。

我在我的 angular 项目中使用了 primeNG 数据表。在我的一个场景中，我需要获取 primeNG 数据表的当前页码并将该编号传递到下一个屏幕，当用户导航回上一个屏幕时，我想再次设置该页码。

我检查了 primeNG 数据表，但没有明确的方法来获取和设置当前页码。

我想在DataTable单元格primeNg中隐藏溢出文本,但似乎没有任何效果.我没有找到任何可以帮助我的文档.

  <p-dataTable #dataTable 
tableStyleClass="defaultDataTable"
[value]="rows | async"
resizableColumns="false"
reorderableColumns="true" 
responsive="true"
[rowHover]="true" 
[(selection)]="selectedRows"
[rowStyleClass]="getRowClass" 
[loading] = "loading"
(onRowClick)="onSelect($event)" 
(onRowSelect)="onSelect($event)" 
(onRowUnselect)="onSelect($event)"
(onRowDblclick)="onRowDblclick($event)" 
(onHeaderCheckboxToggle)="checkAll($event)">
<p-footer class="table-footer p-text-muted" *ngIf="showFooter">
  <ng-container i18n> {{footerText}}: {{dataTable?.dataToRender?.length || 0}} </ng-container>
</p-footer>
<p-column *ngIf="hasCheckboxColumn == true" [field]="IsSelected" [header]="" selectionMode="multiple"
  onclick="checkAll($event)" [sortable]="false" ></p-column>
      <p-column *ngFor="let column of columns" [field]="column.prop" [style] = "{width: '20%'}" [header]="column.name" [hidden]="!column.visible" [sortable]="isLockColumn(column.name) == false"  >
          <ng-template let-col let-row="rowData" pTemplate="body">
            <div *ngIf="isValueBoolean(row[col.field]); else renderValue" align="center" title=" ">
              <md-checkbox [(ngModel)]="row[col.field]" (change)="lockColumnChecked($event, row)" style = "width:20%;text-overflow: ellipsis;" [disabled]="true"></md-checkbox>
            </div> …

https://www.primefaces.org/primeng/#/datatable/scroll

PrimeNG 提供延迟加载，可在 scrollDown 和 ScrollUp 上刷新数据。我想实现无限滚动，它在 scrollDown 上逐页从服务器获取数据，并在我 scrollUp 时保留该数据。

PrimeNG 网站上没有此类文档。我如何使用 PrimeNG 实现它？

谢谢。

我在使用 PrimeNG DataTables 时遇到问题。我有一个包含大量列的表，需要水平滚动。PrimeNG 开箱即用，带有水平滚动条，与位于表格下方的滚动条配合使用。

我需要使滚动条始终可见，类似于浏览器滚动条，而不需要用户滚动到表格底部。我尝试了使用overflow-x属性的不同CSS解决方案，但它们要么不起作用，要么破坏了PrimeNG表的响应能力。

有人能够做到这一点吗？

任何人都可以帮助我吗？我想初始化索引变量，例如 *ngFor="let d of sI.detail;let i=index"

在我的 p 表中

<ng-template pTemplate="body" let-rowData >
      <tr class="text-center info">
        <td>{{ totalHeader }} </td>
        <td>
          <span>
            {{ rowData?.totalUnits }}
          </span>
          <span>
            ({{ rowData?.totalSale }})
          </span>
          <span *ngIf="rowData.totalUnits && rowData.totalSale">
            /{{ (rowData.totalUnits/rowData.totalSale) | percent:'1.2-2' }}
          </span>
        </td>
      </tr>
    </ng-template>```

我需要垂直拆分页面（例如 60%:40%）到两个区域，并且拆分器必须可拖动。所以我选择了 PrimeNG p-splitter。右侧区域包含带有水平滚动条的 p-table（基于文档： https: //www.primefaces.org/primeng/showcase/#/table/scroll部分：“水平和垂直”）：

<p-splitter [panelSizes]="[60,40]" [style]="{'height': '400px'}">
  <ng-template pTemplate>

    <p-table [value]="cars" [scrollable]="true" [style]="{width:'600px'}" scrollHeight="200px">
    ...
    </p-table>

  </ng-template>
  <ng-template pTemplate>
    Panel 2
  </ng-template>
</p-splitter>

问题是表格宽度绑定为 600px 并且：

1. 无法将拆分器拖动到右侧（表格不允许）
2. 当拆分器向左拖动时，表格宽度保持 600px（因此表格和拆分器之间有无用的空白空间）。

StackBlitz 上的项目

https://stackblitz.com/edit/primeng-splitter-and-datatable

完整代码

<p-splitter [panelSizes]="[60,40]" [style]="{'height': '400px'}">
  <ng-template pTemplate>

    <p-table [value]="cars" [scrollable]="true" [style]="{width:'600px'}" scrollHeight="200px">

      <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
          <col style="width:250px">
          <col style="width:250px">
          <col style="width:250px">
          <col style="width:250px">
        </colgroup>
      </ng-template>

      <ng-template pTemplate="header">
        <tr>
          <th>Vin</th>
          <th>Year</th>
          <th>Brand</th>
          <th>Color</th>
        </tr>
      </ng-template>

      <ng-template pTemplate="body" let-car>
        <tr>
          <td>{{car.vin}}</td>
          <td>{{car.year}}</td>
          <td>{{car.brand}}</td>
          <td>{{car.color}}</td> …