feat: createTable handles colspans (#33)

adobe · Nov 17, 2022 · 06c48cf · 06c48cf
1 parent bf2d3a7
commit 06c48cf
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/src/utils/DOMUtils.js b/src/utils/DOMUtils.js
@@ -168,9 +168,11 @@ export default class DOMUtils {
   static createTable(data, document) {
     const table = document.createElement('table');
 
+    let maxColumns = 0;
     data.forEach((row, index) => {
       const tr = document.createElement('tr');
 
+      maxColumns = Math.max(maxColumns, row.length);
       row.forEach((cell) => {
         const t = document.createElement(index === 0 ? 'th' : 'td');
         if (typeof cell === 'string') {
@@ -187,6 +189,15 @@ export default class DOMUtils {
       table.appendChild(tr);
     });
 
+    // adjust the colspans
+    table.querySelectorAll('tr').forEach((tr) => {
+      const cells = Array.from(tr.querySelectorAll('td, th'));
+      if (cells.length < maxColumns) {
+        const lastCell = cells[cells.length - 1];
+        lastCell.setAttribute('colspan', maxColumns - cells.length + 1);
+      }
+    });
+
     return table;
   }
 

diff --git a/test/utils/Blocks.spec.js b/test/utils/Blocks.spec.js
@@ -82,7 +82,7 @@ describe('Blocks#convertBlocksToTables tests', () => {
       `<main>${div}${div}${div}
         <div>
           <table>
-            <tr><th>Another Block</th></tr>
+            <tr><th colspan="2">Another Block</th></tr>
             <tr><td>cell11</td><td>cell12</td></tr>
             <tr><td>cell21</td><td>cell22</td></tr>
             <tr><td><img src="https://www.sample.com/image.jpeg"></td><td><a href="https://www.sample.com/">A link</a></td></tr>
@@ -103,7 +103,7 @@ describe('Blocks#convertBlocksToTables tests', () => {
       `<main>${div}${div}${div}
         <div>
           <table>
-            <tr><th>Promotion</th></tr>
+            <tr><th colspan="2">Promotion</th></tr>
             <tr>
               <td><a href="https://blog.adobe.com/en/promotions/doc-cloud-education.html">https://blog.adobe.com/en/promotions/doc-cloud-education.html</a></td>
               <td><span>with content</span></td>

diff --git a/test/utils/DOMUtils.spec.js b/test/utils/DOMUtils.spec.js
@@ -297,10 +297,28 @@ describe('DOM#createTable tests', () => {
       [['header1', 'header2'], ['cell11', 'cell12'], ['cell21', 'cell22']],
       '<table><tr><th>header1</th><th>header2</th></tr><tr><td>cell11</td><td>cell12</td></tr><tr><td>cell21</td><td>cell22</td></tr></table>',
     );
-    // TODO deal with colspan ?
+  });
+
+  it('createTable - handles colspans', () => {
     test(
       [['header1'], ['cell11', 'cell12'], ['cell21', 'cell22']],
-      '<table><tr><th>header1</th></tr><tr><td>cell11</td><td>cell12</td></tr><tr><td>cell21</td><td>cell22</td></tr></table>',
+      '<table><tr><th colspan="2">header1</th></tr><tr><td>cell11</td><td>cell12</td></tr><tr><td>cell21</td><td>cell22</td></tr></table>',
+    );
+
+    test(
+      [['header1'], ['cell11', 'cell12', 'cell13', 'cell14']],
+      '<table><tr><th colspan="4">header1</th></tr><tr><td>cell11</td><td>cell12</td><td>cell13</td><td>cell14</td></tr></table>',
+    );
+
+    test(
+      [['header1', 'header2'], ['cell11', 'cell12', 'cell13', 'cell14']],
+      '<table><tr><th>header1</th><th colspan="3">header2</th></tr><tr><td>cell11</td><td>cell12</td><td>cell13</td><td>cell14</td></tr></table>',
+    );
+
+    // messy table
+    test(
+      [['header1', 'header2'], ['cell11', 'cell12', 'cell13', 'cell14'], ['cell22'], ['cell31', 'cell32', 'cell33']],
+      '<table><tr><th>header1</th><th colspan="3">header2</th></tr><tr><td>cell11</td><td>cell12</td><td>cell13</td><td>cell14</td></tr><tr><td colspan="4">cell22</td></tr><tr><td>cell31</td><td>cell32</td><td colspan="2">cell33</td></tr></table>',
     );
   });
 
@@ -318,8 +336,8 @@ describe('DOM#createTable tests', () => {
       '<table><tr><th>header</th></tr><tr><td><img src="https://www.sample.com/image.jpeg"></td></tr></table>',
     );
     test(
-      [['header'], [img, a, 'some text']],
-      '<table><tr><th>header</th></tr><tr><td><img src="https://www.sample.com/image.jpeg"></td><td><a href="https://www.sample.com/"></a></td><td>some text</td></tr></table>',
+      [['header1', 'header2', 'header3'], [img, a, 'some text']],
+      '<table><tr><th>header1</th><th>header2</th><th>header3</th></tr><tr><td><img src="https://www.sample.com/image.jpeg"></td><td><a href="https://www.sample.com/"></a></td><td>some text</td></tr></table>',
     );
     test(
       [['header'], [[img, a, 'some text']]],