function MainComponent() { const [data, setData] = React.useState([ [ '', '', '', '', '' ], [ '', '', '', '', '' ] ]); const handleChange = (e, rowIndex, colIndex)=>{ const newData = [ ...data ]; newData[rowIndex][colIndex] = e.target.value; setData(newData); }; const addRow = ()=>{ setData([ ...data, [ '', '', '', '', '' ] ]); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "table-auto border-collapse w-full", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, "Item"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, "Amount"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Date"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "Category"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, data.map((row, rowIndex)=>/*#__PURE__*/ React.createElement("tr", { key: rowIndex, __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, row.map((cell, colIndex)=>{ const inputType = colIndex === 2 ? "number" : colIndex === 3 ? "date" : "text"; return /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", key: colIndex, __source: { fileName: "", lineNumber: 35, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: inputType, value: cell, onChange: (e)=>handleChange(e, rowIndex, colIndex), className: "w-full h-full", name: `row${rowIndex}-col${colIndex}`, __source: { fileName: "", lineNumber: 36, columnNumber: 21 }, __self: this })); }))))), /*#__PURE__*/ React.createElement("button", { type: "button", className: "mt-4 p-2 bg-blue-500 text-white font-roboto", onClick: addRow, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "Add Row")); }

Item	Description	Amount	Date	Category

Item	Description	Amount	Date	Category