Colspam / Header Styles - Feature

[WhyItWorks]

I would like to start by thanking you for your work. Your library is the most complete I have found.

However, there are some difficulties I have encounter:

Colspan: this functionality I have not found in any other component. With your library I have approached the desired result, but I am still far from my goal.

Header column styles: Header column styles can not be modified at this time

[securedeveloper]

Thank you @WhyItWorks for kind words, I am working to make it better, I am using some open source libraries behind the scene to build and produce excel file but they do not support all these functionalities, like ColSpan etc. (at least not with their open source libraries), So I decided to build my own open source library for the purpose so that we can support all these functionalities with and for Open Source.

The library is still under work, https://github.com/securedeveloper/javascript-excel

As per the plan, it should be finished by the end of March 2019.

[xadamxk]

@securedeveloper is javascript-excel capable of styling table headers? Thanks for your work thus far.

[wwojtowicz]

I would like to start by thanking you for your work. Your library is the most complete I have found.

However, there are some difficulties I have encounter:

Colspan: this functionality I have not found in any other component. With your library I have approached the desired result, but I am still far from my goal.

Header column styles: Header column styles can not be modified at this time

++ Header column styles: Header column styles can not be modified at this time

It would be nice if it were possible to style the header columns.

I found in code, that HederCell get always same style: var headerCellStyle = {font: {bold: true}};

function getHeaderCell(v, cellRef, ws) {
    var cell = {};
    var headerCellStyle = {font: {bold: true}};
    cell.v = v;
    cell.t = 's';
    cell.s = headerCellStyle;
    ws[cellRef] = cell;
}

I'm talking about styling header columns like in this example:

        const dataset = [{
            columns: [
                { title: "Date", width: { wpx: 89 }, style: { font: { sz: '11'}, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "01:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "02:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "03:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "04:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "05:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "06:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "07:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "08:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "09:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "10:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "11:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "12:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "13:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "14:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "15:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "16:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "17:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "18:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "19:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "20:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "21:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "22:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "23:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "24:00", width: { wpx: 77 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } },
                { title: "Sum", width: { wpx: 89 }, style: { font: { sz: '11' }, border: { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } } } }
            ],
            data: dataExcel
        }]