This is probably very obvious to many, so maybe someone can explain it to me.
With lots of help from members of this forum, I have constructed a table for transactional data lines that changes with every line. There is a code on each data line that I use for styling and scripting (col.2-5)
I have a created a table with 7 columns, and a script that removes columns and spans table data across mulitple columns when necessary.
But different pages of data contain different transactions, and the addition of detail lines with more cells/columns is affecting finished transaction lines in strange ways.
Same Section, same table, different data: Note the spacing between the Date column and the Description.
These examples are page 1 and 2 of the account statement, and obviously it looks pretty bad when the spacing of like transactions fluctuates from page to page.
My unfinished script is here. Much thansk to @Erik for getting me started
const code = this.record.Code
if( code === "HDRH") {
let tds = `<td colspan=7><div class="HDRH">${this.record.column3}</div></td>`
this.html(tds)
}
if( code === "SAS") {
let tds = `<td colspan=7><div class="SAS">${this.record.column3}</div></td>`
this.html(tds)
}
if( code === "PLC") {
let tds = `<td colspan=7><div class="PLC">${this.record.column3}</div></td>`
this.html(tds)
}
if( code === "MSG") {
let tds = `<td colspan=7><div class="MSG">${this.record.column3}</div></td>`
this.html(tds)
}
if( code === "CHKH") {
let tds = `<td colspan=7><div class="CHKH">${this.record.column3}</div></td>`
this.html(tds)
}
/*-------------------------------------------------------------------------------------*/
var codes = ["SUMH", "SUMT", "SUM"];
let isSum = codes.indexOf(code) >= 0;
if (isSum) {
let tds = `
<td class="${this.record.Code}" >${this.record.Date}</td>
<td class="${this.record.Code}" colspan=4>${this.record.column3}</td>
<td class="${this.record.Code}" style="text-align:right;">${this.record.column4}</td>
<td class="${this.record.Code}" style="text-align:right;">${this.record.column5}</td>
`
this.html(tds)
}
/*-------------------------------------------------------------------------------------*/
var codes = ["TRNH", "TRNX", "TRN"];
let isTrn = codes.indexOf(code) >= 0;
if (isTrn) {
let tds = `
<td class="${this.record.Code}">${this.record.Date}</td>
<td class="${this.record.Code}" colspan=4>${this.record.column3}</td>
<td class="${this.record.Code}" style="text-align:right;">${this.record.column4}</td>
<td class="${this.record.Code}" style="text-align:right;">${this.record.column5}</td>
`
this.html(tds)
}
/*-------------------------------------------------------------------------------------
var codes = ["CHK"];
let isChk = codes.indexOf(code) >= 0;
if (isChk) {
let tds = `
<td class="${this.record.Code}" style="width: 28%;">${this.record.column3}</td>
<td class="${this.record.Code}" style="width: 5%; text-align:right;">${this.record.column4}</td>
<td class="${this.record.Code}" style="width: 28%;">${this.record.column5}</td>
<td class="${this.record.Code}" style="width: 5%; text-align:right;">${this.record.column6}</td>
<td class="${this.record.Code}" colspan=2 style="width: 28%;">${this.record.column7}</td>
<td class="${this.record.Code}" style="width: 5%; text-align:right;">${this.record.column8}</td>
`
this.html(tds)
}
*/
And the table. It is absolute positioned becasue I cannot have overflow to the next page. Pages are already delimited and there can be no deviation.
<table id="table-lines" data-column-resize="" data-hide-when-empty="" data-detail="" anchor="page_media_0"
style="width: 6.625in; position: absolute; top: 276px; left: 95.0333px; height: 0.1666in; border-color: transparent; border-bottom: 0px none transparent;"
data-expander="2019" offset-x="96" offset-y="420">
<tbody data-ol-hascaret="">
<tr class="line-item" data-repeat="group.values">
<td class="{{{Code}}}" style="width: 10.78%;">{{{Date}}}</td>
<td class="{{{Code}}}" style="width: 14.87%;">{{{column3}}}</td>
<td class="{{{Code}}}" style="width: 14.87%; ">{{{column4}}}</td>
<td class="{{{Code}}}" style="width: 14.87%; ">{{{column5}}}</td>
<td class="{{{Code}}}" style="width: 14.87%; ">{{{column6}}}</td>
<td class="{{{Code}}}" style="width: 14.87%; ">{{{column7}}}</td>
<td class="{{{Code}}}" style="width: 14.88%; ">{{{column8}}}</td>
</tr>
</tbody>
</table>
I assume this discrepency is becasue the table to trying to fit more columns on page 2, because there are some detail lines with more cells than page 1. The Check Summary section will use 6 columns (it is commented out in my script because it causes even more wild fluctuations in spacing).
There are a dozen more transaction types I have not scripted yet, but I wanted some insight before I continue. What can I do to preserve the spacing of the transaction lines from page to page, regardless of how many possible cells could be present on the page?
Please excuse me if this is too much for a foum post. I am hoping there is a simple solution that I just don’t know about yet.
LOL