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 Dev ToolsのElementsタグを使いこなして問題を解決できました。

@mediaクエリが提示するtbody> tr> td行の奥にPrimeNGデータ可の応答性が実装されています。レスポンスをマイクレファーされたスクリーンサイズで表示するには（言い方を変えてブレークポイントを変更する）、これを自分のルートstyles.cssに追加する必要がありました.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; 
    } 
}