DataTables PDF Export Cell Padding

Question

Is there a way to decrease cell padding in the PDF exported by DataTables? PDFMake playground states that editing cell padding is possible while exporting tables, but I haven't come across any code example doing that. Any help is appreciated.

Answer 1

Well I had this problem too, and this was the simplest solution I could come up with.

        <script type="text/javascript">
            $(document).ready(function () {
                let $table = $('#whatever-your-table-is');
                $table.DataTable({
                    buttons: [ 
                        'copy',
                        'excel',
                        'csv', 
                        {
                            extend: 'pdf',
                            customize: function (doc) {
                                // Here's where you can control the cell padding
                                doc.styles.tableHeader.margin =
                                  doc.styles.tableBodyOdd.margin =
                                  doc.styles.tableBodyEven.margin = [10, 10, 10, 10];
                            },
                            pageSize : 'LETTER'
                        }
                    ]
                });
            });
        </script>

If you find an unminified version, here's a dump of what styles DataTables is setting, so I figured I could mess with tableBodyOdd and tableBodyEven and it worked.

    var doc = {
        pageSize: config.pageSize,
        pageOrientation: config.orientation,
        content: [
            {
                table: {
                    headerRows: 1,
                    body: rows
                },
                layout: 'noBorders'
            }
        ],
        styles: {
            tableHeader: {
                bold: true,
                fontSize: 11,
                color: 'white',
                fillColor: '#2d4154',
                alignment: 'center'
            },
            tableBodyEven: {},
            tableBodyOdd: {
                fillColor: '#f3f3f3'
            },
            tableFooter: {
                bold: true,
                fontSize: 11,
                color: 'white',
                fillColor: '#2d4154'
            },
            title: {
                alignment: 'center',
                fontSize: 15
            },
            message: {}
        },
        defaultStyle: {
            fontSize: 10
        }
    };