Percorrer um for para preencher uma table no pdfMake

Estou construindo um pdf de uma venda. Estou realizando testes com dados fictícios para validação do layout do documento. Porém o layout está “estourando” ao percorrer o for.

O meu código é esse:

createPdf() {
var column = [];
column.push({ text: 'Qtd.'});
column.push({ text: 'Produto/Serviço'});
column.push({ text: 'Valor unitário'});
column.push({ text: 'SubTotal'});

var value = [];
for(let i = 0; i < this.teste.length; i++){
  value.push({text: this.teste[i].qtd, style: 'tableHeader'});
  value.push({text: this.teste[i].nome, style: 'tableHeader'});
  value.push({text: this.teste[i].preco, style: 'tableHeader'});
  value.push({text: this.teste[i].total, style: 'tableHeader'});
}
/*value.push({ text: '01', style: 'tableHeader' });
value.push({ text: 'Calça masculina', style: 'tableHeader' });
value.push({ text: '150,00', style: 'tableHeader' });
value.push({ text: '150,00', alignment: 'right' });*/

var docDefinition = {
  content: [

    { text: '01/01/2019', fontSize: 12, alignment: 'left' },
    { text: 'Venda', fontSize: 12, alignment: 'right', margin: [0, -12, 0, 0] },
    { text: '_______________________________________________________________________________________________' },
    { text: 'Nome do cliente', fontSize: 12, alignment: 'left', margin: [0, 12, 0, 0] },
    { text: '092.786.449-51', fontSize: 12, alignment: 'right', margin: [0, -14, 0, 0] },
    { text: '_______________________________________________________________________________________________' },

    {
      margin: [0, 15, 0, 0],
      table: {
        widths: ['10%', '*', '20%', '20%'],
        headerRows: 1,
        body: [
          [column], [value]
        ]
      }
    },

    { text: 'Valor Total: 150,00', alignment: 'right', margin: [0, 10, 5, 0] },

    { text: '_______________________________________________________________________________________________' },
    { text: 'Condição de pagamento' },
    { text: 'Forma de pagamento: Cartão 2x', alignment: 'left', margin: [0, 15, 0, 0] },
    { text: '_______________________________________________________________________________________________' },
    { text: 'Observações: Testando o impresso', alignment: 'left', margin: [0, 10, 0, 0]},
  ], 

  footer: {
    columns: [
      { text: 'Empresa Modelo - 092.786.449-51', alignment: 'center' },
    ]
  },
};

this.pdfObj = pdfMake.createPdf(docDefinition);
}

O resultado que estou obtendo é este da imagem, eu preciso que as colunas e linhas sejam preenchidas dinamicamente, conforme o for é percorrido. O meu cabeçalho da tabela será estático, mas as informações sempre serão dinâmicas, já que ele irá percorrer um array de itens da venda:

O que eu espero obter é: