Search code examples
typescriptjspdf-autotable

In jspdf-Autotable how to align content of footer columns the same as in data columns?


I am trying to create PDF table using jspdf-Autotable. The table has some columns and rows and has 4 footer rows. 1 row for SUMS, 2nd row for AVERAGES, 3rd for MIN, 4th for MAX values of the data above in given numeric columns.

I want the numeric values aligned right and naturally the results of the sums/calculations in the footers also right.

I know how to align the data in the data columns - using the code here, but cannot figure out how to align the data in the columns of the 4 footer rows.

  body: data,
  columnStyles: {[key: string]: Partial<Styles>} = {
                          0: {halign: 'right' },
                          3: {halign: 'justify'},
                          5: {halign: 'center' },
                          8: {halign: 'left' },
                        },
  foot: footData,
                       // THIS IS WHAT I'D BE HOPING FOR TO ALIGN MY FOOTERS
                       // THE SAME AS MY DATA COLUMNS, BUT THERE IS NO SUCH PROPERTY
  footerColumnStyles: {[key: string]: Partial<Styles>} = {
                          0: {halign: 'right' },
                          3: {halign: 'justify'},
                          5: {halign: 'center' },
                          8: {halign: 'left' },
                        },

  

Solution

  • I figured this out, Here is a rough snippet of it for those looking for the same.

    body: data,
    foot: footData,
    . . .,
    didParseCell: (data) => {
      data.table.foot.forEach((footRow) => {
        myColumnFormats.forEach((colFormat,i) => {
          if (colFormat.isNumeric) {
             footRow.cells[i].styles.halign = 'right';
          }
        })
      }) ;
    },
    ...