Replace variant table with responsive grid

public/app.js

@@ -7,8 +7,8 @@ const recordIdElement = document.querySelector("#recordId");
 const loadProductButton = document.querySelector("#loadProductButton");
 const previousProductButton = document.querySelector("#previousProductButton");
 const nextProductButton = document.querySelector("#nextProductButton");
-const tableBody = document.querySelector(".variant-table tbody");
-const variantTable = document.querySelector(".variant-table");
+const tableBody = document.querySelector("#variantRows");
+const variantTable = document.querySelector(".variant-grid");
 const pictureSlot = document.querySelector("#pictureSlot");
 const scanInput = document.querySelector("#scanInput");
 const suggestedModal = document.querySelector("#suggestedModal");
@@ -232,17 +232,19 @@ function renderFields() {
 }
 function renderTableHeader() {
     variantHeader.replaceChildren(...variantColumns.map((column) => {
-        const th = document.createElement("th");
-        th.textContent = column.label;
-        th.dataset.column = column.key;
-        th.style.width = `${column.width}px`;
-        th.style.textAlign = column.align || "";
-        return th;
+        const cell = document.createElement("div");
+        cell.className = "variant-header-cell";
+        cell.setAttribute("role", "columnheader");
+        cell.textContent = column.label;
+        cell.dataset.column = column.key;
+        cell.style.textAlign = column.align || "";
+        return cell;
     }));
 }
 function setTableWidth() {
     const totalWidth = variantColumns.reduce((sum, column) => sum + column.width, 0);
-    variantTable.style.minWidth = `${Math.max(totalWidth, 820)}px`;
+    variantTable.style.setProperty("--variant-min-width", `${Math.max(totalWidth, 820)}px`);
+    variantTable.style.setProperty("--variant-columns", variantColumns.map((column) => `${column.width}px`).join(" "));
 }
 async function loadManufacturers() {
     manufacturerSelect.replaceChildren(createOption("", "Select manufacturer"));
@@ -940,18 +942,22 @@ function renderCombinations(combinations) {
         return;
     }
     tableBody.replaceChildren(...combinations.map((item) => {
-        const row = document.createElement("tr");
+        const row = document.createElement("div");
+        row.className = "variant-row";
+        row.setAttribute("role", "row");
         row.append(...variantColumns.map((column) => {
             const value = item[column.key];
             const text = formatTableValue(value, column);
-            const cell = document.createElement("td");
+            const cell = document.createElement("div");
+            cell.className = "variant-cell";
+            cell.setAttribute("role", "cell");
             cell.textContent = text;
             cell.title = text;
             cell.dataset.column = column.key;
-            cell.style.width = `${column.width}px`;
+            cell.dataset.label = column.label;
             cell.style.textAlign = column.align || "";
             if ((column.problem && item.hasProblem) || (column.key === "eanStatus" && text)) {
-                cell.className = "problem-ean";
+                cell.classList.add("problem-ean");
             }
             return cell;
         }));
@@ -973,10 +979,13 @@ function clearProductState(message) {
     updateNavigationState();
 }
 function setTableMessage(message) {
-    const row = document.createElement("tr");
-    const cell = document.createElement("td");
+    const row = document.createElement("div");
+    row.className = "variant-row variant-message-row";
+    row.setAttribute("role", "row");
+    const cell = document.createElement("div");
     cell.className = "empty-row";
-    cell.colSpan = variantColumns.length;
+    cell.setAttribute("role", "cell");
+    cell.style.gridColumn = "1 / -1";
     cell.textContent = message;
     row.append(cell);
     tableBody.replaceChildren(row);

public/app.ts

@@ -7,8 +7,8 @@ const recordIdElement = document.querySelector("#recordId");
 const loadProductButton = document.querySelector("#loadProductButton");
 const previousProductButton = document.querySelector("#previousProductButton");
 const nextProductButton = document.querySelector("#nextProductButton");
-const tableBody = document.querySelector(".variant-table tbody");
-const variantTable = document.querySelector(".variant-table");
+const tableBody = document.querySelector("#variantRows");
+const variantTable = document.querySelector(".variant-grid");
 const pictureSlot = document.querySelector("#pictureSlot");
 const scanInput = document.querySelector("#scanInput");
 const suggestedModal = document.querySelector("#suggestedModal");
@@ -241,19 +241,24 @@ function renderFields() {
 function renderTableHeader() {
   variantHeader.replaceChildren(
     ...variantColumns.map((column) => {
-      const th = document.createElement("th");
-      th.textContent = column.label;
-      th.dataset.column = column.key;
-      th.style.width = `${column.width}px`;
-      th.style.textAlign = column.align || "";
-      return th;
+      const cell = document.createElement("div");
+      cell.className = "variant-header-cell";
+      cell.setAttribute("role", "columnheader");
+      cell.textContent = column.label;
+      cell.dataset.column = column.key;
+      cell.style.textAlign = column.align || "";
+      return cell;
     }),
   );
 }
 
 function setTableWidth() {
   const totalWidth = variantColumns.reduce((sum, column) => sum + column.width, 0);
-  variantTable.style.minWidth = `${Math.max(totalWidth, 820)}px`;
+  variantTable.style.setProperty("--variant-min-width", `${Math.max(totalWidth, 820)}px`);
+  variantTable.style.setProperty(
+    "--variant-columns",
+    variantColumns.map((column) => `${column.width}px`).join(" "),
+  );
 }
 
 async function loadManufacturers() {
@@ -1029,20 +1034,24 @@ function renderCombinations(combinations) {
 
   tableBody.replaceChildren(
     ...combinations.map((item) => {
-      const row = document.createElement("tr");
+      const row = document.createElement("div");
+      row.className = "variant-row";
+      row.setAttribute("role", "row");
 
       row.append(
         ...variantColumns.map((column) => {
           const value = item[column.key];
           const text = formatTableValue(value, column);
-          const cell = document.createElement("td");
+          const cell = document.createElement("div");
+          cell.className = "variant-cell";
+          cell.setAttribute("role", "cell");
           cell.textContent = text;
           cell.title = text;
           cell.dataset.column = column.key;
-          cell.style.width = `${column.width}px`;
+          cell.dataset.label = column.label;
           cell.style.textAlign = column.align || "";
           if ((column.problem && item.hasProblem) || (column.key === "eanStatus" && text)) {
-            cell.className = "problem-ean";
+            cell.classList.add("problem-ean");
           }
           return cell;
         }),
@@ -1068,10 +1077,13 @@ function clearProductState(message) {
 }
 
 function setTableMessage(message) {
-  const row = document.createElement("tr");
-  const cell = document.createElement("td");
+  const row = document.createElement("div");
+  row.className = "variant-row variant-message-row";
+  row.setAttribute("role", "row");
+  const cell = document.createElement("div");
   cell.className = "empty-row";
-  cell.colSpan = variantColumns.length;
+  cell.setAttribute("role", "cell");
+  cell.style.gridColumn = "1 / -1";
   cell.textContent = message;
   row.append(cell);
   tableBody.replaceChildren(row);

public/index.html

@@ -92,16 +92,12 @@
 
       <section class="data-panel main-workspace" aria-label="Catalog workspace">
         <div class="table-wrap">
-          <table class="variant-table">
-            <thead>
-              <tr id="variantHeader"></tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td class="empty-row" id="emptyTableMessage" colspan="13">Select manufacturer to load data.</td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="variant-grid" role="table" aria-label="Product combinations">
+            <div class="variant-header" id="variantHeader" role="row"></div>
+            <div class="variant-rows" id="variantRows" role="rowgroup">
+              <div class="empty-row" id="emptyTableMessage" role="row">Select manufacturer to load data.</div>
+            </div>
+          </div>
         </div>
       </section>
     </main>