CODEWITHSUNDEEP
jquerydatatablesdatatables-1.10pdfmakecellpadding
Nikhil
Nikhil

Reputation: 71

DataTables PDF Export Cell Padding

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.

Upvotes: 3

Views: 3543

Answers (2)

Nicholas Piasecki
Nicholas Piasecki

Reputation: 25573

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
        }
    };

Upvotes: 6

Jani Siivola
Jani Siivola

Reputation: 730

In pdfmake it can be done by defining table layout for table: https://pdfmake.github.io/docs/document-definition-object/tables/#own-table-layouts

E.g.:

const tableNode = {
  style: 'tableStyle',
  table: {
    widths: ["*", "*", "*"],
    body: []
  },
  layout: {
    paddingLeft: (i, node) => 10,
    paddingRight: (i, node) => 10,
    paddingTop: (i, node) => 10,
    paddingBottom: (i, node) => 10
  }
}

Upvotes: 4

Related Questions