React Js Delete Multiple Rows Data Using Checkbox

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script>
  </head>

<body>
    <div id="app"></div>
    <script type="text/babel">
      const { useState, useEffect } = React;

function App() {
        const [selectedRows, setSelectedRows] = useState([]);
        const [data, setData] = useState([
          { id: 1, name: "John Doe", email: "john@example.com" },
          { id: 2, name: "Jane Smith", email: "jane@example.com" },
          { id: 3, name: "Bob Johnson", email: "bob@example.com" },
          { id: 4, name: "Alice Williams", email: "alice@example.com" },
          { id: 5, name: "Michael Brown", email: "michael@example.com" },
          { id: 6, name: "Sarah Davis", email: "sarah@example.com" },
          { id: 7, name: "David Anderson", email: "david@example.com" },
          { id: 8, name: "Emily Wilson", email: "emily@example.com" },
          { id: 9, name: "Daniel Taylor", email: "daniel@example.com" },
          { id: 10, name: "Olivia Martinez", email: "olivia@example.com" },
          { id: 11, name: "Matthew Thomas", email: "matthew@example.com" },
          { id: 12, name: "Sophia Hernandez", email: "sophia@example.com" },
          { id: 13, name: "James Lee", email: "james@example.com" },
          { id: 14, name: "Ava Harris", email: "ava@example.com" },
          { id: 15, name: "William Clark", email: "william@example.com" },
          { id: 16, name: "Isabella Lewis", email: "isabella@example.com" },
          { id: 17, name: "Benjamin Young", email: "benjamin@example.com" },
          { id: 18, name: "Mia Walker", email: "mia@example.com" },
          { id: 19, name: "Ethan Hall", email: "ethan@example.com" },
          { id: 20, name: "Charlotte Turner", email: "charlotte@example.com" },
          { id: 21, name: "Alexander Baker", email: "alexander@example.com" },
          { id: 22, name: "Amelia Green", email: "amelia@example.com" },
          { id: 23, name: "Daniel Hill", email: "daniel@example.com" },
          { id: 24, name: "Elizabeth Adams", email: "elizabeth@example.com" },
          { id: 25, name: "Joseph Nelson", email: "joseph@example.com" },
          { id: 26, name: "Grace Ramirez", email: "grace@example.com" },
          { id: 27, name: "Henry Cook", email: "henry@example.com" },
          { id: 28, name: "Victoria Price", email: "victoria@example.com" },
          { id: 29, name: "Samuel Rivera", email: "samuel@example.com" },
          { id: 30, name: "Lily Ward", email: "lily@example.com" },
        ]);

const handleDeleteRows = () => {
          const newData = data.filter((row) => !selectedRows.includes(row.id));
          setData(newData);
          setSelectedRows([]);
        };

return (
          <div className="container">
            <h3>React Js Delete Multiple Rows data Using Checkbox</h3>
            <button className="delete-button" onClick={handleDeleteRows}>
              Delete Selected Rows
            </button>
            <table className="data-table">
              <thead>
                <tr>
                  <th className="select-header">Select</th>
                  <th className="id-header">ID</th>
                  <th className="name-header">Name</th>
                  <th className="email-header">Email</th>
                </tr>
              </thead>
              <tbody>
                {data.map((row) => (
                  <tr key={row.id} className="data-row">
                    <td>
                      <input
                        type="checkbox"
                        checked={selectedRows.includes(row.id)}
                        onChange={() => handleRowSelection(row.id, row.email)}
                      />
                    </td>
                    <td className="id-cell">{row.id}</td>
                    <td className="name-cell">{row.name}</td>
                    <td className="email-cell">{row.email}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        );
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>

.delete-button:hover {
        background-color: #c0392b;
      }

.data-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
      }

.select-header,
      .id-header,
      .name-header,
      .email-header {
        background-color: #f1f1f1;
        padding: 10px;
        text-align: left;
      }

.data-row:nth-child(even) {
        background-color: #f9f9f9;
      }

.data-row:hover {
        background-color: #f2f2f2;
      }

.id-cell,
      .name-cell,
      .email-cell {
        padding: 10px;
      }

.id-cell,
      .email-cell {
        text-align: center;
      }
    </style>
  </body>
</html>

 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script>
  </head>
​
  <body>
    <div id="app"></div>
    <script type="text/babel">
      const { useState, useEffect } = React;
​
      function App() {
        const [selectedRows, setSelectedRows] = useState([]);
        const [data, setData] = useState([
          { id: 1, name: "John Doe", email: "john@example.com" },
          { id: 2, name: "Jane Smith", email: "jane@example.com" },
          { id: 3, name: "Bob Johnson", email: "bob@example.com" },
          { id: 4, name: "Alice Williams", email: "alice@example.com" },
          { id: 5, name: "Michael Brown", email: "michael@example.com" },
          { id: 6, name: "Sarah Davis", email: "sarah@example.com" },
          { id: 7, name: "David Anderson", email: "david@example.com" },
          { id: 8, name: "Emily Wilson", email: "emily@example.com" },
          { id: 9, name: "Daniel Taylor", email: "daniel@example.com" },
          { id: 10, name: "Olivia Martinez", email: "olivia@example.com" },
          { id: 11, name: "Matthew Thomas", email: "matthew@example.com" },
          { id: 12, name: "Sophia Hernandez", email: "sophia@example.com" },
          { id: 13, name: "James Lee", email: "james@example.com" },
          { id: 14, name: "Ava Harris", email: "ava@example.com" },
          { id: 15, name: "William Clark", email: "william@example.com" },
          { id: 16, name: "Isabella Lewis", email: "isabella@example.com" },
          { id: 17, name: "Benjamin Young", email: "benjamin@example.com" },
          { id: 18, name: "Mia Walker", email: "mia@example.com" },
          { id: 19, name: "Ethan Hall", email: "ethan@example.com" },
          { id: 20, name: "Charlotte Turner", email: "charlotte@example.com" },
          { id: 21, name: "Alexander Baker", email: "alexander@example.com" },
          { id: 22, name: "Amelia Green", email: "amelia@example.com" },
          { id: 23, name: "Daniel Hill", email: "daniel@example.com" },
          { id: 24, name: "Elizabeth Adams", email: "elizabeth@example.com" },
          { id: 25, name: "Joseph Nelson", email: "joseph@example.com" },
          { id: 26, name: "Grace Ramirez", email: "grace@example.com" },
          { id: 27, name: "Henry Cook", email: "henry@example.com" },
          { id: 28, name: "Victoria Price", email: "victoria@example.com" },
          { id: 29, name: "Samuel Rivera", email: "samuel@example.com" },
          { id: 30, name: "Lily Ward", email: "lily@example.com" },
        ]);
​
        const handleRowSelection = (rowId, email) => {
          if (selectedRows.includes(rowId)) {
            setSelectedRows(selectedRows.filter((id) => id !== rowId));
          } else {
            setSelectedRows([...selectedRows, rowId]);
          }
          const newData = data.map((row) => {
            if (row.id === rowId) {
              return { ...row, email };
            }
            return row;
          });
          setData(newData);
        };
​
        const handleDeleteRows = () => {
          const newData = data.filter((row) => !selectedRows.includes(row.id));
          setData(newData);
          setSelectedRows([]);
        };
​
        return (
          <div className="container">
            <h3>React Js Delete Multiple Rows data Using Checkbox</h3>
            <button className="delete-button" onClick={handleDeleteRows}>
              Delete Selected Rows
            </button>
            <table className="data-table">
              <thead>
                <tr>
                  <th className="select-header">Select</th>
                  <th className="id-header">ID</th>
                  <th className="name-header">Name</th>
                  <th className="email-header">Email</th>
                </tr>
              </thead>
              <tbody>
                {data.map((row) => (
                  <tr key={row.id} className="data-row">
                    <td>
                      <input
                        type="checkbox"
                        checked={selectedRows.includes(row.id)}
                        onChange={() => handleRowSelection(row.id, row.email)}
                      />
                    </td>
                    <td className="id-cell">{row.id}</td>
                    <td className="name-cell">{row.name}</td>
                    <td className="email-cell">{row.email}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        );
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
​
    <style>
      .container {
        max-width: 500px;
        margin: 0 auto;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .delete-button {
        background-color: #e74c3c;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
​
      .delete-button:hover {
        background-color: #c0392b;
      }
​
      .data-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
      }
​
      .select-header,
      .id-header,
      .name-header,
      .email-header {
        background-color: #f1f1f1;
        padding: 10px;
        text-align: left;
      }
​
      .data-row:nth-child(even) {
        background-color: #f9f9f9;
      }
​
      .data-row:hover {
        background-color: #f2f2f2;
      }
​
      .id-cell,
      .name-cell,
      .email-cell {
        padding: 10px;
      }
​
      .id-cell,
      .email-cell {
        text-align: center;
      }
    </style>
  </body>
</html>
​