PrimeNG p-dataTable响应断点

我在我的MEAN应用程序中使用PrimeNG 4.2.0。代码片段如下：PrimeNG p-dataTable响应断点

<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横向模式）非常可怕。

来源

2017-09-16 Chau Tran

经过几分钟搞乱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; 
    } 
}

来源

2017-09-16 05:01:39

PrimeNG p-dataTable响应断点

回答

相关问题