Navigation :

Tables

Conceptually tables are similar to columns. They can however have headers, borders and cells spanning over multiple columns/rows.

The table node expects a valid table value. If the value is invalid or empty, an error is thrown. This includes the table.body property as well.

var docDefinition = {
  content: [
    {
      layout: 'lightHorizontalLines', // optional
      table: {
        // headers are automatically repeated if the table spans over multiple pages
        // you can declare how many rows should be treated as headers
        headerRows: 1,
        widths: [ '*', 'auto', 100, '*' ],

        body: [
          [ 'First', 'Second', 'Third', 'The last one' ],
          [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
          [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
        ]
      }
    }
  ]
};

Table-cell properties

rowSpan: integer:
colSpan: integer:
verticalAlignment: string: vertical alignment (values: top (default), middle, bottom)
border: [boolean, boolean, boolean, boolean]:
borderColor: [string, string, string, string]:
fillColor: string: the background color of a table cell
fillOpacity: string: the background opacity of a table cell
overlayPattern: [string, string]: overlay for a cell, painted over the contents
overlayOpacity: number: the opacity of the overlay

Table alignment

Minimal version: 0.3.13

Use tableAlignment on the table node, alongside table, to align the whole table horizontally within the available width. Supported values are left (default), center and right.

This property does not change the alignment of text inside cells. Use alignment to control text alignment separately.

var docDefinition = {
  content: [
    {
      tableAlignment: 'center',
      alignment: 'left',
      table: {
        widths: [ 'auto', 'auto' ],
        body: [
          [ 'Item', 'Quantity' ],
          [ 'Example', '2' ]
        ]
      }
    }
  ]
};

The example centers the table while keeping its cell text left-aligned. Use tableAlignment: 'right' to align the table to the right.

Alignment is visible when the table is narrower than the available width, for example with auto or fixed column widths. Tables that fill or exceed the available width keep their left position. The available width respects margins and the containing column or table cell.

Table layouts

Can be used layout property for set table layout.

Available table layouts:

noBorders
headerLineOnly
lightHorizontalLines

Own table layouts

Own table layouts must be defined before calling pdfMake.createPdf(docDefinition).

// define table layouts
var tableLayouts = {
  exampleLayout: {
    hLineWidth: function (i, node) {
      if (i === 0 || i === node.table.body.length) {
        return 0;
      }
      return (i === node.table.headerRows) ? 2 : 1;
    },
    vLineWidth: function (i) {
      return 0;
    },
    hLineColor: function (i) {
      return i === 1 ? 'black' : '#aaa';
    },
    paddingLeft: function (i) {
      return i === 0 ? 0 : 8;
    },
    paddingRight: function (i, node) {
      return (i === node.table.widths.length - 1) ? 0 : 8;
    }
  }
};

// add table layouts
pdfMake.addTableLayouts(tableLayouts);

// download the PDF
pdfMake.createPdf(docDefinition).download();

On the server side:

var pdfmake = require('pdfmake');
pdfmake.addFonts(fonts);

// Declaring your layout
var myTableLayouts = {
    exampleLayout: {
        /*
        Your layout here.
        */
    }
};

// Building the PDF
var pdf = pdfmake.createPdf(docDefinition);

// Writing it to disk
pdf.write('document.pdf').then(() => {
  // success event
}, err => {
  // error event
  console.error(err);
});

colSpan and rowSpan

If you use colSpan or rowSpan, don’t forget to use an empty cell for the next columns or rows. See example below.

var dd = {
  content: [
    {
      table: {
        body: [
          [{text: 'Header with Colspan = 2', style: 'tableHeader', colSpan: 2, alignment: 'center'}, '', {text: 'Header 3', style: 'tableHeader', alignment: 'center'}],
          [{text: 'Header 1', style: 'tableHeader', alignment: 'center'}, {text: 'Header 2', style: 'tableHeader', alignment: 'center'}, {text: 'Header 3', style: 'tableHeader', alignment: 'center'}],
          ['Sample value 1', 'Sample value 2', 'Sample value 3'],
          [{rowSpan: 3, text: 'rowSpan set to 3\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor'}, 'Sample value 2', 'Sample value 3'],
          ['', 'Sample value 2', 'Sample value 3'],
          ['Sample value 1', 'Sample value 2', 'Sample value 3'],
          ['Sample value 1', {colSpan: 2, rowSpan: 2, text: 'Both:\nrowSpan and colSpan\ncan be defined at the same time'}, ''],
          ['Sample value 1', '', ''],
        ]
      }
    }
  ]
}

All concepts related to tables are covered by TABLES example in playground.