Dynamic table widths update

[mortenfa]

For the last couple of days (update?) I'm getting "html-table","table","table-condensed"]}]],"widths":["10.5%","NaN%","NaN%","NaN%","10.5%"],"heights":["auto","auto","auto","auto","auto"]

I'm using the cdn: https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js

The returned object:

{"pageSize":"A4","pageMargins":[60,120,40,80],"pageOrientation":"portrait","content":[{"text":"Salærspecifikation for sag vedr. Coop Danmark A/S Regulatorisk rådgivning\r\nVores sagsnummer 1070510\r\nFakturanummer: F413577","margin":[0,0,0,20],"fontSize":9,"bold":true},[{"text":"Notaen omfatter juridisk assistance ydet i februar 2024 i forbindelse med gennemgang og revidering af vilkår for lokalt købekort.","nodeName":"P","margin":[0,5,0,10],"fontSize":9,"style":["html-p"]},{"text":" "},{"nodeName":"TABLE","marginBottom":5,"fontSize":9,"width":"70%","style":["html-table","table","table-condensed"],"table":{"body":[[{"text":"Initialer","nodeName":"TH","fontSize":9,"bold":true,"fillColor":"#EEEEEE","width":"15%","style":["html-th","html-tr","html-thead","html-table","table","table-condensed","active"]},{"text":"Medarbejdernavn","nodeName":"TH","fontSize":9,"bold":true,"fillColor":"#EEEEEE","width":"*","style":["html-th","html-tr","html-thead","html-table","table","table-condensed","active"]},{"text":"Medarbejdertitel","nodeName":"TH","fontSize":9,"bold":true,"fillColor":"#EEEEEE","width":"*","style":["html-th","html-tr","html-thead","html-table","table","table-condensed","active"]},{"text":"Timesats","nodeName":"TH","fontSize":9,"bold":true,"fillColor":"#EEEEEE","width":"*","style":["html-th","html-tr","html-thead","html-table","table","table-condensed","active"]},{"text":"Total tid","nodeName":"TH","fontSize":9,"bold":true,"fillColor":"#EEEEEE","alignment":"right","width":"15%","style":["html-th","html-tr","html-thead","html-table","table","table-condensed","active"]}],[{"text":"AMGU","nodeName":"TD","fontSize":9,"style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"]},{"text":"Anne-Marie Guldbrandsen","nodeName":"TD","fontSize":9,"style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"]},{"text":"Senior Associate, Advokat","nodeName":"TD","fontSize":9,"style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"]},{"text":"3.700,00","nodeName":"TD","fontSize":9,"style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"]},{"text":"2:05","nodeName":"TD","fontSize":9,"alignment":"right","style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"]}],[{"text":"SRA","nodeName":"TD","fontSize":9,"style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"]},{"text":"Stina Toftager Rasmussen","nodeName":"TD","fontSize":9,"style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"]},{"text":"Associate, Advokat","nodeName":"TD","fontSize":9,"style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"]},{"text":"3.650,00","nodeName":"TD","fontSize":9,"style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"]},{"text":"2:00","nodeName":"TD","fontSize":9,"alignment":"right","style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"]}],[{"text":"DSO","nodeName":"TD","fontSize":9,"style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"]},{"text":"Daiga Grunte-Sonne","nodeName":"TD","fontSize":9,"style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"]},{"text":"Director, advokat","nodeName":"TD","fontSize":9,"style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"]},{"text":"3.900,00","nodeName":"TD","fontSize":9,"style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"]},{"text":"0:10","nodeName":"TD","fontSize":9,"alignment":"right","style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"]}],[{"text":"Total","nodeName":"TD","fontSize":9,"style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"],"colSpan":4},{"text":""},{"text":""},{"text":""},{"text":"4:15","nodeName":"TD","fontSize":9,"alignment":"right","style":["html-td","html-tr","html-tbody","html-table","table","table-condensed"]}]],"widths":["10.5%","NaN%","NaN%","NaN%","10.5%"],"heights":["auto","auto","auto","auto","auto"]}}],"","",{"text":"","margin":[0,0,0,20]},"","",""],"defaultStyle":{"font":"Arial"},"styles":{"rightme":{"alignment":"right","margin":[0,2,0,40]},"article":{"margin":[0,2,0,1],"fontSize":9},"articlebottom":{"margin":[0,2,0,40],"fontSize":9},"extratext":{"margin":[0,5,0,1],"fontSize":9},"extratextRight":{"margin":[0,5,0,1],"fontSize":9,"alignment":"right"},"extratextDanskeBank":{"margin":[0,5,0,1],"fontSize":7},"extratextDanskeBankRight":{"margin":[0,5,0,1],"fontSize":7,"alignment":"right"},"extratextHeader":{"margin":[0,0,0,2],"fontSize":9,"bold":true},"extraTableHeader":{"margin":[0,0,0,2],"fontSize":9,"bold":true},"extraTableHeaderRight":{"margin":[0,0,0,2],"fontSize":9,"bold":true,"alignment":"right"},"extraTableHeaderDanskeBank":{"margin":[0,0,0,2],"fontSize":9,"bold":true},"extraTableHeaderDanskeBankRight":{"margin":[0,0,0,2],"fontSize":9,"bold":true,"alignment":"right"},"insertspace":{"margin":[0,30,0,0]},"tableHeader":{"margin":[0,0,0,2],"fontSize":9,"bold":true},"tableHeaderRight":{"margin":[0,0,0,2],"fontSize":9,"bold":true,"alignment":"right"},"tableBody":{"margin":[0,0,0,2],"fontSize":7},"tableBodyRight":{"margin":[0,0,0,2],"fontSize":7,"alignment":"right"},"tableRowRight":{"margin":[0,0,0,2],"alignment":"right"},"footerHeader":{"margin":[0,6,0,0],"fontSize":7,"bold":true}}}

