function MainComponent() { const [data, setData] = React.useState([ [ '', '', '', '', '' ], [ '', '', '', '', '' ], [ '', '', '', '', '' ], [ '', '', '', '', '' ], [ '', '', '', '', '' ] ]); const handleCellChange = (rowIndex, colIndex, value)=>{ const newData = [ ...data ]; newData[rowIndex][colIndex] = value; setData(newData); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-sans", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Excel-like Application"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "table-auto border-collapse", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border border-gray-400 px-4 py-2", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }), [ 'A', 'B', 'C', 'D', 'E' ].map((col)=>/*#__PURE__*/ React.createElement("th", { key: col, className: "border border-gray-400 px-4 py-2", __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }, col)))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, data.map((row, rowIndex)=>/*#__PURE__*/ React.createElement("tr", { key: rowIndex, __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border border-gray-400 px-4 py-2 font-bold", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, rowIndex + 1), row.map((cell, colIndex)=>/*#__PURE__*/ React.createElement("td", { key: colIndex, className: "border border-gray-400 p-0", __source: { fileName: "", lineNumber: 34, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full h-full px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500", value: cell, onChange: (e)=>handleCellChange(rowIndex, colIndex, e.target.value), name: `cell-${rowIndex}-${colIndex}`, __source: { fileName: "", lineNumber: 35, columnNumber: 21 }, __self: this }))))))))); }