Render bottom border on overflown table

[snajib]

I'm trying to find a way to render the bottom line on an overflown table. Accessing the node inside the hLineWidth function doesn't seem to provide any valuable information due to the nature of how the table information is populated. Is there a way to do so or metadata that indicates the pageBreak in time to render? I've spent quite a while going through data to find any indication, but have not found any.

Mentioning #1228

Code example executable in playground:

var dd = {
	content: [
		{text: 'Example header', margin: [0, 20, 0, 8]},
		{
			style: 'tableExample',
			table: {
				headerRows: 1,
				body: [
					[{text: 'Header 1', style: 'tableHeader'}, {text: 'Header 2', style: 'tableHeader'}, {text: 'Header 3', style: 'tableHeader'}],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					['Sample value 1', 'Sample value 2', 'Sample value 3'],
					
				]
			},
			layout: {
				hLineWidth: function (i, node) {
					return (i === 0 || i === node.table.body.length) ? 2 : 0;
				},
				vLineWidth: function (i, node) {
					return (i === 0 || i === node.table.widths.length) ? 2 : 1;
				},
				hLineColor: function (i, node) {
					return (i === 0 || i === node.table.body.length) ? 'black' : 'gray';
				},
				vLineColor: function (i, node) {
					return (i === 0 || i === node.table.widths.length) ? 'black' : 'gray';
				},
			}
		},
	],
	styles: {
		header: {
			fontSize: 18,
			bold: true,
			margin: [0, 0, 0, 10]
		},
		subheader: {
			fontSize: 16,
			bold: true,
			margin: [0, 10, 0, 5]
		},
		tableExample: {
			margin: [0, 5, 0, 15]
		},
		tableHeader: {
			bold: true,
			fontSize: 13,
			color: 'black'
		}
	},
}

[snajib]

With no relevant information exposed to the consumer, I patched the library locally to provide the info needed to render the line. Not sure if this is viable for every usecase, but it works well for me.

In tableProcessor.js (TableProcessor.prototype.beginRow)

	let availableHeight = writer.context().availableHeight;

	let estimatedRowHeight = this.estimateRowHeight(rowIndex);
  
	let totalRowHeight = this.rowPaddingTop + estimatedRowHeight + 
						this.rowPaddingBottom + this.bottomLineWidth;
	

	if (totalRowHeight > availableHeight) {
		if (!this.tableNode._pageBreakRows) {
		  this.tableNode._pageBreakRows = [];
		}

		if (rowIndex > 0) {
			this.tableNode._pageBreakRows.push(rowIndex);
			this.drawHorizontalLine(rowIndex, writer, writer.context().y - 1);

			let lineWidth = this.layout.hLineWidth(rowIndex, this.tableNode);
			writer.context().moveDown(availableHeight - lineWidth)
		  }
	  }

In tableProcessor.js (new method TableProcessor.prototype.estimateRowHeight)

TableProcessor.prototype.estimateRowHeight = function(rowIndex) {
	const row = this.tableNode.table.body[rowIndex];
	if (!row || row.length === 0) return 0;
	
	let maxCellHeight = 0;
	
	for (let i = 0; i < row.length; i++) {
	  const cell = row[i];
	  let cellHeight = 0;
	  
	  if (cell._inlines && cell._inlines.length > 0) {
		let inlineHeight = 0;
		let totalTextHeight = 0;
		let lineCount = 0;
		
		cell._inlines.forEach(inline => {
		  if (inline.height) {
			inlineHeight = Math.max(inlineHeight, inline.height);
		  }
		  
		  if (inline.font) {
			const fontSize = inline.fontSize;
			// The following logic is to convert values to pts
			const ascender = inline.font.ascender / 1000 * fontSize;
			const descender = Math.abs(inline.font.descender) / 1000 * fontSize;
			const lineGap = inline.font.lineGap / 1000 * fontSize;
			
			const oneLineHeight = ascender + descender + lineGap;
			
			if (inline._textRef && inline._textRef.lineIndex !== undefined) {
			  if (lineCount <= inline._textRef.lineIndex) {
				totalTextHeight += oneLineHeight;
				lineCount = inline._textRef.lineIndex + 1;
			  }
			} else {
			  if (inline._minWidth && inline.text) {
				const colWidth = this.tableNode.table.widths[i]._calcWidth;
				const numLines = Math.ceil(inline._minWidth / colWidth);
				totalTextHeight += oneLineHeight * numLines;
			  } else {
				totalTextHeight += oneLineHeight;
			  }
			}
		  }
		});
		
		cellHeight = Math.max(inlineHeight, totalTextHeight);
	  } 
	  
	  const padding = cell.padding !== undefined ? cell.padding : 
					 (this.layout.paddingTop && this.layout.paddingBottom ? 
					  this.layout.paddingTop(rowIndex, this.tableNode) + 
					  this.layout.paddingBottom(rowIndex, this.tableNode) : 0);
	  
	  cellHeight += padding;
	  
	  maxCellHeight = Math.max(maxCellHeight, cellHeight);
	}
	
	return maxCellHeight;
  };

Now, finally consuming these changes in the document definition. I created a helper method for my case, and used it in the hLineWidth function

export const shouldDrawHorizontalLine = (i, node) => {
    // Always show top border of table (first row)
    if (i === 0) {
        return true;
    }

    // Always show bottom border of table (after last row)
    if (i === node.table.body.length) {
        return true;
    }

    // Render page break rows
    if (node._pageBreakRows && node._pageBreakRows.includes(i)) {
        return true;
    }
    return false;
};

...

hLineWidth: function (i, node) {
    return shouldDrawHorizontalLine(i, node) ? 2 : 0;
},