How can i make a specific row bold?

Question

I am working on generating a pdf and till now its going fine, but i want some specific rows to be bold. for example see picture : grid template from jspdf-autotable How can i make for example, row with id =1 and id=3 bold? Below my code.

function createPDF() {
            if(vm.activeCompanyYear){
                var url = "/coci/report/registry/"+vm.activeCompanyYear;

                DataApiService.callApi(url,null,"GET").then(function(reportData){

                    if(reportData){
                        var doc = new jsPDF('p', 'pt');
                        var row = 45;
                        addPdfHeader(doc, row, "");
                        doc.printingHeaderRow = true;
                        var columns = [ "Description", vm.activeCompanyYear,vm.activeCompanyYear-1, vm.activeCompanyYear-2,vm.activeCompanyYear-3,vm.activeCompanyYear-4,"% t.o.v.'13" ];

                        var rows = [];

                        for(var j=0; j<reportData.length; j++){
                            var obj = reportData[j];

                            if (!obj.description ) {obj.description = '';}

                            if (!obj.year5 ) {obj.year5 = '';}

                            if (!obj.year4 ) {obj.year4 = '';}

                            if (!obj.year3 ) {obj.year3 = '';}

                            if (!obj.year2 ) {obj.year2 = '';}

                            if (!obj.year1 ) {obj.year1 = '';}

                            if (!obj.delta ) {obj.delta = '';}


                            /*TODO : Align data right in grid*/

                            var singleRow = [obj.description,obj.year5,obj.year4,obj.year3,obj.year2,obj.year1,obj.delta];
                            rows.push(singleRow);

                        }                       

                        doc.autoTable(columns, rows, {
                            theme : 'grid',
                            styles: {
                                    halign: 'right',
                                     },
                            headerStyles: {
                                         fillColor: [33, 150, 243],
                                         halign:'center'
                            },
                            margin : {
                                top : 100
                                },
                            columnStyles:{
                                 0: {halign:'left'}
                            }

                        });


                        vm.isLoading = false;
                        blockUI.stop();
                        /* doc.save(); */
                        vm.reportData = doc.output('datauristring');

                    }
                });
            }
        }

Simon Bengtsson · Accepted Answer · 2019-02-17T22:42:59.427

15

Something like this should work:

doc.autoTable({
  html: '#table',
  didParseCell: function(cell, data) {
    if (data.row.index === 0 || data.row.index === 2) {
      cell.styles.fontStyle = 'bold';
    }
  }
})

edited Feb 17 '19 at 22:42

answered Jan 19 '17 at 14:27

Simon Bengtsson

7,573
3
58
87

Hi friend, I tried it like the following and it worked : doc.autoTable(cols, data, { createdCell: function(cell, data) { if (data.row.index === 0 || data.row.index === 2) { cell.styles.fontStyle = 'bold'; } } }) – akshay bhoendie Jan 19 '17 at 17:38
2

For me, data parameter was coming as undefined and had to use cell parameter itself as shown below: ` didParseCell: function(cell, data) { if (cell.row.index === 0) { cell.cell.styles.fontStyle = 'bold'; } },` Not sure why this was happening. – Sharath Aug 13 '20 at 04:52
2

Hey @Sharath, it's because they change the function to receive only one parameter that includes both cell and data. Instead function (cell, data) use function (hookData) and then inside use hookData.data and hookData.cell respectively – Tamir Gilany Mar 08 '21 at 17:38

score 2 · Answer 2 · answered Jan 19 '17 at 17:40

2

I tried it like the following and it worked :

 doc.autoTable(cols, data, { createdCell: function(cell, data) { if (data.row.index === 0 || data.row.index === 2) { cell.styles.fontStyle = 'bold'; } } })

answered Jan 19 '17 at 17:40

akshay bhoendie

273
3
10

Tamir Gilany · Answer 3 · 2021-03-15T09:47:11.397

Since I suggested edit queue is full for the top accepted comment I will add my own comment with the fix

  doc.autoTable({
    html: '#table',
    didDrawCell: function (hookData) {
      if (hookData.section === 'body') {
        if (hookData.row.index === 2) {
          for (const cell of Object.values(hookData.row.cells)) {
            cell.styles.fontStyle = 'bold';
          }
        }
      }
    },
  });

score -1 · Answer 4 · edited Jan 05 '21 at 09:55

    var res = doc.autoTableHtmlToJson(document.getElementById(m));
        var idm=document.getElementById(m);
               // console.log("res.rows",res.rows);
                var clength=res.columns.length;
                 var crow=res.rows.length;
        //console.log("columns.length:",clength);
        //console.log("rows.length:",crow);
                var fsize;
                if(clength>13)
                     {fsize=10;}
                else  if(clength>10) 
                     {fsize=10;}
                else  if(clength>7) 
                     {fsize=10;}
                else  if(clength<6) 
                     {fsize=10;}
                if(PdfType=='Flexible')
                     {fsize=7.5;}
                      

    
               //console.log("res.columns:", res.columns, "res.data:", res.data, res);
         doc.autoTable(res.columns, res.data, {margin: {top: vy+25},pageBreak: 'auto',styles: {cellPadding: 1.5,fontSize:fsize , },fontStyle: 'bold',drawRow: function (row, data) {
                currentRow = row;
                        currentRow.height =30;
                       // console.log("row",row);
                       // console.log("data::::",data);
                       
                     
 if((currentRow.cells[0].text[0].includes('Total')) || (currentRow.cells[0].text[0].includes('Avg'))||(currentRow.cells[0].text[0].includes('count'))||(currentRow.cells[0].text[0].includes('Min'))||(currentRow.cells[0].text[0].includes('Max')))

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

I just take all cell in that row thats easy

How can i make a specific row bold?

4 Answers4

Linked