Tables

fetchTableData(table)}\n className={selectedTable === table ? \"active\" : \"\"}\n >\n {table}\n \n ))}\n

SQLite Dashboard

\n {error &&

{error}

}\n {selectedTable && (\n

{selectedTable}

\n setShowDeleteConfirm(true)}\n >\n Delete Table\n \n

\n {showDeleteConfirm && (\n

Are you sure you want to delete the table \"{selectedTable}\"? This action cannot be undone.

\n \n Yes, Delete Table\n \n setShowDeleteConfirm(false)}\n >\n Cancel\n \n

\n )}\n \n \n \n {tableSchema.map(col => (\n \n ))}\n \n \n \n \n {tableData.map((row, index) => (\n \n {tableSchema.map(col => (\n \n ))}\n \n \n ))}\n \n {tableSchema.map(col => (\n \n ))}\n \n \n \n

\n {col.name} ({col.type})\n	Actions
\n {editingRow === index\n ? (\n handleInputChange(index, col.name, e.target.value)}\n />\n )\n : (\n row[col.name]\n )}\n	\n {editingRow === index\n ? \n : }\n
\n handleNewRowInputChange(col.name, e.target.value)}\n placeholder={`New ${col.name}`}\n />\n	\n \n

\n )}\n

\n View Source\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const url = new URL(request.url);\n\n if (url.pathname === \"/tables\") {\n const result = await sqlite.execute(\"SELECT name FROM sqlite_master WHERE type='table'\");\n return new Response(JSON.stringify(result.rows.map(row => row.name)), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (url.pathname.startsWith(\"/table/\")) {\n const tableName = url.pathname.split(\"/\").pop();\n\n if (request.method === \"DELETE\") {\n try {\n await sqlite.execute(`DROP TABLE ${tableName}`);\n return new Response(\"Table deleted successfully\", { status: 200 });\n } catch (err) {\n return new Response(`Failed to delete table: ${err.message}`, { status: 500 });\n }\n }\n\n if (request.method === \"GET\") {\n const result = await sqlite.execute(`SELECT rowid, * FROM ${tableName}`);\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n if (url.pathname.startsWith(\"/schema/\")) {\n const tableName = url.pathname.split(\"/\").pop();\n const result = await sqlite.execute(`PRAGMA table_info(${tableName})`);\n return new Response(JSON.stringify(result.rows.map(row => ({ name: row.name, type: row.type }))), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (url.pathname.startsWith(\"/update/\")) {\n if (request.method !== \"POST\") {\n return new Response(\"Method Not Allowed\", { status: 405 });\n }\n const tableName = url.pathname.split(\"/\").pop();\n const data = await request.json();\n const columns = Object.keys(data).filter(col => col !== \"rowid\");\n const values = columns.map(col => data[col]);\n const setClause = columns.map(col => `${col} = ?`).join(\", \");\n\n let query;\n let queryParams;\n\n if (\"rowid\" in data) {\n query = `UPDATE ${tableName} SET ${setClause} WHERE rowid = ?`;\n queryParams = [...values, data.rowid];\n } else {\n const whereClause = columns.map(col => `${col} = ?`).join(\" AND \");\n query = `UPDATE ${tableName} SET ${setClause} WHERE ${whereClause}`;\n queryParams = [...values, ...values];\n }\n\n await sqlite.execute(query, queryParams);\n return new Response(\"Updated successfully\", { status: 200 });\n }\n\n if (url.pathname.startsWith(\"/insert/\")) {\n if (request.method !== \"POST\") {\n return new Response(\"Method Not Allowed\", { status: 405 });\n }\n const tableName = url.pathname.split(\"/\").pop();\n const data = await request.json();\n const columns = Object.keys(data).filter(col => col !== \"rowid\");\n const values = columns.map(col => data[col]);\n const placeholders = columns.map(() => \"?\").join(\", \");\n\n const query = `INSERT INTO ${tableName} (${columns.join(\", \")}) VALUES (${placeholders})`;\n\n await sqlite.execute(query, values);\n return new Response(\"Inserted successfully\", { status: 200 });\n }\n\n const css = `\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f0f0f0;\n }\n .container {\n display: flex;\n height: 100vh;\n }\n .sidebar {\n width: 200px;\n background-color: #333;\n color: white;\n padding: 20px;\n overflow-y: auto;\n }\n .sidebar h2 {\n margin-top: 0;\n }\n .sidebar ul {\n list-style-type: none;\n padding: 0;\n }\n .sidebar li {\n cursor: pointer;\n padding: 10px;\n margin-bottom: 5px;\n border-radius: 3px;\n }\n .sidebar li:hover {\n background-color: #444;\n }\n .sidebar li.active {\n background-color: #555;\n }\n .main-content {\n flex-grow: 1;\n padding: 20px;\n overflow-y: auto;\n }\n h1, h2 {\n color: #333;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n margin-top: 20px;\n }\n th, td {\n border: 1px solid #ddd;\n padding: 8px;\n text-align: left;\n }\n th {\n background-color: #f2f2f2;\n }\n .column-type {\n font-size: 0.8em;\n color: #666;\n }\n .error {\n color: red;\n margin-bottom: 10px;\n }\n .source-link {\n margin-top: 20px;\n text-align: right;\n }\n .source-link a {\n color: #666;\n text-decoration: none;\n }\n .source-link a:hover {\n text-decoration: underline;\n }\n button {\n background-color: #4CAF50;\n border: none;\n color: white;\n padding: 5px 10px;\n text-align: center;\n text-decoration: none;\n display: inline-block;\n font-size: 12px;\n margin: 2px 2px;\n cursor: pointer;\n }\n input {\n width: 100%;\n padding: 5px;\n box-sizing: border-box;\n }\n .table-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n \n .delete-table-btn {\n background-color: #dc3545;\n color: white;\n padding: 8px 16px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n }\n \n .delete-table-btn:hover {\n background-color: #c82333;\n }\n \n .delete-confirm {\n background-color: #fff3f3;\n border: 1px solid #ffcdd2;\n border-radius: 4px;\n padding: 16px;\n margin: 16px 0;\n }\n \n .delete-actions {\n display: flex;\n gap: 12px;\n margin-top: 12px;\n }\n \n .confirm-delete-btn {\n background-color: #dc3545;\n }\n \n .confirm-delete-btn:hover {\n background-color: #c82333;\n }\n \n .cancel-delete-btn {\n background-color: #6c757d;\n }\n \n .cancel-delete-btn:hover {\n background-color: #5a6268;\n }\n `;\n\n return new Response(\n `\n \n \n SQLite Dashboard\n \n \n \n

\n \n \n `,\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n}\n\nexport default server;",["D",1738473967211],"version",20,"currentUserHasLiked","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_96":97,"_101":102},"forkedVal",{"_94":154,"_96":155,"_127":128,"_143":156,"_157":-5},"2dd83fe2-7049-11ef-bc19-de64eea55b61","stevekrouse",10,"prDisabledHint","interval","description","Simple SQLite dashboard made by townie in this video: https://x.com/stevekrouse/status/1833577807093371325","latestEvaluation","slug","alpaca1712/sqliteAdminDashboard","versions",[166,170,174,178,182,186,190,194,198,202],{"_98":167,"_143":144,"_168":169},["D",1738473967211],"n","1",{"_98":171,"_143":172,"_168":173},["D",1738473657861],19,"2",{"_98":175,"_143":176,"_168":177},["D",1738473425589],18,"3",{"_98":179,"_143":180,"_168":181},["D",1738473262063],17,"4",{"_98":183,"_143":184,"_168":185},["D",1738473204217],16,"5",{"_98":187,"_143":188,"_168":189},["D",1738473194478],15,"6",{"_98":191,"_143":192,"_168":193},["D",1738473119517],14,"7",{"_98":195,"_143":196,"_168":197},["D",1738473084345],13,"8",{"_98":199,"_143":200,"_168":201},["D",1738472891195],12,"9",{"_98":203,"_143":204,"_168":205},["D",1738472844891],11,"10","hasNext","routes/_app","actionData","errors"]