Answers

• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  November 2017

  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 Posts: 1Questions: 0Answers: 0

  November 2017

  where is that script? can't seem to find it...
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  November 2017

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

  What script are you looking for?

  Kevin
• Kylar Posts: 4Questions: 0Answers: 0

  March 2019

  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 Posts: 15,240Questions: 1Answers: 2,599

  March 2019

  Hi @Kylar ,

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

  Cheers,

  Colin
• Kylar Posts: 4Questions: 0Answers: 0

  March 2019

  @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 Posts: 15,240Questions: 1Answers: 2,599

  March 2019

  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 Posts: 4Questions: 0Answers: 0

  March 2019 edited March 2019

  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 Posts: 4Questions: 0Answers: 0

  March 2019

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