How can we make a tabular view for the list of the ordered products? about escposencoder

[NielsLeenheer]

What I've been doing is similar to @mariapaulinar. Set a maximum number of characters for a line and do the formatting yourself. Determine the length of the left string, and the right string and calculate the number of spaces you must insert between them.

It works. But having a table feature would definitely be easier. If I can find some time, I'll look into adding more advanced layout methods.

[NielsLeenheer]

The next version of EscPosEncoder will support tables with a syntax similar to this:

    let result = encoder
        .table(
            [
                { width: 36, marginRight: 2, align: 'left' },
                { width: 10, align: 'right' }
            ], 
            [
                [ 'Item 1', '€ 10,00' ],
                [ 'Item 2', '15,00' ],
                [ 'Item 3', '9,95' ],
                [ 'Item 4', '4,75' ],
                [ 'Item 5', '211,05' ],
                [ '', '='.repeat(10) ],
                [ 'Total', (encoder) => encoder.bold().text('€ 250,75').bold() ],
            ]
        )	
        .encode()

[mariapaulinar]

Maybe this code can help you (It was made with Angular):

    const encoder = new EscPosEncoder();
    let result = encoder
      .codepage('cp852')
      .newline()
      .newline()
      .align('center')
      .line('Recibo de caja')
      .bold(true)
      .line('FACTURA     SALDO        PAGO')
      .bold(false);
    const maxChar = 11;
    for (const item of resp.facturas) {
      const cantFactura = (item.numeroFactura.toString().length <= maxChar) ? maxChar - item.numeroFactura.toString().length : 0;
      const cantSaldo = (formatNumber(item.saldo, 'en-US').length <= maxChar) ? maxChar - formatNumber(item.saldo, 'en-US').length : 0;
      const cantPago = (formatNumber(item.valorConsignar, 'en-US').length <= maxChar) ? maxChar - formatNumber(item.valorConsignar, 'en-US').length : 0;
      const line = item.numeroFactura + ' '.repeat(cantFactura) + ' $' + formatNumber(item.saldo, 'en-US') + ' '.repeat(cantSaldo) + ' $' + formatNumber(item.valorConsignar, 'en-US') + ' '.repeat(cantPago);
      result = result.line(line);
    }
    result = result
      .line('-------------------------------')
      .line('TOTAL PAGADO ' + resp.totalPagado)
      .newline()
      .newline()
      .line('Formas Pago')
      .line('-------------------------------');
    for (const item of resp.formasPago) {
      result = result.line(item.tipo + '   $' + item.valor);
    }
    result = result
      .line('-------------------------------')
      .line('TOTAL PAGADO ' + resp.totalPagado)
      .newline()
      .newline()
      .newline()
      .encode();

[marquipaul]

Hi, @mariapaulinar your code example was very helpful. Thank you

Yes, it will be easier. Thank you for this package very helpful. @NielsLeenheer

[JJ-Alcuran]

Hi @NielsLeenheer.
I used this .table( ... ) syntax and it is not working.
Do you have a demo

This my code using Ionic Angular but an error says .table( ) is not a function.
I think I did a wrong way. Please help me with a working example

const encoder = new EscPosEncoder();
const result = encoder.initialize();

result
  .align('center')
  .newline()
  .line('Transaction Receipt')
  .bold(false)
  .align('left')
  .line('Transaction Number: ' + this.generatedNumber)
  .line('Transaction Date: ' + this.dateTime)
  .newline()
  .newline()
  .line('-------------------------------')
  .table(
    [
        { width: 36, marginRight: 2, align: 'left' },
        { width: 10, align: 'right' }
    ], 
    [
        [ 'Item 1', '50' ],
        [ 'Item 2', '60' ],
        [ 'Item 3', '10' ],
        [ 'Item 4', '40' ],
        [ 'Item 5', '60' ],
        [ 'Total', '220' ],
    ]
  )	
  .newline()
  .newline()
  .newline()
  .encode();