TABLE with CAPTION or COLGROUP render empty headers

[dprothero]

This issue was originally reported here but it seems that repo has been archived, and the code now lives here.

Tables such as

<table>
  <caption>My table</caption>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
  </tr>
</table>

or

<table>
  <colgroup>
    <col style="" />
    <col style="" />
  </colgroup>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
  </tr>
</table>

Render an empty header, such as

|     |     |
| --- | --- |My table
| Firstname | Lastname |
| Jill | Smith |

COLGROUP should be ignored, CAPTION should be displayed before the table. Expected output should be:

My table
| Firstname | Lastname |
| --- | --- |
| Jill | Smith |

[Sukriti-sood]

I would like to work on this.

[laurent22]

What are the steps to replicate this? HTML doesn't render to Markdown, that doesn't make sense.

[maxpatiiuk]

Steps to replicate this:

// initialize turndownService with gfm plugin and default settings
const turndownService = new TurndownService();
turndownService.use(gfm);

// Convert table with caption to markdown
const output = turndownService.turndown(`<table>
            <caption>Developer Time (in hours)</caption>
            <tbody><tr>
                <th>Developer</th>
                <th>From Scratch</th>
                <th>Carbon</th>
            </tr>
              <tr>
                <th>Developer One</th>
                <td>4.2 hours from scratch</td>
                <td>1.1 hours using Carbon</td>
              </tr>
            </tbody></table>`)

result:

|     |     |     |
| --- | --- | --- |Developer Time (in hours)
| Developer | From Scratch | Carbon |
| Developer One | 4.2 hours from scratch | 1.1 hours using Carbon |

some websites with tables that result in broken markdown:

• www.lesswrong.com/posts/Xi6syQenk24nQTzgz/2016-lesswrong-diaspora-survey-analysis-part-three-mental
• en.wikipedia.org/wiki/Afro-Asians
• www.theverge.com/c/23753704/ai-chatgpt-data-survey-research
• en.wikipedia.org/wiki/Comparative_advantage
• en.wikipedia.org/wiki/Dematerialization_(economics)
• sparkbox.com/foundry/design_system_roi_impact_of_design_systems_business_value_carbon_design_system
• karlgroves.com/how-long-until-your-website-is-accessible
• blog.pope.tech/2023/08/31/how-to-make-charts-and-graphs-more-accessible
• en.wikipedia.org/wiki/ISO_8601
• engineering.fb.com/2022/11/21/production-engineering/precision-time-protocol-at-meta
• en.wikipedia.org/wiki/Roko's_basilisk
• en.wikipedia.org/wiki/Rosé_(singer)

[maxpatiiuk]

As a combined workaround for this bug and #9885, you can add this code right after turndownService.use(gfm);:

const tableRule = turndownService.rules.array[2];
if (!tableRule.filter.toString().includes('TABLE'))
  throw new Error('Incorrect rule selected. Expected to find table rule');
tableRule.filter = ['table'];
if(tableRule.replacement?.toString().toLowerCase().includes('caption'))
  throw new Error('Turndown received caption support - this workaround should be removed');
const originalReplacement = tableRule.replacement;
tableRule.replacement = (content, node, ...rest) => {
  const caption = (node as HTMLTableElement).caption?.textContent || '';
  const table = originalReplacement?.(content, node, ...rest) ?? '';
  return caption === '' ? table : `${caption}\n\n${table.trimStart()}`;
};

turndownService.addRule('caption', {
  filter: ['caption', 'colgroup', 'col'],
  replacement: () => '',
});