jsPDF Autotable - Auto to programmatically change the color of specific rows

Question

I'm using jsPDF autotable and so far I didn't get any error and was working fine. But now I'm trying to get some specific rows to have the same color instead of always changing the colorWhat I'm trying to far.

  var cor1 = [23, 100, 23];
                               var cor2 = [50, 23, 79];

                                function arraysEqual(arr1, arr2){
                                    if (arr1.length !== arr2.length){
                                        return false;
                                    }

                                    for( var i = 0; i< arr1.length;i++){
                                        if(arr1[i] !== arr2[i]){
                                            return false;
                                        }
                                    }
                                return true;

                                }


                               arrayfim.forEach(row => {
                                var simValue = row[row.length - 1];

                                if (simValue === '') {
                                   if(arraysEqual(cor,cor1)){
                                    cor=cor2;
                                   }else{
                                    cor=cor1;
                                   }
                                }
                            });

                                doc.autoTable({

                                    startY: 70,
                                    styles: {
                                        fontSize: 6,
                                        cellPadding: 2
                                    },
                                    headStyles: {
                                        fontSize: 6
                                    },
                                    bodyStyles: {
                                        fillColor: cor
                                    },alternateRowStyles: {
                                        fillColor: cor
                                    },
                                    columnStyles: {
                                        2: {
                                            cellWidth: 40
                                        },
                                        3: {
                                            cellWidth: 40
                                        },
                                        4: {
                                            cellWidth: 50
                                        }
                                    },
                                    head: [
                                        ['Dia', 'Turno/Picagens', 'Início', 'Fim', 'Total']
                                    ],

                                    body: arrayfim,                             
                                    
                                })
                             
                                doc.addPage();

So far with this code I'm able to change the color of the entire table page based on the array. What do I need to change, or what approach do I need to intead of changing the entire page, to change the rows of the table?

I'm trying to change the color of specific rows of the table like I'm trying to show on this image: What I'm trying to get

Answer 1

There are hooks which can be used. I used didParseCell hook with conditions to change the color for specific cells/rows. Here is a code example:

const handleOnExportClick = () => {
    const pdf = new jsPDF("p", "mm");
    autoTable(pdf, {
        html: cartRef.current,
        bodyStyles: {
            fillColor: [52, 73, 94],
            textColor: 240,
        },
        alternateRowStyles: {
            fillColor: [74, 96, 117],
        },
        didParseCell: (data) => {
            if (data.row.index === 1) {
                data.cell.styles.fillColor = [40, 170, 100];
            }
            if (data.row.cells[0].text[0] === "Handbag") {
                data.cell.styles.fillColor = [255, 255, 0];
            }
        },
    });
    pdf.save("autotable.pdf");
};

I changed the color for the second row and the color of the row, which have first cell with text "Handbag". You just have to tweak the conditions for your case. I want to notice that cartRef is a React reference to a html element.