Edit a cell's borders one by one?

[udvaritibor]

Hi! Is there a standard way to draw a horizontal line between the header and the body? Or a way to edit a cell so only its bottom border is drawn? Or a workaround is needed? Thanks!

[simonbengtsson]

You currently need to draw a line yourself. If you want to do this I suggest doing so in the didDrawCell hook. That said this is a use case that would be great supporting better to more easily be able to draw more scientific looking tables such as the attached one.

[BadApples11]

Hello,

you can read this link https://stackoverflow.com/questions/58294682/jspdf-with-autotable-how-to-put-top-border-on-row-or-cells-in-row and modify the code in jspdf.plugin.autotable.js at 2023-2025 like indicated for adding a bottom border to a cell, use this in "DidParseCell" (after selecting th good cell) : HookData.cell.styles.borders = "b"; HookData.cell.styles.lineWidth = 0.1; "b" is for bottom

hope this can help you

[osterland]

HI, @BadApples11 ty for your insight! badly the link is dead, and HookData.cell.styles.borders = "b"; seems without no effect for me :/

ty in advance, Kevin

[BadApples11]

Hi, I tried the link and it's dead. But the link doesn't go to the text (?) Copy the the text and not the link : https://stackoverflow.com/questions/58294682/jspdf-with-autotable-how-to-put-top-border-on-row-or-cells-in-row hope it would help you

[prpateldev]

I can help in this by providing some config in each cell so you can customise border width, colour and pattern i.e dashed for each direction separately

[edycarreyes99]

@prpateldev What do you wating for?

[prpateldev]

@edycarreyes99 I have already made this feature and it's merged https://github.com/simonbengtsson/jsPDF-AutoTable/pull/730

[dhurjatichakraborty]

I found the following to be working using the didDrawCell hook.

autoTable(doc, {
  ... ,
  ... ,
  didDrawCell: function (data) {
    if (data.row.index === 0 && data.row.section === "body") {
      doc.setLineWidth(0.1);
      doc.line(4, 15, 56, 15); // the reuired x, y parameters
    }
   },
});

Also:

1. A great example from the official repo

2. Tested from Brave and Chrome

[PathanMansoor]

Hii, Is there any way to remove the input field border in jsPDF

[mirajhad]

• You cn use didDrawCell

doc.autoTable({ didDrawCell: function(data) { // Modify the cell borders data.cell.styles.borderColor = '#0000FF'; data.cell.styles.borderWidth = 2; data.cell.styles.borderStyle = 'solid'; } });

[MikeDabrowski]

The support for controlling individual borders has been added some time ago. For example you could use this. For that to work, 'fillColor' needs to be passed as cell background. You can also experiment with lineWidth in the didParseCell hook

...
headStyles: {
      fillColor: 'white',
      lineWidth: {
        bottom: 1,
      },
      lineColor: 'red',
    },
...

@simonbengtsson I think this issue could be closed.

[simonbengtsson]

True! 🎉🔥