データテーブルの主な列の列を自動調整およびサイズ変更可能にしたいので、2つのcssクラス.ui-datatableテーブルと.ui-datatable-tablewrapperでこの問題を変更しました。
以下のコードを使用しました。 SCSSセットtable-layout:auto!importantで変更されました。 .html
<p-dataTable [value]="Dataset" [style]="{'width':'100%','overflow':'auto!important'}"
[responsive]="true" [rows]="20"
[resizableColumns]="true"
columnResizeMode="expand"
[immutable]=false
[paginator]="true" [rowsPerPageOptions]="[10,15,20,25]"
appendTo="body" #dt>
<p-column styleClass="checkbox ui-resizable-column" [style]="{'width': 'auto'}" selectionMode="multiple">
</p-column>
<p-column *ngFor="let col of cols;let j=index;" [style]="{'width':'auto','display':col.display} " [field]="col.field" [header]="col.header"
[sortable]="true" [filter]="true" filterPlaceholder="Search" (mouseleave)="hoveredIndex=null" filterPlaceholder="Search"
appendTo="body">
<ng-template let-row="rowData" let-i="rowIndex" pTemplate="body">
<div [pTooltip]="row[col.field]" [id]="col.field"></div>
<!-- set String -->
<span (click)="test(dt)" style="text-align:left;" *ngIf="col.datatype!='int' && col.datatype!='float'">
{{row[col.field]}}
</span>
<!-- set int -->
<span (click)="test(dt)" style="text-align:top;float: top;padding-top: 4px !important;" *ngIf="col.datatype=='int' || col.datatype=='float' ">
{{row[col.field]}}
</span>
</ng-template>
</p-column>
</p-dataTable>
.scss
@import "src/app/Themes/colorVariables"; //datatable ui
//Updated row
::ng-deep .ui-datatable tbody > tr.ng-star-inserted.ui-widget-updated-row{
background-color:$updated-row-color;
}
::ng-deep .ui-datatable tbody > tr>td.ui-widget-deleted-row-checkbox .ui-chkbox{
display: none;
}
//Deleted row
::ng-deep .ui-datatable tbody > tr.ng-star-inserted.ui-widget-deleted-row{
background-color:$deleted-row-color;
}
::ng-deep .ui-datatable table
{
table-layout:auto !important;
overflow-y: scroll !important;
}
::ng-deep .ui-datatable-tablewrapper {
overflow-y: scroll !important;
width: auto !important;
}
::ng-deep .ui-datatable-resizable {
padding-bottom: 1px;
/* overflow: auto; */
width: auto !important;
}
::ng-deep .ui-datatable-scrollable-view .ui-datatable-scrollable-body {
// min-height: 300px;
border: 1px solid #D5D5D5;
}
::ng-deep .ui-datatable tbody > tr.ui-widget-content.ui-state-highlight{
background-color: darkkhaki !important;
}
::ng-deep a.ui-state-highlight , .ui-state-highlight{
background-color: rgb(64, 153, 83);
color: black;
}
.hoverAction:hover{
background-color: seagreen;
color: black;
}
::ng-deep .ui-confirmdialog-message {
white-space: pre-line;
}
::ng-deep .ui-datatable tr.ui-datatable-even:hover
{ background: #78BCFF;
}
::ng-deep .ui-datatable tbody > tr.ui-widget-content.ui-datatable-odd:hover {
background: #78BCFF;
}
.ui-datatable .ui-datatable-thead>tr>th, .ui-datatable .ui-datatable-tfoot>tr>td, .ui-datatable .ui-datatable-data>tr>td {
border-color: inherit;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: .25em .5em;
border-width: 1px;
flex: 2;
//width:auto !important;
min-height: 8px;
min-width: auto !important;
max-width: 300px !important;
font-size: 12px;
padding: 0px !important;
padding-left: 4px !important;
color: black;
text-transform: capitalize;
white-space: nowrap;
overflow: hidden;
display: table-cell;
text-overflow: Ellipsis !important;
Word-wrap: break-Word !important;
/* font-size: 11px; */
font-family: $default-font-family;
border-width: 1px;
border-style: solid;
}
2つのプロパティ[resizableColumns] = "true" [autoLayout] = "true"を<p-table>
タグ内で定義するように使用する必要があります
<p-table [resizableColumns]="true" [autoLayout]="true">
発生する理由)検査すると、primengはデフォルトでprimeng.min.cssファイルから次のコードを追加します
.ui-table table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
Table-layoutプロパティを変更する必要があります。これには、[autoLayout] = "true"を使用する必要があります。 :Hostを使用してこれをオーバーライドできる別の方法もありますが、autoLayoutはすでに使用可能であるため、お勧めしません。
resizingの場合、タグで[resizableColumns] = "true"を使用する必要があります
scrollingの場合、タグで[scrollable] = "true" scrollHeight = "300px"を使用する必要があります