KAW-7695 Add table block

blocks/table/table.css

@@ -0,0 +1,31 @@
+.table .table-element {
+  border-collapse: collapse;
+}
+
+.table td {
+  padding: 8px;
+  border-top: 1px solid #ddd;
+  vertical-align: top;
+}
+
+.table tr:first-of-type td {
+  border-top: none;
+}
+
+.table td p {
+  margin: 0;
+}
+
+.table tr:nth-child(2n) td {
+  background-color: #fff;
+  color: #111;
+}
+
+.table tr:nth-child(2n + 1) td {
+  background-color: #f9f9f9;
+  color: #111;
+}
+
+.table tr:hover td {
+  background-color: #f3f3f3;
+}

blocks/table/table.js

@@ -0,0 +1,24 @@
+export default async function decorate(block) {
+  const rows = block.querySelectorAll(':scope > div');
+  const table = document.createElement('table');
+  const tBody = document.createElement('tbody');
+
+  table.classList.add('table-element');
+
+  rows.forEach((row) => {
+    const rowEl = document.createElement('tr');
+
+    row.querySelectorAll(':scope > div').forEach((cell) => {
+      const cellEl = document.createElement('td');
+
+      cellEl.append(...cell.children);
+      rowEl.append(cellEl);
+    });
+
+    tBody.append(rowEl);
+  });
+
+  block.innerHTML = '';
+  table.append(tBody);
+  block.append(table);
+}