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的響應斷點？因爲寬度上的當前結果：667（iPhone 6橫向模式）非常可怕。

Answer 1

經過幾分鐘搞亂Chrome開發工具的元素標籤，我能解決我的問題。

PrimeNG數據表響應在@media查詢出現的tbody> tr> 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; 
    } 
}