How to customize column Font (size and style) by CSS class in DataTables pdf export?

Question

can you guys show me how to change column font size and weight from the doc object in the customize(doc) function of the DataTables html5 PDF Export, using a css class.

I have a datatable where some columns must be bold and bigger than the others.

I have the following buttons definition (, which doesn't seem to work

$('.data-table').DataTable({
buttons: [
            {
                extend: 'pdfHtml5',
                text: '<i class="fa fa-file-pdf-o fa-lg" style="color: red"></i> PDF',
                titleAttr: 'Export to PDF',
                orientation: 'auto',
                className: 'btn btn-default',

                customize: function (doc) {
                    doc.defaultStyle.fontSize = 8;

                    doc.content[1].table.widths = ['*', 70, 70];

                    doc.styles['td.bigcol'] = {
                        fontSize: 16,
                        bold: true,
                    };

                    doc.content.splice(1, 0, {
                        margin: [0, 0, 0, 12],
                        image: 'data:image/png;base64,' + imageStr,
                        fit: [80, 80]
                    });

                }
            }
        ]
});

my table is similar to this:

<table class="table data-table">
<thead>
<tr>
   <td class="bigCol">
            Some List of things
        </td>
        <td></td>
        <td></td>
    </tr>
</thead>

<tbody>
    <tr>
        <td class="bigCol">On List 1</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td class="bigCol">list 1 totals</td>
        <td>data</td>
        <td>data</td>
    </tr>
  </tbody>
</table>

this goes on to like list 9. The table shows correctly on the browser window, but the pdf ayayayyy

Thanks.

Thanks. Im a bit confused thou.. on the accepted answer, where is 'rows' from ?? , they creating the doc object themselves there (if im not mistaken). The columns I want to style aren't necessarily in odd or even rows, they could be anywhere. I want to use the table from that doc parameter DataTables has created, and add the font styles to that and i thought having a common class would make it easier — MxoSibeko

MxoSibeko MxoSibeko · Accepted Answer · 2017-07-27T14:43:55

Finally got it.. with help from This Post.

On the customize function, using Jquery I loop through each table's row, then each row's column to get the row index and column index, then use those indexes on the table in the doc object to define a style for the column

doc.content[1].table.widths = ['*', 70, 70];

$('.data-table').find('tr').each(function(ix, row) {
    var index = ix;

    $(row).find('td').each(function(ind, column) {
        if ($(column).hasClass('bigCol')) {

            var fontSize = $(column).css('font-size').replace('px', '');

            doc.content[1].table.body[index][ind].style = {
                fontSize: parseInt(fontSize)
                bold: true
            };
        }
    });
});

The indexes on the DOM table are equivalent to ones on the doc's table body object

How to customize column Font (size and style) by CSS class in DataTables pdf export?

1 Answers