Pptxgenjs: Table-to-Slides default for un-styled tables is black text on black bkgd

[orpitadutta]

I implemented table to slides but each time a black band appears. Can you please help? Or assist me where am i going wrong?

Presentation (1).pptx

Name	Test	Company

<input type="button" value="Export to PPTX"
       onclick="{ var pptx = new PptxGenJS(); pptx.addSlidesForTable('mytable'); pptx.save(); }">

[gitbrent]

Hi @orpitadutta ,

Could you please attach a screencap instead and provide the code you're using?

Thanks.

[orpitadutta]

<table id="mytable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Test</th>
            <th>Company</th>
        </tr>
    </thead>
</table>
<input type="button" value="Export to PPTX"
       onclick="{ var pptx = new PptxGenJS(); pptx.addSlidesForTable('mytable'); pptx.save(); }">

[alagarrk]

Hi @orpitadutta ,

I think, you need to apply some styles for the table. Currently table - background color is black & also text color is black. So you are seeing black box. @gitbrent Please correct me if i am wrong.

Ex:

Name	Test	Company

@orpitadutta Please try it

[orpitadutta]

@alagarrk Thanks a lot, It worked but i am unable to change the background of table. Can u please help?

[orpitadutta]

I tried this:

Name	Test	Company

<input type="button" value="Export to PPTX" onclick="fnppt()">

[alagarrk]

@orpitadutta , For addSlidesForTable() - Reproduces an HTML table - background colors, borders, fonts, padding, etc.

So you can add styles using css. For Ex:

mytable {

    background: #f2f2f2;
    border: 1px solid black;
    color: black;
}

#mytable th,
#mytable tr {
    background: #f2f2f2;
}

Please check this

[orpitadutta]

@alagarrk Thnxx a lot it worked like a charm..

[gitbrent]

Hi @orpitadutta @alagarrk ,

Thanks for your help on this Issue.

Turns out that the default color returned by jQuery is black, so in un-styled tables, you end up with black text on a black background...

I've updated the code to detect this condition and default to a white background instead.