angular-datatablesで見出しのレイアウトが崩れたときはrerenderすると良い

2021年11月9日

今回はangular-datatablesで見出しのレイアウトが崩れたときはrerenderすると良いということについてお話ししていきます。

angular-datatablesで見出しのレイアウトが崩れたときはrerenderすると良い

angular-datatablesを使っていると表のレイアウトが崩れることがあります。
どうやらangular-datatablesは中でjQueryを使っていて、RxJSでデータを切り替えるだけではjQueryで作られたテーブルの変更がうまくできずテーブルのレイアウトが崩れることがあるようです。（あまりangular-datatablesについて詳しくないのでこの仮説が正しいのかどうかは分かりません）

angular-datatablesでthのタグにhiddenをつけたり、親コンポーネントから小コンポーネントに値を渡したときにテーブルのレイアウトが崩れることがあるようですね。

結論としては、値の受け渡しでレイアウトが崩れることが発覚した場合は公式ドキュメントに書いてある通り、rerenderをするとレイアウトの崩れが直ることがあります。
https://l-lin.github.io/angular-datatables/#/advanced/rerender

この部分ですね。

  rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      // Destroy the table first
      dtInstance.destroy();
      // Call the dtTrigger to rerender again
      this.dtTrigger.next();
    });
  }

rerender(): void {

this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {

// Destroy the table first

dtInstance.destroy();

// Call the dtTrigger to rerender again

this.dtTrigger.next();

});

}

おそらくjQueryで作成したtableを一度壊して新しいtableを作成しているものと思われます。

しかし、私の場合は上記の処理を入れてもレイアウトの崩れが直らないことがありました。

そんなときは、setTimeoutで遅延させてあげるとうまくいきました。（おそらくあまり推奨されたやり方ではありません。）

  rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        dtInstance.destroy();
        this.dtTrigger.next();
    })
    , 1)
  }