--- a/src/main.ts	Sun Jan 28 17:31:06 2024 -0800
+++ b/src/main.ts	Sun Jan 28 20:02:34 2024 -0800
@@ -75,15 +75,6 @@
       <h1>Light-bridge</h1>
 
       <table>
-        <tr>
-          <th class="col-group-1">light</th>
-          <th class="col-group-1">address</th>
-          <th class="col-group-2">requested color</th>
-          <th class="col-group-2">requested device color</th>
-          <th class="col-group-3">emitting color</th>
-          <th class="col-group-3">online</th>
-          <th class="col-group-3">latency</th>
-        </tr>
         ${this.lights.map(
           (d: Light) => html`
             <tr>
@@ -100,6 +91,7 @@
             </tr>
           `
         )}
+        ${this.renderLightHeaders()} ${this.lights.map(this.renderLightRow.bind(this))}
       </table>
       <p>Updated ${this.reportTime.toLocaleString("sv")}</p>
       <p>
@@ -109,6 +101,18 @@
       <bigast-loginbar></bigast-loginbar>
     `;
   }
+
+  renderLightHeaders() {
+    return html`<tr>
+      <th class="col-group-1">light</th>
+      <th class="col-group-1">address</th>
+      <th class="col-group-2">requested color</th>
+      <th class="col-group-2">requested device color</th>
+      <th class="col-group-3">emitting color</th>
+      <th class="col-group-3">online</th>
+      <th class="col-group-3">latency</th>
+    </tr>`;
+  }
   async onRequestingColor(lightName: string, ev: InputEvent) {
     const currentRequest = this.lightByName.get(lightName)!.requestingColor;
     const value = (ev.target as HTMLInputElement).value;