Back
Version 3
9/10/2024
// This val creates a SQLite dashboard admin panel with a sidebar for table names
// It uses React for the frontend and the Val Town SQLite API for database operations
// Now includes functionality to edit rows, using rowid or all columns as identifiers
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function App() {
const [tables, setTables] = useState([]);
const [selectedTable, setSelectedTable] = useState(null);
const [tableData, setTableData] = useState([]);
const [error, setError] = useState(null);
const [editingRow, setEditingRow] = useState(null);
useEffect(() => {
fetchTables();
}, []);
const fetchTables = async () => {
try {
const response = await fetch('/tables');
const data = await response.json();
setTables(data);
} catch (err) {
setError("Failed to fetch tables");
}
};
const fetchTableData = async (tableName) => {
try {
const response = await fetch(`/table/${tableName}`);
const data = await response.json();
setTableData(data);
setSelectedTable(tableName);
} catch (err) {
stevekrouse-sqliteadmindashboard.web.val.run
Updated: September 11, 2024