ターボテーブルを使用していて、次のものが必要です。
私が得たターボテーブルの例から:
<p-table [columns]="cols" [value]="cars" [scrollable]="true" scrollHeight="200px"
[style]="{'width':'100%'}">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" style="width:250px">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
でも使いたくない
<col *ngFor="let col of columns" style="width:250px">
ここに plnkr
このコードをファイル.htmlで使用します
<p-table [style]="{'overflow':'auto!important'}"
[columns]="cols" [value]="Dataset"
[resizableColumns]="true" columnResizeMode="expand"
[responsive]="true" [rows]="20"
[immutable]=false
[paginator]="true" [rowsPerPageOptions]="[10,15,20,25]">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field" pResizableColumn >
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns" class="ui-resizable-column">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
そして、このcssコードを自動フィットして列.scssに再販可能に追加します
//table ui
::ng-deep .ui-table table, .ui-table table
{ table-layout:auto !important;
}
::ng-deep .ui-table-tablewrapper {
width: auto!important;
}
::ng-deep .ui-table-resizable {
padding-bottom: 1px;
/* overflow: auto; */
width: auto !important;
}
.ui-table .ui-table-tbody > tr, .ui-table .ui-table-thead > tr > th, .ui-table .ui-table-tfoot > tr > td{
max-width: 300px !important;
font-size: 12px;
padding: 0px !important;
padding-left: 4px !important;
color: black;
text-transform: capitalize;
white-space: nowrap;
overflow: hidden;
text-overflow: Ellipsis !important;
border-width: 1px;
}
パフォーマンス上の理由から、デフォルトのテーブルレイアウトは固定されています。つまり、セルの幅はコンテンツに依存しません。セルの内容に基づいてセルをスケーリングする必要がある場合は、autoLayoutプロパティをtrueに設定します。
<p-table [columns]="cols" [value]="cars" [scrollable]="true"
scrollHeight="200px" [autoLayout]="true">
</p-table>
PrimeNG p-tableは、スクロールによる自動調整をサポートしていません( ここ を参照)
P-tableの状態機能にフックすることで、スクロール、列の並べ替え、列のサイズ変更、モックオートフィットを連携させることができました。
<p-table
*ngIf="!loading"
[columns]="selectedColumns"
[value]="listRows"
[(selection)]="selectedRows"
[rows]="pageSize"
[totalRecords]="rowCount"
(sortFunction)="sort($event)"
[customSort]="true"
[responsive]="true"
[scrollable]="true"
scrollHeight="550px"
[columnResizeMode]="'expand'"
[reorderableColumns]="true"
[resizableColumns]="true"
stateStorage="local"
[stateKey]="tableStateKey"
>
次に、テーブルを最初に初期化する前に、状態が存在するかどうかを確認します。存在しない場合は、すべての列と行で最長のテキスト幅を計算し、この関数を使用してこれをテーブル状態ストアに保存します
@ViewChild("myCanvas") myCanvas: ElementRef;
.
.
.
getTextLength(text: string) {
const ctx = this.myCanvas.nativeElement.getContext("2d");
ctx.font =
'14px "Univers Next W01 Light", Helvetica, Arial, sans-serif';
return Math.round(ctx.measureText(text).width);
}
これがすべてのデータを反復処理する関数です
setInitialColumnWidths(columns: any[], rows: any[]) {
// Attempt to guess initial column width if we don't have any stored yet
let tableState = JSON.parse(localStorage.getItem(this.tableStateKey));
if (!tableState) {
tableState = {};
// Add some width for the selection checkbox column
const colWidths = [47];
const colOrder = [];
this.cols.forEach(col => {
let maxStringLength = this.getTextLength(col.header);
maxStringLength = maxStringLength < 100 ? 100 : maxStringLength;
rows.forEach(row => {
if (
col.field &&
row[col.field] &&
this.getTextLength(row[col.field]) > maxStringLength
) {
maxStringLength = this.getTextLength(row[col.field]);
}
});
// Add some extra pixels for padding etc.
colWidths.Push(maxStringLength + 50);
colOrder.Push(col.field);
});
// The PrimeNG table component state requires the column order to be specified as well
tableState["columnOrder"] = colOrder;
tableState["columnWidths"] = colWidths.join(",");
localStorage.setItem(
this.tableStateKey,
JSON.stringify(tableState)
);
}
}
これは私よりもうまく機能します。明らかに、他のページの残りのデータの長い文字列には対応していませんが、少なくとも100pxを設定し、ユーザーが列幅を調整すると、新しい幅がローカルストレージに保存されます。