web-dev-qa-db-ja.com

Primengはスクロール可能なデータテーブルの高さを応答可能にします

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>

しかし、それは応答幅の問題を解決するだけです。スクリーンショットでは、水平方向にスクロール可能なテーブルを選択できます： here is the screenshot

パーセンテージ値の場合、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%;
}

しかし、それも私にとってはうまくいきませんでした： enter image description here スクリーンショットでは高さが正しいようですが、正しくありません。下にスクロールすると、最初は正常に表示されますが、テーブルの最後に近づくと、スクロールバーがビューの外に出るので、スクロールしている間はスクロールバーを表示できません。したがって、データテーブルは本来よりも少し高いようです。

どうすればこれを解決できますか？何か助けていただければ幸いです！

cssangularprimengprimeng-datatable
6
Nikita Marinosyan

これがあなたのケースに正確に適合するかどうかはわかりませんが、scrollHeightデータテーブルプロパティを次のように設定することで問題を解決しました：

scrollHeight="50vh"

vhは以下を参照します：

vhビューポートの高さの1％を基準

Viewport=ブラウザウィンドウのサイズ。ビューポートの幅が50cmの場合、1vw = 0.5cmです。

vhのさまざまな値をテストして、より適切なものを確認できます。

詳細： https://www.w3schools.com/cssref/css_units.asp

6
fabioresner

私はこれを_p-table_で使用します（_p-datatable_で動作するかどうかはわかりません）。

[scrollHeight]="'calc(100vh - 204px)'"

8
jvitor83

私はのようなtsファイルで内側の高さと内側の幅を取得します

setInnerWidthHeightParameters()
  {
    this.innerWidth = window.innerWidth;
    this.innerHeight = window.innerHeight * 0.70;
  }

そしてそれを

[scrollHeight]="innerHeight +'px'"

動的に設定するために、私にとってはうまくいきました。

1
Arthur Cam

ScrollHeightは100％である必要があります。

0
Tejashree