diff --git a/src/app.jsx b/src/app.jsx
index 1eebc0c..ca46835 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -1,14 +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 = () => {
+ const [grid, setGrid] = useState([[""]]);
+
+ const addRow = () => {
+ const newRow = new Array(grid[0].length).fill("");
+ setGrid([...grid, newRow]);
+ };
+
+ const addColumn = () => {
+ const newGrid = grid.map(row => [...row, ""]);
+ setGrid(newGrid);
+ };
+
+ const removeRow = () => {
+ if (grid.length > 1) {
+ setGrid(grid.slice(0, -1));
+ }
+ };
+
return (
-
Hello World
+
Interactive Grid
+
+
+
+
+
+
);
};
const root = createRoot(document.getElementById("root"));
-root.render();
+root.render();
\ 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 (
+
+
+ {grid.map((row, i) => (
+
+ ))}
+
+
+ );
+};
+
+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 (
+ |
+ );
+};
+
+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 (
+
+ {row.map((_, i) => (
+
+ ))}
+
+ );
+};
+
+export default TableRow;
+