React Js Table with Expandable Rows | Exapand Collapse Table

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      const { useState } = React;

function App() {
        const [users, setUsers] = useState([
          {
            name: "Emily Johnson",
            email: "emily@example.com",
            details: "Emily Johnson is a software engineer from Canada",
            showDetails: false,
          },
          {
            name: "Michael Brown",
            email: "michael@example.com",
            details: "Michael Brown is a data analyst from Australia",
            showDetails: false,
          },
          {
            name: "Jessica Lee",
            email: "jessica@example.com",
            details: "Jessica Lee is a UX designer from South Korea",
            showDetails: false,
          },
          {
            name: "Daniel Davis",
            email: "daniel@example.com",
            details: "Daniel Davis is a front-end developer from Germany",
            showDetails: false,
          },
          {
            name: "Sophia Wilson",
            email: "sophia@example.com",
            details: "Sophia Wilson is a project manager from France",
            showDetails: false,
          },
          {
            name: "Alexander Martinez",
            email: "alexander@example.com",
            details: "Alexander Martinez is a software architect from Spain",
            showDetails: false,
          },
          {
            name: "Olivia Thompson",
            email: "olivia@example.com",
            details: "Olivia Thompson is a UI designer from Italy",
            showDetails: false,
          },
          {
            name: "William Garcia",
            email: "william@example.com",
            details: "William Garcia is a data scientist from Brazil",
            showDetails: false,
          },
          {
            name: "Ava Rodriguez",
            email: "ava@example.com",
            details: "Ava Rodriguez is a full-stack developer from Mexico",
            showDetails: false,
          },
          {
            name: "Liam Martinez",
            email: "liam@example.com",
            details: "Liam Martinez is a software engineer from Argentina",
            showDetails: false,
          },
          {
            name: "Isabella Harris",
            email: "isabella@example.com",
            details: "Isabella Harris is a web developer from Sweden",
            showDetails: false,
          },
          {
            name: "Mason Clark",
            email: "mason@example.com",
            details: "Mason Clark is a graphic designer from Norway",
            showDetails: false,
          },
          {
            name: "Mia White",
            email: "mia@example.com",
            details: "Mia White is a front-end developer from Denmark",
            showDetails: false,
          },
          {
            name: "Lucas Rodriguez",
            email: "lucas@example.com",
            details: "Lucas Rodriguez is a software engineer from Portugal",
            showDetails: false,
          },
          {
            name: "Harper Wright",
            email: "harper@example.com",
            details: "Harper Wright is a UX designer from Switzerland",
            showDetails: false,
          },
        ]);

const toggleDetails = (index) => {
          setUsers((prevState) => {
            const updatedUsers = [...prevState];
            updatedUsers[index].showDetails = !updatedUsers[index].showDetails;
            return updatedUsers;
          });
        };

return (
          <div className="container">
            <h2 className="title">React Expand Collapse Table</h2>
            <table className="table">
              <thead>
                <tr>
                  <th className="table-header">Name</th>
                  <th className="table-header">Email</th>
                  <th className="table-header">Details</th>
                </tr>
              </thead>
              <tbody>
                {users.map((user, index) => (
                  <React.Fragment key={index}>
                    <tr className="table-row">
                      <td className="table-cell">{user.name}</td>
                      <td className="table-cell">{user.email}</td>
                      <td className="table-cell">
                        <button
                          className="details-button"
                          onClick={() => toggleDetails(index)}
                        >
                          {user.showDetails ? "Hide Details" : "Show Details"}
                        </button>
                      </td>
                    </tr>
                    {user.showDetails && (
                      <tr className="details-row">
                        <td colSpan="3" className="open-details">
                          {user.details}
                        </td>
                      </tr>
                    )}
                  </React.Fragment>
                ))}
              </tbody>
            </table>
          </div>
        );
      }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>

display: flex;
        flex-direction: column;
        align-items: center;
      }

.title {
        text-align: center;
        margin-bottom: 20px;
      }

.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;
      }

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>