Header ${c + 1}
Cell ${r * columns + c}

`; const textarea = document.createElement('textarea'); textarea.value = html; document.body.appendChild(textarea); textarea.select(); document.execCommand('copy'); document.body.removeChild(textarea); setCopied(true); setTimeout(()=>setCopied(false), 2000); }; const renderTableRows = (nRows, nColumns)=>{ let tableRows = []; for(let r = 0; r < nRows; r++){ let rowCells = []; for(let c = 0; c < nColumns; c++){ rowCells.push(/*#__PURE__*/ React.createElement("td", { key: `cell-${r}-${c}`, className: "border p-2", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Cell ", r * nColumns + (c + 1))); } tableRows.push(/*#__PURE__*/ React.createElement("tr", { key: `row-${r}`, __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, rowCells)); } return tableRows; }; const renderTableColumns = (nColumns)=>{ let columns = []; for(let c = 0; c < nColumns; c++){ columns.push(/*#__PURE__*/ React.createElement("th", { key: `header-${c}`, className: "border p-2", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "Header ", c + 1)); } return columns; }; const tableColumns = renderTableColumns(columns); const tableRows = renderTableRows(rows, columns); const tableClasses = `min-w-full ${tableStyle === 'striped' ? 'striped' : ''}`; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col lg:flex-row bg-white min-h-screen", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-full lg:w-1/4 bg-gray-800 text-white p-6", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-6", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "Preferences"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "rows", className: "block text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Rows"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "rows", name: "rows", min: "1", className: "w-full p-3 rounded bg-white text-gray-700", value: rows, onChange: handleRowsChange, __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "columns", className: "block text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Columns"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "columns", name: "columns", min: "1", className: "w-full p-3 rounded bg-white text-gray-700", onChange: handleColumnsChange, value: columns, __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "tableStyle", className: "block text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "Table Style"), /*#__PURE__*/ React.createElement("select", { id: "tableStyle", name: "tableStyle", className: "w-full p-3 rounded bg-white text-gray-700", value: tableStyle, onChange: handleTableStyleChange, __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "striped", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, "Striped"), /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "None")))), /*#__PURE__*/ React.createElement("section", { className: "flex-1 p-6", __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl mb-4 text-gray-800", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, "Table Preview"), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto rounded shadow", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: tableClasses, __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, tableColumns)), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }, tableRows)))), /*#__PURE__*/ React.createElement("button", { className: "mt-6 px-6 py-3 bg-blue-600 text-white rounded hover:bg-blue-800 font-roboto font-medium", onClick: copyToClipboard, __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, copied ? 'Table Code Copied!' : 'Copy Table Code')), tableStyle === 'striped' && /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 145, columnNumber: 9 }, __self: this }, ` .striped tbody tr:nth-child(odd) { background-color: #f8f8f8; } `)); }