How to change header colour

parana55

Hi the standard is pale blue and I want to change this. I'm not a techy, please how do I change the header color pls
Thanks, Michelle

allan

Do you mean the sort icon? Its an image, so you'd open up Paint / Photoshop / whatever and modify it to whatever you want.

If you mean the how header cell:

table.dataTable thead tr {
  background-color: green;
}

should be all that is needed (obviously changing the colour as you need).

Allan

MiKeD128

where is that script? can't seem to find it...

kthorngren

where is that script? can't seem to find it...

What script are you looking for?

Kevin

Kylar

I think he was talking about the pdf export head and foot color. I was wondering about that myself. It seems it always does the pale blue and if I change it I only change the background of the lettering in the cells and not the whole row. It looks odd so I left it the blue color. If there's another option I'd sure appreciate it.

colin

Hi @Kylar ,

You can change the colour in the customize function, like this here. See full options here.

Cheers,

Colin

Kylar

@colin I'm honestly not great with JS so I've not been able to get this to work. Currently this is my code. I think it's possibly only taking my first customize function and ignoring everything thereafter.

                                customize: function (doc) {
                                    doc.content[1].table.widths =
                                        Array(doc.content[1].table.body[0].length + 1).join('*').split('');
                                },
                                customize: function (doc) {
                                    doc.content[1].table.body[0].forEach(function (h) {
                                        h.fillColor = 'green';
                                    });
                                    alignment: 'center'
                                },
                                customize: function (doc) {
                                    doc.styles.title = {
                                        color: '#2D1D10',
                                        fontSize: '16',
                                        alignment: 'center'
                                    }
                                }

Also, is there a specific order the dtOptions need to go in? (in general question)

colin

Hi @Kylar ,

Yep, you need to merge the code into a single customize block, something like this:

customize: function (doc) {
    doc.content[1].table.widths =
        Array(doc.content[1].table.body[0].length + 1).join('*').split('');

    doc.content[1].table.body[0].forEach(function (h) {
        h.fillColor = 'green';
        alignment: 'center'
    });

    doc.styles.title = {
        color: '#2D1D10',
        fontSize: '16',
        alignment: 'center'
    }
}

Also, your middle alignment was in the wrong place, fixed in the above,

Cheers,

Colin

Kylar

Hey @colin
I ended up doing it like this before I even got your reply lol

customize: function (doc) {

// Set column widths
const columnChars = doc.content[2].table.body[0].map(
    col => col.text.length + 2
);
const totalColChars = columnChars.reduce(
    (acc, col) => acc + col,
    0
);

doc.content[2].table.widths = columnChars.map(c => {
    return Math.floor((c / totalColChars) * 645);
});

doc.content[2].table.body[0].forEach(function (h) {
    h.fillColor = "#7E4F29";
    alignment: "center";
});
doc.styles.title = {
    color: "#7E4F29",
    fontSize: "16",
    alignment: "center"
};

However, Can you help me center the columns/column content as well as change the footer color? I'd appreciate it.

Kylar

Scratch that. I figured it out. Just manipulated it looping and did .length for the footer