[Aymkdn]

Yes, an update has been made a few days ago about the sizing of tables.

Coud you please provide the HTML code that you pass to this library?

[mortenfa]

Sure. I get the content from tinyMCE. Looks like the wild card character * is removed as an option?

This is not working:

"<table class=\"table table-condensed\" style=\"width: 70%;\">\n<thead>\n<tr class=\"active\">\n<th style=\"width: 15%;\">Initialer</th>\n<th style=\"width: *;\">Medarbejdernavn</th>\n<th style=\"width: *;\">Medarbejdertitel</th>\n<th style=\"width: *;\">Timesats</th>\n<th style=\"text-align: right; width: 15%;\">Total tid</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>MSD</td>\n<td>Martin Spittau Dupont</td>\n<td>IT-forretningskonsulent</td>\n<td>50,00</td>\n<td style=\"text-align: right;\">17:45</td>\n</tr>\n<tr>\n<td>JBS</td>\n<td>Jacob Br&oslash;nnum-Schou</td>\n<td>Head of IT</td>\n<td>50,00</td>\n<td style=\"text-align: right;\">4:00</td>\n</tr>\n<tr>\n<td colspan=\"4\">Total</td>\n<td style=\"text-align: right;\">21:45</td>\n</tr>\n</tbody>\n</table>"

[mortenfa]

And when I parse a table with width: 100% without cell widths, the pdf looks like:

[Aymkdn]

Sure. I get the content from tinyMCE. Looks like the wild card character * is removed as an option?

* is not a valid value for width. I'll investigate to see what to do with that one.

cc @nonam4 who did the last release.

[luicfrr]

@mortenfa try setting tinymce table_sizing_mode to relative. In my case all tables were parsed fine with this setting. You'll need to recreate the table so all cell's widths are correct.

[Aymkdn]

I've just published a new version (v2.5.4) that will replace * with auto for width and height. It seems enough to make it work.

[mortenfa]

Thanks to both of you!

[mortenfa]

@Aymkdn I can confirm that the first problem is solved. But when setting table width to 100% without setting the cell widths, the table is still rendered like this in the pdf:

Code snip: "<table class=\"table table-condensed\" style=\"width: 100%;\">\n<thead>\n<tr>\n<th>Dato</th>\n<th>Navn</th>\n<th>Beskrivelse</th>\n<th>Tid (timer)</th>\n<th>Bel&oslash;b i DKK</th>\n</tr>\n</thead>

[luicfrr]

@mortenfa I noticed that your table html doesn't have colgroup. Have you disabled this option on tinymce init settings?

[Aymkdn]

There was an incorrect variable in the code. I fixed it in v2.5.5

Also, make sure you use the option "tableAutoSize":true:

<table class="table table-condensed" style="width: 100%;"><thead><tr><th>Dato</th><th>Navn</th><th>Beskrivelse</th><th>Tid (timer)</th><th>Bel&oslash;b i DKK</th></tr></thead><tbody><tr><td>MSD</td><td>Martin Spittau Dupont</td><td>IT-forretningskonsulent</td><td>50,00</td><td style="text-align: right;">17:45</td></tr><tr><td>JBS</td><td>Jacob Br&oslash;nnum-Schou</td><td>Head of IT</td><td>50,00</td><td style="text-align: right;">4:00</td></tr><tr><td colspan="4">Total</td><td style="text-align: right;">21:45</td></tr></tbody></table>

Result:

[mortenfa]

Cool, I'll try this. Thanks.

Working now, thanks again