CODEWITHSUNDEEP
javascriptjqueryjspdfjspdf-autotable
Saad A
Saad A

Reputation: 1147

jspdf AutoTable : Target style for specific row of a table

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.

enter image description here

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.

Upvotes: 5

Views: 21312

Answers (2)

Uday Kumar
Uday Kumar

Reputation: 71

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

Upvotes: 7

DinoMyte
DinoMyte

Reputation: 8868

Try this : 

$(document).ready(function()
{
  $('tr').find('td').eq(0).addClass('highlight');
});

Example : https://jsfiddle.net/bneen5rc/

Upvotes: -2

Related Questions