Merge pull request #57 from hlxsites/feature/table-bugs

Fixed the table issues
hlxsites · Oct 27, 2023 · 4ed9609 · 4ed9609
2 parents 692061f + 337c188
commit 4ed9609
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/blocks/table/table.css b/blocks/table/table.css
@@ -11,10 +11,10 @@ table td {
 }
 
 .heading-top tr:first-child td {
-    background-color: var(--primary-color); /* Specify your desired background color here */
+    background-color: var(--primary-color);
 }
 
-.heading-left tr td:first-child {
+.left-heading {
     background-color: var(--primary-color);
     text-align: left;
 }

diff --git a/blocks/table/table.js b/blocks/table/table.js
@@ -7,6 +7,23 @@ function removeClassesFromChildTables(table) {
 }
 
 export default function decorate(block) {
+  const getHeadingLeftClass = block.classList.contains('heading-left');
+  if (getHeadingLeftClass !== null && getHeadingLeftClass !== undefined) {
+    const tds = block.querySelectorAll('tr td:first-child');
+    let index = 0;
+    while (index < tds.length) {
+      const td = tds[index];
+      td.classList.add('left-heading');
+      const rowspan = td.getAttribute('rowspan');
+      if (rowspan !== null && rowspan > 1) {
+        const rowspanCount = parseInt(rowspan, 10);
+        index += rowspanCount;
+      } else {
+        index += 1;
+      }
+    }
+  }
+
   const tableRows = block.querySelectorAll('.table[data-block-name="table"] tr');
   tableRows.forEach((row) => {
     const cells = row.querySelectorAll('td');