jspdf AutoTable : Target style for specific row of a table

Question

I am using jsPDF AutoTable Plugin for my table pdf.

My sources:

#javaScriptIncludeTag("jspdf.min.js")#
#javaScriptIncludeTag("jspdf.plugin.autotable.js")#

My sources are from:

https://github.com/MrRio/jsPDF

https://github.com/simonbengtsson/jsPDF-AutoTable

My Script :

$(function() {

    var doc = new jsPDF('p', 'pt', 'a4');
    var $tables2 = $(".pdftable2");
    var startingY = 0;

    $tables2.each(function( index ) {

        var $this = $(this), tableid = $this.attr('id');
        var res = doc.autoTableHtmlToJson(document.getElementById(tableid));
        var offset =  2;
        startingY = doc.autoTableEndPosY() + offset;

        doc.autoTable(res.columns, res.data, {
            startY: startingY,
            pageBreak: 'avoid',
            theme: 'grid',
            styles: {
                overflow: 'linebreak',
                fontSize: 12,
                valign: 'middle'
            },
            columnStyles: {
                0: {valign: "top"}, 
                1: {
                    columnWidth: 20,
                    fontStyle: 'bold',
                    halign: 'center', 
                },
                2: {
                    columnWidth: 20,
                    fontStyle: 'bold',
                    halign: 'center', 
                },
                3: {
                    columnWidth: 20,
                    fontStyle: 'bold',
                    halign: 'center', 
                },
            }
        });

    }); 

    doc.save('pdf doc');

});

My Markup:

<table class="pdftable2" id="j_info" border="1">
        <tr>
            <th>Group Name</th> 
            <th>Yes</th>    
            <th>NA</th>
            <th>No</th>
        </tr>
        <tr>
            <td colspan="4">Sub Group name</td> 
        </tr>
        <tr>
            <td>
                Phasellus sagittis tristique augue
            </td>
            <td></td>
            <td>X</td>
            <td></td>
        </tr>
    </table>

My header is the group name and the second row after it is sub group name. I want to target the second row with sub group and give a unique style. How do I target that entire row. below is what my table looks like.

IMPORTANT NOTE: Any css style have no effect on the way the pdf looks. I am interested in how the pdf looks not how the actual page looks in the browser. For all it matters, the entire table can be hidden, but jspdf AutoTable will still render it in a pdf.

You should check out the drawCell hook. There are some examples in the jspdf-autotable repo. I would normally recommend the drawRow option, but it currently has some issues — Simon Bengtsson

Uday Kumar Uday Kumar · Accepted Answer · 2019-01-17T17:55:08

Try the below code to give the styles to cells of particular row.

doc.autoTable({
  html: '#table',
  didParseCell(data) {
    if (data.cell.row.index === 0) {
      data.cell.styles.textColor = [255, 255, 255];
      data.cell.styles.fillColor = '#FF5783';
    }
  }
})

jspdf AutoTable : Target style for specific row of a table

2 Answers