angular - PrimeNG p-dataTable 响应式断点

Question

我目前正在为我的 MEAN 应用程序使用 PrimeNG 4.2.0。代码片段如下:

<div class="ui-g-12" *ngIf="orders">
  <p-dataTable
    [value]="orders"
    [responsive]="true"
    selectionMode="single" 
    [(selection)]="selectedOrder" 
    (onRowDblclick)="onRowSelect($event)"
    styleClass="ordersTable"
  >
    <p-column header="Date" [style]="{'width':'15%'}"> 
      <ng-template let-col let-order="rowData" pTemplate='body'>
        <span>{{order.orderDate | date:'shortDate'}}</span>
      </ng-template>
    </p-column>
    <p-column field="orderNumber" header="ID" [style]="{'width':'15%'}" [filter]="true"></p-column>
    <p-column field="userId" header="Client ID" [style]="{'width':'20%'}"></p-column>
    <p-column header="No. of Products" [style]="{'width':'12%'}">
      <ng-template pTemplate="body" let-col let-order="rowData">
        <span>{{order.orderDetails.length}}</span>
      </ng-template>
    </p-column>
    ...
    <p-footer *ngIf="orders">
      Total orders: {{orders.length}} 
    </p-footer>
  </p-dataTable>
</div> <!--Orders DATA Ends-->

有没有办法为DataTable的响应设置断点？因为 width: 667(iPhone 6 横向模式)的当前结果非常可怕。

Answer 1

我有一个非常相似的需求，但使用的是表组件 (p-table)，我只能通过设置此属性来解决它:[autoLayout]="true"

例子:上一个代码:

<p-table [value]="averbacaoList" selectionMode="single" [rows]="5"  [paginator]="true" [alwaysShowPaginator]="false"
>

带有新属性集的实际代码:

<p-table [value]="averbacaoList" selectionMode="single" [rows]="5"  [paginator]="true" [alwaysShowPaginator]="false"
  [autoLayout]="true"
>