CODEWITHSUNDEEP
jspdfjspdf-autotable
Matthew P
Matthew P

Reputation: 735

jsPDF + Autotable - add line under each row

Is it possible to add a line under each row in a jspd-autotable? i.e. not borders around every cell, just a bottom border on every cell.

Upvotes: 3

Views: 5105

Answers (2)

talha_ah
talha_ah

Reputation: 376

We can specify any side border by using the hook "willDrawCell" of jspdf autotable and jspdf line method.

Example:

doc.autoTable({
  willDrawCell: function(data) {
    // add borders around the head cells
    if (data.row.section === "head") {
      doc.setDrawColor(0, 0, 0); // set the border color
      doc.setLineWidth(0.5); // set the border with

      // draw bottom border
      doc.line(
        data.cell.x,
        data.cell.y + data.cell.height,
        data.cell.x + data.cell.width,
        data.cell.y + data.cell.height
      );
      // draw top border
      doc.line(
        data.cell.x + data.cell.width,
        data.cell.y,
        data.cell.x,
        data.cell.y
      );
      // draw left border
      doc.line(
        data.cell.x,
        data.cell.y + data.cell.height,
        data.cell.x,
        data.cell.y
      );
      // draw right border
      doc.line(
        data.cell.x + data.cell.width,
        data.cell.y,
        data.cell.x + data.cell.width,
        data.cell.y + data.cell.height
      );
    }
  },
});

Can also add border to some specific cells:

doc.autoTable({
  willDrawCell: function(data) {
    // add borders around the head cells
    if (data.row.section === "head" && data.column.dataKey === "qty") {
      doc.setDrawColor(255, 255, 0); // set the border color
      doc.setLineWidth(0.5); // set the border with

      // draw bottom border
      doc.line(
        data.cell.x,
        data.cell.y,
        data.cell.x + data.cell.width,
        data.cell.y
      );
    }
  },
});

Ref: https://github.com/simonbengtsson/jsPDF-AutoTable/issues/651#issuecomment-626272061

Upvotes: 8

Matthew P
Matthew P

Reputation: 735

In the end I managed to do this by hiding all of the borders and adding a fake row in between every row. I then set the height of every odd row (excluding the heading) to a small value and set the background colour to black. Bit of a hack but it works and looks good.

Upvotes: -2

Related Questions