vuetifyのv-data-tableの表示をtruncateさせたい

この記事は Calendar for UdonTech Advent Calendar 2021 | Advent Calendar 2021 - Qiita の15日目の記事です。

vuetifyというvue用のUIフレームワークがあって、ここ数年こればっかり使ってます。*1

さて、vuetifyの中には、v-data-tableという高機能なテーブルがあります。

vuetifyjs.com

このテーブルコンポーネント、ちょっと文字列が長すぎると適当に改行してくれるという便利な存在なんですが 改行されると同じ画面サイズでも表示される行数が変わるので、不都合が生じる時もあります。

たとえば、今年話題になったアップル謹製キラキラネームの表を作ると、3行目の日本語版だけ改行されてしまってちょっと収まりが悪いですね。

https://codepen.io/so5/full/yLzgKqN

ここで、登場するのがv-text-truncateというヘルパークラスです。 これを適用すると指定された幅を超えた時に hogehoge... みたいな感じで省略してくれます。

vuetifyjs.com

特定の列だけにclassを指定するためには、item.<列名> というスロットを使ってその列だけ自分で書き直した上でclassを指定すれば良いので、こんな感じのコードになります

 <v-data-table :headers="headers" :items="items">
   <template #item.value="props">
     <div class="text-truncate">
       {{ props.item.value }}
    </div>
  </template>
  </v-data-table>     

https://codepen.io/so5/full/KKXaoeK

・・・省略されてませんね。

実はこれ、v-datatableの方で何かイロイロとやってくれるらしく、列幅を広げて無理矢理全部表示されてしまいます。

解決策は意外と簡単で、省略したい列にmax-widthを指定すると、その幅を超えた時に省略して表示してくれます。

https://codepen.io/so5/full/PojQMEj

無事に「スーパーキラキラカラフルク...」になりました!!

まとめ

• v-data-tableの特定の列をカスタマイズする時は、item.<name>というスロットを使う
• テーブル内で指定した幅を超えた文字を省略表示するためには、text-truncateクラスを適用した上で、CSSでmax-widthを指定する

*1:むしろコレが無いとUIとか作れないくらいどっぷりと依存しています。