Border on merged cell not working

[sonizef]

Hello !

I've some issue with merged cell and border style.

My cells :

   worksheet.A1 = {
      t: 's',
      v: 'Hello World',
      s: {
        border: {
          left: { style: 'thick' },
          top: { style: 'thick' },
          bottom: { style: 'thick' },
        },
      },
    };

    worksheet.B1 = {
      t: 's',
      v: '',
      s: {
        border: {
          top: { style: 'thick' },
          bottom: { style: 'thick' },
        },
      },
    };

    worksheet.C1 = {
      t: 's',
      v: '',
      s: {
        border: {
          top: { style: 'thick' },
          right: { style: 'thick' },
          bottom: { style: 'thick' },
        },
      },
    };

Here is my merge :

    worksheet['!merges'] = [
      { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } }
   ]

And the result :

Any idea ? 😄

[cristianoaro]

Hi @sonizef,

I take some tests with your sample and not find the reason of this happen.

If you could, you can send me a message and I can try to help you to find the error

[MalickBurger]

Hi,

I am having this same issue.

Did you figure out what the problem was?

[sonizef]

Hi,

I am having this same issue.

Did you figure out what the problem was?

No, I always have the problem.

To keep my exemple, you can add top border en B2 et C2, left border on D1. But for top border, no solution :/

[cyansming]

I have also encountered such a problem. Is there any solution

[cyansming]

The reason for this problem is:
When merging cells, from A1 to A3.Even though the A2 and A3 positions don't need values,But also put an empty string in positions A2 and A3.
To ensure that the merged cell borders are fully displayed

[Atww]

Sorry . for my english skill is't good

Border Not render Because

1. if cell has .t ( data-type ) = z
2. has no property .v ( value )

[yousufkalim]

Hi, I am having this same issue.

Did you figure out what the problem was?

[yousufkalim]

@sonizef, @cristianoaro, @MalickBurger, @cyansming, @gitbrent

Do you guys found the solution? Actually I got in to the problem with client and this is compulsory for me to fix this issue otherwise client will file the dispute

[yahanlee]

You need to define the style of every merged cell.

Here is my example:

const titleStyle = {
    t: 's',
    s: {
      font: {
        bold: true,
        sz: 14
      },
      border: {
        top: {
          style: 'thin',
          color: '#000'
        },
        bottom: {
          style: 'thin',
          color: '#000'
        },
        left: {
          style: 'thin',
          color: '#000'
        },
        right: {
          style: 'thin',
          color: '#000'
        }
      }
    }
}
const firstRow = [
    {
      v: 'This is a title',
      ...titleStyle
    },
    {
      v: '',
      ...titleStyle
    }
]

ws['!merges'] = [
    {s: {r: 0, c: 0}, e: {r: 0, c: 1}},
]

[jihyundev]

Seems like it's still not working with latest version. (1.2.0)
Any solution?

export const downloadExcel = () => {
    const wb = XLSX.utils.book_new();

    const titleStyle = {
        t: 's',
        s: {
            font: {sz: 10},
            fill: { bgColor: { indexed: 64 }, fgColor: { rgb: 'F3F3F3' }},
            alignment: {horizontal: 'center', vertical: 'center'},
            border: {
              color: { auto: 1 },
              top: { style: 'thin' },
              bottom: { style: 'thin' },
              left: { style: 'thin' },
              right: { style: 'thin' }
            }
        }
    }

    // STEP 2: Create data rows and styles
    let row = [
        { v: "Courier: 24", t: "s", s: { font: { name: "Courier", sz: 24 } } },
        { v: "bold & color", t: "s", s: { font: { bold: true, color: { rgb: "FF0000" } } } },
        { v: "fill: color", t: "s", s: { fill: { fgColor: { rgb: "E9E9E9" } } } },
        { v: "line\nbreak", t: "s", s: { alignment: { wrapText: true } } },
        {
            v: 'some text 1',
            ...titleStyle
        },
        {
            v: 'some text 2',
            ...titleStyle
        },
        {
            v: 'some text 3',
            ...titleStyle
        }
    ];

    // STEP 3: Create worksheet with rows; Add worksheet to workbook
    const ws = XLSX.utils.aoa_to_sheet([row]);
    if(!ws["!merges"]) ws["!merges"] = [];
    ws["!merges"].push({s: {r: 0, c: 4}, e: {r: 0, c: 6}});

    XLSX.utils.book_append_sheet(wb, ws, "readme demo");

    // STEP 4: Write Excel file to browser
    XLSX.writeFile(wb, "xlsx-js-style-demo.xlsx");
}