Merge pull request #1373 from dpc-sdp/feature/table-col-widths

[SD-414] drupal table columns widths
dpc-sdp · Nov 21, 2024 · 28306ca · 28306ca
2 parents 80adc5f + 17bb880
commit 28306ca
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/ripple-tide-api/src/utils/markup-transpiler/cheerio.test.ts b/packages/ripple-tide-api/src/utils/markup-transpiler/cheerio.test.ts
@@ -3,6 +3,7 @@ import markupTranspiler from './index'
 
 const markup = {
   table: `<table>
+  <colgroup><col data-width="40%"><col data-width="60%"></colgroup>
   <tbody>
     <tr><th>Fname</th><th>Lname</th></tr>
     <tr><td>Joe</td><td>Cool</td></tr>
@@ -26,6 +27,7 @@ const markup = {
 
 const fixed = {
   table: `<div class="rpl-table"><div class="rpl-table__scroll-container rpl-u-focusable-outline--visible" tabindex="0"><table>
+  <colgroup><col style="width: 40%"><col style="width: 60%"></colgroup>
   <tbody>
     <tr><th>Fname</th><th>Lname</th></tr>
     <tr><td>Joe</td><td>Cool</td></tr>

diff --git a/packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts b/packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts
@@ -5,6 +5,16 @@ const pluginTables = function (this: any) {
   // Wrap tables with a div.
   this.find('table').map((i: any, el: any) => {
     const $table = this.find(el)
+
+    $table.find('col[data-width]').each((i: any, col: any) => {
+      const $col = this.find(col)
+      const colWidth = $col.attr('data-width')
+
+      if (colWidth) {
+        $col.attr('style', `width: ${colWidth}`).removeAttr('data-width')
+      }
+    })
+
     return $table
       .wrap(`<div class="rpl-table"></div>`)
       .wrap(