Saltar al contenido

¿Cómo puedo diseñar la última fila usando el complemento jsPDF Autotable?

Luego de consultar expertos en el tema, programadores de diversas ramas y maestros dimos con la respuesta a la cuestión y la compartimos en este post.

Solución:

Para cambiar de estilo dinámicamente tienes dos opciones. La primera es usar didParseCell para cambiar los estilos de autoTable:

doc.autoTable(
    html: '#table',
    didParseCell: function (data) 
        var rows = data.table.body;
        if (data.row.index === rows.length - 1) 
            data.cell.styles.fillColor = [239, 154, 154];
        
    
);

La segunda es usar willDrawCell si prefiere usar las funciones de estilo jspdf:

doc.autoTable(
    html: '#table',
    willDrawCell: function (data) 
        var rows = data.table.body;
        if (data.row.index === rows.length - 1) 
            doc.setFillColor(239, 154, 154);
        
    ,
);

Vea ejemplos más avanzados aquí.

Han pasado casi tres años desde la última respuesta a esta pregunta. Estaba luchando un poco para lograr ese efecto con la función drawCell. En jspdf-autotable": "^3.0.10" debe usar una de las tres devoluciones de llamada siguientes para lograr lo que desea:

    // Use to change the content of the cell before width calculations etc are performed
    didParseCell: function (data) 
    ,
    willDrawCell: function (data)  
    ,
    // Use to draw additional content such as images in table cells
    didDrawCell: function (data) 
    ,

En tu caso willDrawCell es el que quieres usar. Entonces el código será algo como:

doc.autoTable(
  columns,
  body,
  headStyles: 
    fillColor: "#0d47a1"
  ,
  willDrawCell: drawCell
);

let drawCell = function(data) 
  var doc = data.doc;
  var rows = data.table.body;
  if (rows.length === 1) 
   else if (data.row.index === rows.length - 1) 
    doc.setFontStyle("bold");
    doc.setFontSize("10");
    doc.setFillColor(255, 255, 255);
  
;

Te mostramos las comentarios y valoraciones de los usuarios

No se te olvide difundir este enunciado si te ayudó.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *