Vue Js table with expandable rows

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <h2>Vue Js Exapand Collapse Table</h2>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Details</th>
        </tr>
      </thead>
      <tbody v-for="(user, index) in users" :key="index">
        <tr>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>
            <button @click="toggleDetails(index)">
              {{ user.showDetails ? 'Hide Details' : 'Show Details' }}
            </button>
          </td>
        </tr>
        <tr>
          <td colspan="3" v-if="user.showDetails"
            :class="{'open-details': user.showDetails, 'close-details': !user.showDetails}">
            {{ user.details }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          users: [
            {
              name: 'John Doe',
              email: 'john@example.com',
              details: 'John Doe is a web developer from San Francisco',
              showDetails: false
            },
            {
              name: 'Jane Smith',
              email: 'jane@example.com',
              details: 'Jane Smith is a graphic designer from New York',
              showDetails: false
            },
            {
              name: 'Andrew',
              email: 'andrew@example.com',
              details: 'Andrew is a Backend Developer from USA',
              showDetails: false
            },
            {
              name: 'James',
              email: 'james@example.com',
              details: 'James is a fullstack developer from England',
              showDetails: false
            }
          ]
        };
      },
      methods: {
        toggleDetails(index) {
          this.users[index].showDetails = !this.users[index].showDetails;
        }
      }
    });

</script>
  <style scoped>
    table {
      border-collapse: collapse;
      width: 100%;
      margin-bottom: 16px;
    }

td {
      padding: 16px;
      border-bottom: 1px solid #e0e0e0;
      font-size: 14px;
    }

td:first-child,
    th:first-child {
      padding-left: 24px;
    }

td:last-child,
    th:last-child {
      padding-right: 24px;
    }

tr:hover {
      background-color: #f5f5f5;
    }

/* Matching styles for table headers */
    th {
      text-align: left;
      background-color: #2196f3;
      color: #ffffff;
      font-weight: 500;
      font-size: 16px;
      padding: 16px;
    }

th:first-child {
      border-top-left-radius: 4px;
    }

th:last-child {
      border-top-right-radius: 4px;
    }

td[colspan="3"] {
      padding: 16px;
      background-color: #e0e0e0;
      border-bottom: none;
      height: 0;
      opacity: 0;
      overflow: hidden;
      transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
      transform-origin: top center;
      font-size: 14px;
      line-height: 1.5;
    }

.open-details {
      animation-name: openDetails;
      animation-duration: 0.5s;
      animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
      animation-fill-mode: forwards;
    }

@keyframes openDetails {
      0% {
        height: 0;
        opacity: 0;
        transform: scaleY(0);
      }

100% {
        height: auto;
        opacity: 1;
        transform: scaleY(1);
      }
    }

.close-details {
      animation-name: closeDetails;
      animation-duration: 0.5s;
      animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
      animation-fill-mode: forwards;
    }

@keyframes closeDetails {
      0% {
        height: auto;
        opacity: 1;
        transform: scaleY(1);
      }

100% {
        height: 0;
        opacity: 0;
        transform: scaleY(0);
      }
    }

button {
      background-color: #2196f3;
      border: none;
      padding: 6px 10px;
      border-radius: 3px;
      cursor: pointer;
      font-size: 12px;
      font-weight: bold;
      transition: background-color 0.2s ease-in-out;
      color: #fff;
    }

button:hover {
      background-color: #0c7cd5;
    }
  </style>
</body>
</html>