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 landscape mode) 的当前结果是可怕的。

Answer 1

在 Chrome Dev Tools 的 Elements 标签上搞了几分钟后，我解决了我的问题。

PrimeNG 数据表响应是在 @media 查询出现的 tbody > tr > td 行的深处实现的。为了确保在我首选的屏幕尺寸上显示的响应能力（每次更改断点），我必须将其添加到我的根 styles.css

    @media (max-width: 1365px) /* I want the datatable to be stacked at at least iPad Pro portrait mode, this depends on your data */ 
{
    /* Data in responsive mode */
    .ui-datatable-reflow .ui-datatable-data > tr > td {
        width: 100% !important;
        text-align: left;
        border: 0;
        box-sizing: border-box;
        float: left;
        clear: left;
    }


    .ui-datatable-reflow .ui-datatable-data tr.ui-widget-content {
        border-left: 0;
        border-right: 0;
    }

    .ui-datatable-reflow .ui-datatable-data.ui-widget-content {
        border: 0;
    }

    /*Hide the headers in responsive mode*/
    .ui-datatable-reflow thead th {
        display: none !important;
    }

    /*Display the headers inline with the data in responsive mode */
    .ui-datatable-reflow .ui-datatable-data td .ui-column-title {
        padding: .4em;
        min-width: 30%;
        display: inline-block;
        margin: -.4em 1em -.4em -.4em;
        font-weight: bold;
    }
}

Answer 2

我有一个非常相似的需求，但使用的是 Table 组件 (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"
>

Answer 3

Chau Tran 的回答适用于 PrimeNG 的旧数据Table，但不适用于他们最近的 Table 组件。根据他的方法，我在 PrimeNG 的 table.css 中找到了必要的 CSS 并且只是将它复制到我的根 styles.scss 中以获得更大的屏幕尺寸（在 PrimeNG 8 中测试）：

@media (max-width: 1365px) /* I want the datatable to be stacked at at least iPad Pro portrait mode, this depends on your data */
{
  .ui-table-responsive .ui-table-thead > tr > th,
  .ui-table-responsive .ui-table-tfoot > tr > td {
    display: none !important;
  }

  .ui-table-responsive colgroup {
    display: none !important;
  }

  .ui-table-responsive .ui-table-tbody > tr > td {
    text-align: left;
    display: block;
    border: 0 none;
    width: 100% !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    clear: left;
  }

  .ui-table-responsive .ui-table-tbody > tr > td .ui-column-title {
    padding: .4em;
    min-width: 30%;
    display: inline-block;
    margin: -.4em 1em -.4em -.4em;
    font-weight: bold;
  }
}

PrimeNG p-dataTable 响应式断点

PrimeNG p-dataTable responsive breakpoint

angular

mean

primeng