Description
const createPaginatedTables = (
headers: string[],
rows: any[][],
colors: typeof TEMPLATE_COLORS.crux,
pageTitle: string,
tableIndex: number,
): {tables: Table[]; continuationTitles: Paragraph[]} => {
const tables: Table[] = [];
const continuationTitles: Paragraph[] = [];
// Page width calculations
const pageWidth = convertInchesToTwip(8.5);
const margins = convertInchesToTwip(1);
const availableWidth = pageWidth - margins * 2;
// Set equal column width
const columnWidth = Math.floor(availableWidth / headers.length);
for (let i = 0; i < rows.length; i += MAX_RECORDS_PER_PAGE) {
const chunk = rows.slice(i, i + MAX_RECORDS_PER_PAGE);
if (i > 0) {
continuationTitles.push(
new Paragraph({
text: `${pageTitle} - Table ${tableIndex + 1} (Continued)`,
heading: HeadingLevel.HEADING_2,
style: 'Heading2',
spacing: {before: 400, after: 200},
}),
);
}
const tableRows: TableRow[] = [];
// Header Row
tableRows.push(
new TableRow({
tableHeader: true,
cantSplit: true,
height: {value: 500, rule: HeightRule.EXACT},
children: headers.map(
(header) =>
new TableCell({
children: [
new Paragraph({
text: header,
style: 'TableHeader',
alignment: AlignmentType.CENTER,
spacing: {before: 100, after: 100},
}),
],
shading: {
fill: `#${colors.tableHeader}`,
type: ShadingType.CLEAR,
},
width: {size: columnWidth, type: WidthType.DXA},
}),
),
}),
);
// Data Rows
chunk.forEach((row, rowIndex) => {
tableRows.push(
new TableRow({
cantSplit: true,
height: {value: 400, rule: HeightRule.AUTO},
children: row.map(
(cell) =>
new TableCell({
children: [
new Paragraph({
text: cell?.toString() || 'N/A',
style: 'TableCell',
alignment: AlignmentType.LEFT,
spacing: {before: 50, after: 50},
}),
],
shading: {
fill:
rowIndex % 2 === 0
? '#FFFFFF'
: `#${colors.tableAlternate}`,
type: ShadingType.CLEAR,
},
width: {size: columnWidth, type: WidthType.DXA},
}),
),
}),
);
});
tables.push(
new Table({
width: {size: 100, type: WidthType.PERCENTAGE},
rows: tableRows,
layout: TableLayoutType.FIXED,
borders: {
top: {size: 5, color: '000000', space: 0, style: BorderStyle.SINGLE},
bottom: {
size: 5,
color: '000000',
space: 0,
style: BorderStyle.SINGLE,
},
left: {size: 5, color: '000000', space: 0, style: BorderStyle.SINGLE},
right: {
size: 5,
color: '000000',
space: 0,
style: BorderStyle.SINGLE,
},
insideHorizontal: {
size: 5,
color: '000000',
space: 0,
style: BorderStyle.SINGLE,
},
insideVertical: {
size: 5,
color: '000000',
space: 0,
style: BorderStyle.SINGLE,
},
},
}),
);
}
return {tables, continuationTitles};
};
Can you please help me to fix this issue it's working fine in Microsoft word or online docx viewer but when i try to open it in mac and google docx there is table columns not showing correctly and there is no any width set on table columns can you help me how can i fix it ?