I can now list the contents of a table and display a form for one row to update/delete, but haven't implemented update and delete.

public/admin/table/index.html

@@ -24,14 +24,14 @@
   </header>
 
   <script>
-  let Tables = new GetJson("/api/admin/table/")
-  console.log("Tables", Tables)
+  let Rows = new GetJson("/api/admin/table/")
+  console.log("Rows", Rows)
 </script>
 
 <blockstart>
-<h1>Admin Tables</h1>
+<h1>Admin Rows</h1>
 
-<block x-data="Tables">
+<block x-data="Rows">
   <ul>
     <template x-for="item in theData">
     <li><a x-bind:href="'/admin/table/' + item + '/'">

public/js/code.js

@@ -3,6 +3,7 @@ class GetJson {
   constructor(url) {
     this.url = url;
     this.items = [];
+    this.item = undefined;
   }
 
   async theData() {
@@ -11,5 +12,10 @@ class GetJson {
     this.items = await resp.json();
     return this.items;
   }
-}
 
+  async oneThing() {
+    this.item = await this.theData();
+    console.log("ITEMS", this.items);
+    return this.item;
+  }
+}

views/admin/table/contents.html

@@ -7,14 +7,24 @@
 <h1>Admin Tables</h1>
 
 <block x-data="Tables">
-  <ul>
+  <table>
     <template x-for="item in theData">
-      <table>
-        <td><a x-bind:href="'/admin/table/{{ .Table }}/' + item.id + '/'" x-text="item.id"></td>
-        <td x-text="item.Email"></td>
-      </table>
+        <tr>
+          <td>
+            <a x-bind:href="'/admin/table/{{ .Table }}/' + item.id + '/'">
+              ^
+            </a>
+          </td>
+          <template x-for="(value, key) in item">
+            <td x-text="value"></td>
+          </template>
+        </tr>
     </template>
-  </ul>
+  </table>
+  <block class="horizontal">
+    <a href="/admin/table/{{.Table}}/?page=2">Prev</a>
+    <a href="/admin/table/{{.Table}}/?page=2">Next</a>
+  </block>
 </block>
 
 </blockstart>

views/admin/table/view.html

@@ -1,15 +1,31 @@
 <script>
-  let Data = new GetJson("/api/admin/table/{{ .Table }}/{{ .Id }}/")
-  console.log("Data", Data)
+  let Data = new GetJson("/api/admin/table/{{ .Table }}/{{ .Id }}/");
 </script>
 
 <blockstart>
 <h1>Admin Tables</h1>
 
-<block x-data="Data">
-  <ul>
-    <h1 x-text="item.id"></h1>
-  </ul>
+<block x-init="item = await Data.oneThing()" x-data="{item: {}}">
+    <form method="POST" action="/api/admin/table/{{ .Table }}/{{ .Id }}/">
+      <card>
+      <top><h1>{{ .Table }} : {{ .Id }}</h1></top>
+      <middle>
+        <template x-for="(value, key) in item">
+          <div>
+            <label x-text="key" x-bind:for="key"></label>
+            <input x-text="value" x-bind:value="value" x-bind:id="key" />
+          </div>
+        </template>
+      </middle>
+      <bottom>
+        <button-group>
+          <button type="button">Back</button>
+          <button type="submit">Update</button>
+          <button type="button">Delete</button>
+        </button-group>
+      </bottom>
+      </card>
+    </form>
 </block>
 
 </blockstart>