MENU

v-data-tableテーブルのヘッダーで改行をする方法

Vuetifyのv-data-tableで、テーブルのヘッダーで改行する方法をご紹介します。
通常のhtmlでは、thタグの中で<br />を使えば済みますがv-data-tableでは、標準的にはpropsに配列(またはオブジェクト)を渡すためこの方法が使えません。

目次

結論:headerスロットを使う

公式ドキュメントを見れば分かるのですが、headerスロットが用意されています。
以下のように書けば、thの中で改行できます。

        <v-data-table
          :items="items"
        >
          <template v-slot:header>
            <thead>
              <th>ID</th>
              <th>名前</th>
              <th>緊急<br />連絡先</th>
            </thead>
          </template>
        </v-data-table>

CSS以外では調べてもあまり出てこなかったため、記事にしました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次