PrimeNG DataTable は、垂直および/または水平スクロールを定義する[scrollable]
プロパティを提供します。これは、セットscrollHeight
やscrollWidth
と組み合わせて使用する必要があります。
スクロール可能な機能を維持しながら、ウィンドウの高さと幅に合わせて調整できるテーブルを作成するにはどうすればよいですか?
これが私が試したコードです:
<div class="ui-g-12">
<p-dataTable class="ui-g-12" [value]="rows" [hidden]="this.apiService.spinnerIsVisible"
[style]="{ height: 'fit-content', 'margin-top': '10px' }"
[resizableColumns]="false" columnResizeMode="fit" emptyMessage="No records found"
[responsive]="false"
[globalFilter]="tableSearch"
[editable]="true"
[scrollable]="true" scrollHeight="100%" scrollWidth="100%">
<p-header>
<button pButton type="button" icon="fa-refresh" (click)="refresh()" style="float:left"></button>
<label for="tableSearch">Global search: </label>
<input id="tableSearch" #tableSearch type="text" placeholder="type here">
</p-header>
<p-column
*ngFor="let col of cols" [header]="col" [field]="col"
[style]="{'width': '250px', 'min-width': '50px', 'Word-wrap': 'break-Word'}"
[sortable]="true"
[filter]="true" filterPlaceholder="" filterMatchMode="contains"
[editable]="true">
</p-column>
</p-dataTable>
</div>
しかし、それは応答幅の問題を解決するだけです。スクリーンショットでは、水平方向にスクロール可能なテーブルを選択できます:
パーセンテージ値の場合、p-dataTable
のheight
属性は親を基準にしているため、style="height: 100%"
を追加することにより、コンテンツに合わせて親をdiv
にしようとしました親div
に。更新されたコードは次のとおりです。
<div class="ui-g-12" style="height: 100%">
<p-dataTable class="ui-g-12" [value]="rows" [hidden]="this.apiService.spinnerIsVisible"
[style]="{ height: 'fit-content', 'margin-top': '10px' }"
[resizableColumns]="false" columnResizeMode="fit" emptyMessage="No records found"
[responsive]="false"
[globalFilter]="tableSearch"
[editable]="true"
[scrollable]="true" scrollHeight="100%" scrollWidth="100%">
<p-header>
<button pButton type="button" icon="fa-refresh" (click)="refresh()" style="float:left"></button>
<label for="tableSearch">Global search: </label>
<input id="tableSearch" #tableSearch type="text" placeholder="type here">
</p-header>
<p-column
*ngFor="let col of cols" [header]="col" [field]="col"
[style]="{'width': '250px', 'min-width': '50px', 'Word-wrap': 'break-Word'}"
[sortable]="true"
[filter]="true" filterPlaceholder="" filterMatchMode="contains"
[editable]="true">
</p-column>
</p-dataTable>
</div>
私はstyles.scss
ファイルに次の変更を適用して機能させました(stackoverflowの他の質問でこれを見つけました):
html, body {
height: 100%;
}
しかし、それも私にとってはうまくいきませんでした: スクリーンショットでは高さが正しいようですが、正しくありません。下にスクロールすると、最初は正常に表示されますが、テーブルの最後に近づくと、スクロールバーがビューの外に出るので、スクロールしている間はスクロールバーを表示できません。したがって、データテーブルは本来よりも少し高いようです。
どうすればこれを解決できますか?何か助けていただければ幸いです!
これがあなたのケースに正確に適合するかどうかはわかりませんが、scrollHeightデータテーブルプロパティを次のように設定することで問題を解決しました:
scrollHeight="50vh"
vhは以下を参照します:
vhビューポートの高さの1%を基準
Viewport=ブラウザウィンドウのサイズ。ビューポートの幅が50cmの場合、1vw = 0.5cmです。
vhのさまざまな値をテストして、より適切なものを確認できます。
私はこれを_p-table
_で使用します(_p-datatable
_で動作するかどうかはわかりません)。
[scrollHeight]="'calc(100vh - 204px)'"
私はのようなtsファイルで内側の高さと内側の幅を取得します
setInnerWidthHeightParameters()
{
this.innerWidth = window.innerWidth;
this.innerHeight = window.innerHeight * 0.70;
}
そしてそれを
[scrollHeight]="innerHeight +'px'"
動的に設定するために、私にとってはうまくいきました。
ScrollHeightは100%である必要があります。