jspdf Autotable с colspan для последних нескольких строк

Question

Это на самом деле таблица из трех столбцов, мне нужно, чтобы последние три строки были двумя столбцами, что означает colspan 2. Как мы можем использовать colspan для некоторых строк?Это структура таблицы и код

--------------------------------
| 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'}
                }
            });

Ожидаемый результат:

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

Answer 1

вы можете использовать функцию didParseCell для решения вашей проблемы

например, если у вас есть массив объектов

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 2

Попробуйте что-то вроде этого.

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;
}