Hello, my problem comes like this, I am reading a txt file of a pro forma to create the printed representation, but the inconvenience is that the table where the items are broken down as a whole of their tax information, respectively, would basically be something like this:
So I had to make the following structure with 2 arrays:
Array 1:
this.seccion03_partidas_4 = [
[
0: "03",
1: "1",
2: "1.000",
3: "E48",
4: "SER",
5: "23153100",
6: "3101201",
7: "SERVICIOS MAZAS (SIN OT & NO PICKING)",
8: "1.00",
9: "",
10: "1.00",
11: "",
12: "02"
],
[
0: "03",
1: "1",
2: "1.000",
3: "E48",
4: "SER",
5: "23153100",
6: "3101201",
7: "SERVICIOS MAZAS (SIN OT & NO PICKING)",
8: "1.00",
9: "",
10: "1.00",
11: "",
12: "02"
],
[
0: "03",
1: "1",
2: "1.000",
3: "E48",
4: "SER",
5: "23153100",
6: "3101201",
7: "SERVICIOS",
8: "1.00",
9: "",
10: "1.00",
11: "",
12: "02"
],
[
0: "03",
1: "1",
2: "1.000",
3: "E48",
4: "SER",
5: "23153100",
6: "3101201",
7: "SERVICIOS MAZAS (SIN OT & NO PICKING)",
8: "1.00",
9: "",
10: "1.00",
11: "",
12: "02"
]
]
It is where you stay in the part you can't go. unit ...., but here to select which part of the array I am choosing I do it like this:
var partidas = [];
this.seccion03_partidas_4.forEach(element => {
var temp = [
element[2],
element[4],
element[6],
element[3],
element[5],
element[7] + '\n' +
'- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -' + '\n' + '\n' + '\n',
element[8],
element[10]
];
partidas.push(temp)
});
With the above, the first part is filled, for the part indicated with tax, tax, quota... I have the following array:
this.seccion03_IMP_partidasImpuestos_4. = [
[
0: "03-IMP",
1: "TRASLADO",
2: "1.00",
3: "002",
4: "Tasa",
5: "0.160000",
6: "0.16"
],
[
0: "03-IMP",
1: "TRASLADO",
2: "1.00",
3: "002",
4: "Tasa",
5: "0.160000",
6: "0.16"
],
[
0: "03-IMP",
1: "TRASLADO",
2: "1.00",
3: "002",
4: "Tasa",
5: "0.160000",
6: "0.16"
],
[
0: "03-IMP",
1: "TRASLADO",
2: "1.00",
3: "002",
4: "Tasa",
5: "0.160000",
6: "0.16"
]
]
The same for this array I only needed to bring 3 values from the entire array, for this I did it like this:
var impPartidas = [];
this.seccion03_IMP_partidasImpuestos_4.forEach(element => {
var tipoImpuesto = element[3] === '002' ? 'IVA' : element[3] === '001' ? 'ISR' : element[3] === '003' ? 'IEPS' : 'NO HAY UN VALOR VALIDO EN TIPO IMPUESTOS!....';
var temp = [
tipoImpuesto + ' ' + element[3],
element[5],
element[6]
];
impPartidas.push(temp)
});
Of course it works, the real detail is that looking for how to add that attached table to the main table, I did it this way:
autoTable(doc, {
startY: (doc as any).lastAutoTable.finalY + 10,
head: head_tabla_productos,
body: partidas,
theme: 'striped',
styles: {
fontSize: 5,
overflow: 'linebreak',
cellPadding: 2,
lineColor: [0, 0, 0],
lineWidth: .2
},
headStyles: {
valign: 'middle',
halign: 'center',
fillColor: [255, 255, 255],
textColor: [0, 0, 0]
},
tableLineColor: [0, 0, 0],
tableLineWidth: .2,
columnStyles: {
0: {
halign: 'center'
},
1: {
halign: 'center'
},
2: {
halign: 'center'
},
3: {
halign: 'center'
},
4: {
halign: 'center'
},
5: {
halign: 'left'
},
6: {
halign: 'right'
},
7: {
halign: 'right'
}
},
alternateRowStyles: {
fillColor: [255, 255, 255],
},
bodyStyles: {
fillColor: [255, 255, 255],
textColor: 0,
fontSize: 5.5,
minCellHeight: 15,
},
didDrawCell: function (data) {
if (data.column.dataKey === 5 && data.cell.section === 'body') {
let index = data.row.index;
autoTable(doc, {
head: [
['Impuestos', 'TasaOCuota', 'Importe']
],
body: impPartidas[index],
startY: data.cell.y + 6,
margin: {
left: data.cell.x + data.cell.padding('left')
},
tableWidth: 'wrap',
theme: 'grid',
styles: {
fontSize: 5.5,
cellPadding: 1
},
columnStyles: {
5: {
cellWidth: 85
},
},
});
}
}
});
It works but it does not print only the position of the index, since I only need that if it is in position 0 it prints in the table only position 0 of the impPartidas array and so on, successively until I fill position by position, that is why I did that that in the attachment of didDrawCell I put:
let index = data.row.index;
y que imprima en cada posición así
body: impPartidas[index]
Because if in console I print it like this:
console.log(index)
console.log(impPartidas[index])
Result:
0
Array(3) [ "IVA 002", "0.160000", "0.16" ]
1
Array(3) [ "ISR 001", "0.160000", "0.16" ]
2
Array(3) [ "IVA 002", "0.160000", "0.16" ]
3
Array(3) [ "IEPS 003", "0.160000", "0.16" ]
But in the PDF it looks like this:
So I don't know what the error is and how to solve it, since if it is printing it position by indicated index, but in the pdf everything is distorted.
I am using the versions: "jspdf": "^2.5.1", "jspdf-autotable": "^3.5.25"
SOLUTION:
Natively nested tables cannot be created, but looking for how to read position by position depending on the index that it was positioned, it can be solved as follows:
The code is the following:
and the representation in the pdf is as follows:
I hope it helps you!