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; +