From 6c04ba43c95189a0227a8df3adde0cb164702f75 Mon Sep 17 00:00:00 2001
From: Tran Vo <vobaohoangtran@gmail.com>
Date: Mon, 23 Jun 2025 14:05:11 -0400
Subject: [PATCH 1/2] add rows

---
 src/app.jsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/app.jsx b/src/app.jsx
index 1eebc0c..109ba56 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -12,3 +12,18 @@ const App = () => {
 
 const root = createRoot(document.getElementById("root"));
 root.render(<App />);
+
+//Add Rows to the Grid
+const AddRows = () => {
+  const [rowCount, setRowCount] = useState(0);
+  const handleClick = () => {
+    setRowCount(rowCount + 1);
+  };
+
+  return (
+    <div>
+      <h2>Rows: {rowCount}</h2>
+      <button onClick={handleClick}>Add Row</button>
+    </div>
+  );
+};

From d291aaeaba8d90ed30f0db78a62bf4a71777673d Mon Sep 17 00:00:00 2001
From: Tran Vo <vobaohoangtran@gmail.com>
Date: Mon, 23 Jun 2025 19:20:32 -0400
Subject: [PATCH 2/2] restart

---
 src/app.jsx                  | 44 ++++++++++++++++++++++--------------
 src/components/Table.jsx     | 17 ++++++++++++++
 src/components/TableCell.jsx | 16 +++++++++++++
 src/components/TableRow.jsx  | 15 ++++++++++++
 4 files changed, 75 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Table.jsx
 create mode 100644 src/components/TableCell.jsx
 create mode 100644 src/components/TableRow.jsx

diff --git a/src/app.jsx b/src/app.jsx
index 109ba56..ca46835 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -1,29 +1,39 @@
-import React from "react";
+import React, { useState } from "react";
 import { createRoot } from "react-dom/client";
 import "./style.css";
+import Table from "./components/Table";
 
 const App = () => {
-  return (
-    <div className="app">
-      <h1 className="title">Hello World</h1>
-    </div>
-  );
-};
+  const [grid, setGrid] = useState([[""]]);
 
-const root = createRoot(document.getElementById("root"));
-root.render(<App />);
+  const addRow = () => {
+    const newRow = new Array(grid[0].length).fill("");
+    setGrid([...grid, newRow]);
+  };
+
+  const addColumn = () => {
+    const newGrid = grid.map(row => [...row, ""]);
+    setGrid(newGrid);
+  };
 
-//Add Rows to the Grid
-const AddRows = () => {
-  const [rowCount, setRowCount] = useState(0);
-  const handleClick = () => {
-    setRowCount(rowCount + 1);
+  const removeRow = () => {
+    if (grid.length > 1) {
+      setGrid(grid.slice(0, -1));
+    }
   };
 
   return (
-    <div>
-      <h2>Rows: {rowCount}</h2>
-      <button onClick={handleClick}>Add Row</button>
+    <div className="app">
+      <h1>Interactive Grid</h1>
+      <div className="btns">
+        <button onClick={addRow}>Add Row</button>
+        <button onClick={addColumn}>Add Column</button>
+        <button onClick={removeRow}>Remove Row</button>
+      </div>
+      <Table grid={grid} />
     </div>
   );
 };
+
+const root = createRoot(document.getElementById("root"));
+root.render(<App />);
\ No newline at end of file
diff --git a/src/components/Table.jsx b/src/components/Table.jsx
new file mode 100644
index 0000000..32adb0e
--- /dev/null
+++ b/src/components/Table.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import TableRow from "./TableRow";
+
+const Table = ({ grid }) => {
+  return (
+    <table>
+      <tbody>
+        {grid.map((row, i) => (
+          <TableRow key={i} row={row} />
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default Table;
+
diff --git a/src/components/TableCell.jsx b/src/components/TableCell.jsx
new file mode 100644
index 0000000..54d7999
--- /dev/null
+++ b/src/components/TableCell.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+const TableCell = () => {
+  return (
+    <td
+      style={{
+        width: "30px",
+        height: "30px",
+        border: "1px solid black",
+      }}
+    ></td>
+  );
+};
+
+export default TableCell;
+
diff --git a/src/components/TableRow.jsx b/src/components/TableRow.jsx
new file mode 100644
index 0000000..4f2b936
--- /dev/null
+++ b/src/components/TableRow.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import TableCell from "./TableCell";
+
+const TableRow = ({ row }) => {
+  return (
+    <tr>
+      {row.map((_, i) => (
+        <TableCell key={i} />
+      ))}
+    </tr>
+  );
+};
+
+export default TableRow;
+