最后几行带有 colspan 的 jspdf Autotable

Question

This is actually 3 column table, I need last three rows should be two columns, that means colspan 2 , How can we use the colspan for some rows ? This is the table structure and the code

--------------------------------
| Si     |  item     |  Amount |
--------------------------------
|  1     | Keyboard  |  10 $   |
|  2     | Mouse     |  5  $   |
--------------------------------


this.cols.push({si:"1",itm:"keyboard",amt:"10"})
this.cols.push({si:"2",itm:"Mouse",amt:"5"})
var columns = [
                {title: "Si.", dataKey: "si"},
                {title: "Item", dataKey: "itm"},
                {title: "Amount", dataKey: "amt"},

            ]
var a = doc.autoTable(columns, this.cols, {
                theme: 'striped',
                styles: {
                    lineWidth: 0.2,
                    lineColor: 0,
                    fontSize:8
                },
                headerStyles: {
                    fillColor: 230,
                    textColor:0,
                    fontStyle:'normal', 
                     halign: 'center'           

                },
                margin: {top: 92},
                columnStyles:{
                    value_usd: {halign: 'right'},
                    value_aed: {halign: 'right'}
                }
            });

The result expected:

--------------------------------
| Si     |  item     |  Amount |
--------------------------------
|  1     | Keyboard  |  10 $   |
|  2     | Mouse     |  5  $   |
--------------------------------
| Total              |  15 $   |
--------------------------------
| VAT                |  5%     |
--------------------------------
| Grand Sum          |  15.75  |

Answer 1

Try something like this.

let body = bodyRows(5);
for (var i = 0; i < body.length; i++) {
    var row = body[i];
    if (i >= body.length - 3) {
        row[i]['si'] = {
            colspan: 2,
            content: body[i]['item'],
            styles: {
                valign: 'middle',
                halign: 'center'
            }
        };
    }
}

let head = headRows();

doc.autoTable({
    startY: 60,
    head: head, //head is the header that you have created
    body: body,
    theme: 'striped'
});
return doc;

var data = [{
    'item': 'keyboard',
    'amt': '10'
}, {
    'item': 'keyboard',
    'amt': '5'
}, {
    'item': 'Total',
    'amt': '15'
}, {
    'item': 'VAT',
    'amt': '5'
}, {
    'item': 'Grand Sum',
    'amt': '15.75'
}];

function headRows() {return [{si: 'SI', item: 'item', amt: 'Amount'}];}

function bodyRows(rowCount) {
    rowCount = rowCount || 10;
    let body = [];
    for (var j = 1; j <= rowCount; j++) {
        if (j <= rowCount - 3) {,
            body.push({
                si: j,
                item: data[j]['item'],
                amt: data[j]['amt']
            });
        } else {
            body.push({
                si: data[j]['item'],
                item: data[j]['item'],
                amt: data[j]['amt']
            });
        }
    }
    return body;
}

Answer 2

you can use didParseCell function to solve your problem

for example if you have array of object

var objarr=[] //array of object to construct the table
didParseCell:(data)=>{
          if(data.row.index==this.objarr.length-1&&data.column.index==0){
            data.row.cells.description.colSpan=3;
            //description above refer to the column of the table on the lastrow
          }
        }

Answer 3

I've found it works better if in this example you made the table a 6 column table and then your colspans would reflect the widths needed. So in this example the first two rows would be 3-2colSpan cells, and the following ones would be a 4-colspan cell, and a 2colspan cell row.

--------------------------------
| Si     |  item     |  Amount |
--------------------------------
|  1     | Keyboard  |  10 $   |
|  2     | Mouse     |  5  $   |
--------------------------------
| Total              |  15 $   |
--------------------------------
| VAT                |  5%     |
--------------------------------
| Grand Sum          |  15.75  |

I'll say there is one caveat to this, that you'll have to set a standard column width with your columnStyles, and a blank row of the maximum number of columns. A blank non-shown header row has worked for me.

 let pdfObject = {
    showHead:'never',
    head:[_.range(6).map(el=>'')],
    body: [Arrays(n)],
    rowPageBreak: "avoid",
    styles: styles,
    headStyles: headerStyles,
    bodyStyles: {
      overflow: "linebreak",
      textColor: [0, 0, 0],
    },
    columnStyle:_.range(6).reduce((cache,el)=>{
      cache[el] = {
        minCellWidth : pdfDocument.internal.pageSize.width/6, 
      };
      return cache;
    } ,{}),
    theme: "grid", 
}

Answer 4

just after looping for the data in version 3 > you can do something like this :

//your data
let data = {
  details: []
}
//parse the data for the table        
let dataTable = []
let billTotal = 0
for (let index = 0; index < data.details.length; index++) {
    const element = data.details[index];
    billTotal += element.bill_final
    dataTable.push([
        index + 1,
        element.site_id,
        element.wbs,
        element.prov,
        element.penalty_price,
        element.bill_final,
    ]);
}
//push the last one after looping your fixed data.
//you can also style as you like.
dataTable.push(
    [{
            content: 'TOTAL : ',
            colSpan: 5,
            styles: {
                halign: 'right'
            }
        },
        {
            content: billTotal,
            styles: {
                halign: 'center'
            }
        }
    ]
);