Question

我正在使用PrimeNG 4.2.0为我的MEAN应用程序。代码段如下：

<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的响应能力设置断点？因为宽度上的当前结果：667（iPhone 6横向模式）是可怕的。

Answer 1

在使用Chrome Dev Tools的Elements标签几分钟之后，我能够解决我的问题。

PrimeNG数据表响应在tbody的深层实现＆gt; tr> @media查询所在的td行。为了确保在mypreferred屏幕大小上显示的响应性（更改每个说法的断点），我必须将其添加到我的根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

Chau Tran的答案对于PrimeNG的旧DataTable有效，但不适用于它们的最新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;
  }
}

Answer 3

我有一个非常相似的需求，但使用表组件（p表），并且仅通过设置以下属性即可解决该问题： [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"
>

PrimeNG p-dataTable响应断点

3 个答案: