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

今回は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

この部分ですね。

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

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

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

Angularはまだいろいろと謎が深いです。

終わりに

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

最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。






Angular

Posted by ちこ