Skip to content

Table columns width are not working in case of when I opened docx file on mac and google docs #3015

Open
@ankushcloudanalogy

Description

@ankushcloudanalogy

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 ?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions