React Js Table with Expandable Rows | Exapand Collapse Table

React Js Table with Expandable Rows | Exapand Collapse Table: A Reactjs table with expandable rows allows for a user-friendly interface where rows can be expanded or collapsed to reveal or hide additional information. This functionality enhances the presentation of tabular data by providing a more concise initial view. The expandable rows typically contain detailed data, such as additional columns or nested tables.

By clicking on an expand button or row header, the associated row expands or collapses, dynamically adjusting the table's layout. This feature improves user experience by offering a compact overview while giving users the ability to access additional information when needed.

written

reviewed

updated

How can I implement an expandable table with collapsible rows using ReactJS?

The provided code demonstrates a React.js component that renders an expandable table with rows. It utilizes React hooks, specifically the useState hook, to manage the state of the table's data.

The users state variable represents an array of user objects, each containing properties such as name, email, details, and showDetails.

By clicking on the "Show Details" button, the toggleDetails function is called, which updates the showDetails property of the corresponding user object. The table is dynamically rendered based on the state of each user's showDetails property.

React Js Table with Expandable Rows Example

    <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,
          },
        ]);

        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>

Run

React JS Tutorial

React Js Table with Expandable Rows | Exapand Collapse Table

How can I implement an expandable table with collapsible rows using ReactJS?

React Js Table with Expandable Rows Example

Output of React Expand Collapse Table

React JS Tutorial

React Js Table with Expandable Rows | Exapand Collapse Table

Feedback for Abhishek

How can I implement an expandable table with collapsible rows using ReactJS?

React Js Table with Expandable Rows Example

Output of React Expand Collapse Table