Table header row text not populating

[MeesterZee]

I am using PDFMake to generate two tables side by side in a PDF. The first table renders correctly and shows the text in its header row. The second table in the right column shows the header row but does not place the header text in the header row cells.

Reproducible example:

function writeTables() {
    const tableHeaders = [
        { text: 'Last Name', style: 'tableHeader' },
        { text: 'First Name', style: 'tableHeader' },
        { text: 'Grade', style: 'tableHeader' },
        { text: 'Class', style: 'tableHeader' }
    ];

    const leftTableBody = [
        tableHeaders,
        ['Doe', 'John', '5', 'A']
    ];

    const rightTableBody = [
        tableHeaders,
        ['Smith', 'Jane', '6', 'B']
    ];

    const columns = [
        {
            width: '50%',
            table: {
                headerRows: 1,
                widths: ['*', '*', 40, 40],
                body: leftTableBody
            }
        },
        {
            width: '50%',
            table: {
                headerRows: 1,
                widths: ['*', '*', 40, 40],
                body: rightTableBody
            }
        }
    ];

    const docDefinition = {
        pageSize: 'LETTER',
        pageOrientation: 'portrait',
        pageMargins: [40, 40, 40, 40], // Standard margins
        content: [
            { columns: columns, columnGap: 10 }
        ],
        styles: {
            tableHeader: { fontSize: 12, bold: true, fillColor: 'gray' },
            tableCell: { fontSize: 12 }
        }
    };

    pdfMake.createPdf(docDefinition).download('TableTest.pdf');
  }