Repository navigation
Add support for rounded corners on table borders. #1634
Description
Feature Request
🧩 Use Case
When generating PDFs with tables, we often want to improve the aesthetics by applying rounded corners to just the outer border of the table — for example, applying a radius to:
Top-left and top-right corners of the table header
Bottom-left and bottom-right corners of the table footer or last row
Or the entire table if it’s wrapped in a border
📌 Current Workaround
Right now, we work around this by:
Drawing a roundedRect manually around the table
Then manually drawing all the internal horizontal and vertical lines
Carefully avoiding overlapping the outer rounded corners with rect or lineTo calls
While this works, it’s tedious and error-prone, especially for dynamic tables with variable rows and columns.
Feature description
Example of a hacky solution to execute on the PDFKit Browser Demo
// create a document and pipe to a blob
var doc = new PDFDocument();
var stream = doc.pipe(blobStream());
// ========== Clean Table with Rounded Outer Border Only ==========
const table = {
headers: ['Name', 'Age'],
rows: [
['Alice', 30],
['Bob', 25],
]
};
const startX = 100;
let startY = 420;
const rowHeight = 30;
const colWidths = [200, 100];
const radius = 8;
const totalWidth = colWidths.reduce((a, b) => a + b, 0);
const totalHeight = rowHeight * (1 + table.rows.length); // header + rows
// Draw outer rounded border only
doc
.roundedRect(startX, startY, totalWidth, totalHeight, radius)
.stroke();
// Draw horizontal lines (rows)
for (let i = 1; i < table.rows.length + 1; i++) {
const y = startY + i * rowHeight;
doc.moveTo(startX, y).lineTo(startX + totalWidth, y).stroke();
}
// Draw vertical lines (columns)
let colX = startX;
for (let i = 0; i < colWidths.length - 1; i++) {
colX += colWidths[i];
doc.moveTo(colX, startY).lineTo(colX, startY + totalHeight).stroke();
}
// Add text
let textY = startY + 10;
// Header
let textX = startX;
table.headers.forEach((header, i) => {
doc.text(header, textX + 5, textY);
textX += colWidths[i];
});
// Rows
startY += rowHeight;
table.rows.forEach((row) => {
textX = startX;
row.forEach((cell, i) => {
doc.text(cell.toString(), textX + 5, startY + 10);
textX += colWidths[i];
});
startY += rowHeight;
});
// end and display the document in the iframe to the right
doc.end();
stream.on('finish', function() {
iframe.src = stream.toBlobURL('application/pdf');
});
`
<!-- You have examples or an idea how it can be implemented? -->
Activity