ページ分割コンポーネントを使用した再利用可能なデータテーブルの推奨事項4/5

Question

ここでベストプラクティスは何ですか？ Materialバージョンは過剰なようですが、実装しているコードは分かりません。 一方、複数のデータ型を持つ複数のテーブルがあるため、アプリ全体で再利用可能なものを探しています。

Answer 1

ライブラリをまだファイナライズしていない場合は、Datagrid componentをProject Clarityからご覧になることをお勧めします。これは、ページネーションを含む多数の機能を備えた強力なコンポーネントです。

Answer 2

テーブルの場合、* ngForループを持つブートストラップグリッドを含む共有コンポーネントをシンプルにお勧めします。

<div class="row listview"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
     <table id="myTable" class="table table-bordered"> 
      <thead> 
     //CREATES TABLE HEADERS 
      <tr class="table-head-color"> 
       <th *ngFor="let columns of data?.display_columns; let i = index"> 
       {{ columns }} 
       <br> 
       </th> 
      </tr> 
      //THIS WILL CREATE CORRESPONDING DATA TO IT 
      <tr *ngFor="let row1 of data?.row1; let i= index"> 
       <td style="white-space: nowrap" *ngFor="let columns of data?.display_columns; let i = index"> 
       </span> 
       <span *ngIf="columns != 'someObject1'">{{ row1[columns] }}</span> 
       </td> 
      </tr> 
      </thead> 
     </table> 
     </div> 
    </div> 
    </div> 
</div>  

便宜的にこのデータを再利用して操作することができます。私はあまりにもいくつかの図書館を見て、過度のことに思えました。
単純なデータ表示では、外部ライブラリは良好ですが、イベントとのバインドには混乱が生じます。
ページネーションについても、ブートストラップのページ付けを見ることができます。
これを特定の方法で表示したい場合は、Component.tsに関数を記述して、それらを呼び出すHTMLタグにバインドすることができます。
これはあなたの質問にお答えします。