はじめに

Web アプリケーションでよく「テーブルの行をクリックして詳細ページに遷移させたい」という要件があります。

シンプルに実装すると、JavaScript の click イベントで遷移処理をおこなうのではないかと思います。しかし、この方法だとユーザビリティの観点で少し課題があります。

右クリックメニューの「新しいタブで開く」ができない
Ctrl/Cmd + クリックで「新規タブ表示」ができない

Bootstrap のストレッチリンクのアプローチを参考に、Vue + Tailwind CSS でテーブル行全体をセマンティックにクリック可能にする方法をご紹介します！

問題: JavaScript の click イベントだけでは不十分

テーブル行のクリックによる遷移は、以下のように実装することが多いのではないでしょうか...？

<template>
  <!-- ...  -->
  <tr
    v-for="user in users"
    :key="user.id"
    class="hover:bg-gray-100 cursor-pointer"
    @click="() => router.push({ name: 'userDetail', params: { id: user.id } })"
  >
    <td>{{ user.name }}</td>
    <td>{{ user.email }}</td>
    <td>{{ user.role }}</td>
  </tr>
  <!-- ...  -->
</template>

この実装には以下のような課題があります：

右クリックメニューの「新しいタブで開く」ができない
Ctrl/Cmd + クリックで「新規タブ表示」ができない
アクセシビリティの観点で問題がある（リンクとして認識されない）

問題: router-link を使うと行全体がクリック可能にならない

そこで、router-link を使ってリンクを実装すると上記の問題は解消できそうです：

<template>
  <!-- ...  -->
  <tr
    v-for="user in users"
    :key="user.id"
    class="hover:bg-gray-100 cursor-pointer"
  >
    <td>
      <!-- a タグとして描画される -->
      <router-link
        :to="{ name: 'userDetail', params: { id: user.id } }"
        class="hover:underline"
      >
        {{ user.name }}
      </router-link>
    </td>
    <td>{{ user.email }}</td>
    <td>{{ user.role }}</td>
  </tr>
  <!-- ...  -->
</template>

しかし、この実装では行全体がクリック可能になりません。 リンクテキスト部分のみがクリック可能になり、行の他の部分をクリックしても遷移しないので不便です。

すべての列にリンクを付ければ行全体がクリック可能になりますが、少し冗長な書き方になってしまいます。

<template>
  <!-- ...  -->
  <tr
    v-for="user in users"
    :key="user.id"
    class="hover:bg-gray-100 cursor-pointer"
  >
    <td>
      <router-link
        :to="{ name: 'userDetail', params: { id: user.id } }"
        class="block w-full h-full hover:underline"
      >
        {{ user.name }}
      </router-link>
    </td>
    <td>
      <router-link
        :to="{ name: 'userDetail', params: { id: user.id } }"
        class="block w-full h-full"
      >
        {{ user.email }}
      </router-link>
    </td>
    <td>
      <router-link
        :to="{ name: 'userDetail', params: { id: user.id } }"
        class="block w-full h-full"
      >
        {{ user.role }}
      </router-link>
  </tr>
  <!-- ...  -->
</template>

<table> タグを使わず grid レイアウトで実装する方法も考えられますが、表データはセマンティックに <table> タグでマークアップできるとより望ましそうです。

解決策：Bootstrap のストレッチリンクを参考に実装する

Bootstrap には stretched-link というクラスがあり、リンク要素を親要素全体に引き伸ばすことができます。このアプローチを Vue + Tailwind CSS で再現してみます！

実装方法

1. StretchRouterLink コンポーネントの作成

まず、ストレッチリンク機能を持つ Vue コンポーネントを作成します：

<script setup lang="ts">
import { RouterLinkProps } from 'vue-router';

defineProps<RouterLinkProps>();
</script>

<template>
  <!-- Bootstrap の stretch-link 風の実装 -->
  <router-link
    class="after:absolute after:inset-0"
    v-bind="$props"
  >
    <slot />
  </router-link>
</template>

ポイント：

::after 擬似要素を使う
absolute、inset-0 で親要素全体を覆えるようにする

2. テーブル行での使用

<template>
  <tr
    v-for="user in users"
    :key="user.id"
    class="hover:bg-gray-100 relative"
  >
    <td>
      <StretchRouterLink
        :to="{
          name: 'userDetail',
          params: { id: user.id }
        }"
        class="hover:underline"
      >
        {{ user.name }}
      </StretchRouterLink>
    </td>
    <td>{{ user.email }}</td>
    <td>{{ user.role }}</td>
  </tr>
</template>

ポイント：

<tr> を relative に設定する
router-link を StretchRouterLink に置き換えるだけ

動作原理

router-link により生成される <a> タグの内側に ::after 擬似要素が追加されます。
この疑似要素が親の relative 要素（この場合は <tr>）全体を覆うため、行全体がクリック可能になります。

注意点：同じ行内の他のボタンがクリックできない

この実装の注意点として「削除ボタン」などの他のクリック可能な要素が行内にある場合、ボタンをクリックしても行全体のリンクが優先されてしまい、ボタンが機能しなくなってしまいます。

解決策: ボタンに relative を追加する

<template>
  <!-- ... -->
  <tr class="hover:bg-gray-100 cursor-pointer relative">
    <td>
      <StretchRouterLink
        :to="{ name: 'userDetail', params: { id: user.id } }"
        class="hover:underline"
      >
        {{ user.name }}
      </StretchRouterLink>
    </td>
    <td>{{ user.email }}</td>
    <td>
      <button
        class="relative"
        @click.stop="async () => await handleDelete(user)"
      >
        削除
      </button>
    </td>
  </tr>
  <!-- ... -->
</template>

削除ボタン付き表

実装のポイント：

ボタンに relative を追加することで、<a> タグの ::after 擬似要素のカバー対象から外れる
@click.stop でイベントの伝播を止めることで、行クリックとボタンクリックを独立させる

まとめ

テーブルの行全体をセマンティックにクリック可能にするには、Bootstrap のストレッチリンクのアプローチが実装方法の 1 つとして利用できそうでした。Vue + Tailwind CSS でも簡単に実装でき、ユーザビリティを向上させることができそうです！

参考

Bootstrap - Stretched link

Discussion