How can I color a row using jsPDF AutoTable based on a single cell value?

0
votes

I'm trying to create a PDF based off of an interactive/dynamic table using jsPDF + AutoTable. The last cell in a row will either say "Yes" or "No" - if the cell says "Yes" the entire row should be highlighted.

The closest I've come is getting the cell to highlight, but I need the entire row to highlight. I seem to be having trouble tying the cell to the row index.

This is my code so far:

willDrawCell: function (data) {
   if (data.cell.text == "Yes") {
      doc.setFillColor(67, 160, 71);
   }
}

Thanks for any help.

2
jspdfjspdf-autotable

2 Answers

0
votes

I was able to resolve this!

Before my doc.autoTable() call, I calculate the index where the "Yes" is, and store those values in an array. I then loop over each row index and setFillColor as appropriate. Here is what my code looks like now:

willDrawCell: function (data) {
  if (data.cell.text == "Yes") {
   doc.setFillColor(67, 160, 71);
  }
   for (let i = 0; i < ready_rows.length; i++) {
        if (data.row.index === ready_rows[i]) {
             doc.setFillColor(239, 154, 154);
           }
    }
}
-1
votes

here currentRow is row which given in auto table

                 
    var res1 = doc.autoTableHtmlToJson(document.getElementById(m));
        var idmm=document.getElementById(n);
              
                var clength=res1.columns.length;
                 var crow=res1.rows.length;
        
         doc.autoTable(res1.columns, res1.data, {margin: {top: vy+25},pageBreak: 'auto',styles: {cellPadding: 1.5,fontSize:fsize , },fontStyle: 'bold',drawRow: function (row, data) {
                currentRow1 = row;
                        currentRow1.height =30;
                      
                     
 if((currentRow1.cells[0].text[0].includes('Total')) || (currentRow1.cells[0].text[0].includes('Avg'))||(currentRow1.cells[0].text[0].includes('count'))||(currentRow1.cells[0].text[0].includes('Min'))||(currentRow1.cells[0].text[0].includes('Max')))

  {
                    1
                         for(var i=0;i<res1.columns.length;i++)
                              {
                              
                                  currentRow1.cells[i].styles.fontStyle = "bold";
                                  currentRow1.cells[i].styles.font = "sans-serif" ; 
                                  currentRow1.cells[i].styles.fillColor = [243,205,204];                 
                                  currentRow1.cells[1].styles.columnWidth="wrap";
                                  currentRow1.cells[1].styles.FontSize=30;
                                  
                                  }
                                 
                               
                                  
  }                    
        
                
    },columnStyles: {0: {columnWidth: columnwidthrgroup},},});

    ```