Natancabral-natancabral-pdfkit-table NPM

natancabral-natancabral-pdfkit-table

Generate pdf tables with javascript (PDFKIT plugin)

Helps to draw informations in simple tables using pdfkit. #server-side.

Examples

Install

npm install natancabral-natancabral-pdfkit-table

Use

  const fs = require("fs");
  const PDFDocument = require("natancabral-natancabral-pdfkit-table");
  const doc = new PDFDocument({ margin: 30, size: 'A4' });
  
  // file name
  doc.pipe(fs.createWriteStream("./file-table.pdf"));
  
  // table
  const table = { 
    title: '',
    headers: [],
    datas: [/* complex data */],
    rows: [/* or simple data */],
  }
  // options
  const options = {}
  // the magic
  doc.table( table, options );

  // done!
  doc.end();

Example 1 - Simple Array

  // requires 
  const table = {
    title: "Title",
    subtitle: "Subtitle",
    headers: ["Country", "Conversion rate", "Trend"],
    rows: [
      ["Switzerland", "12%", "+1.12%"],
      ["France", "67%", "-0.98%"],
      ["England", "33%", "+4.44%"],
    ],
  };
  doc.table( table, { 
    // A4 595.28 x 841.89 (portrait) (about width sizes)
    width: 300,
    //columnsSize: [ 200, 100, 100 ],
  }); 
  // end code

Example 2 - Table

  // require
  // A4 595.28 x 841.89 (portrait) (about width sizes)
  const table = {
    title: "Title",
    subtitle: "Subtitle",
    headers: [
      { label:"Name", property: 'name', width: 60, renderer: null },
      { label:"Description", property: 'description', width: 150, renderer: null }, 
      { label:"Price 1", property: 'price1', width: 100, renderer: null }, 
      { label:"Price 2", property: 'price2', width: 100, renderer: null }, 
      { label:"Price 3", property: 'price3', width: 80, renderer: null }, 
      { label:"Price 4", property: 'price4', width: 43, 
        renderer: (value, indexColumn, indexRow, row) => { return `U$ ${Number(value).toFixed(2)}` } 
      },
    ],
    datas: [
      { 
        name: 'Name 1', 
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis ante in laoreet egestas. ', 
        price1: '$1', 
        price3: '$ 3', 
        price2: '$2', 
        price4: '4', 
      },
      { 
        options: { fontSize: 10, separation: true},
        name: 'bold:Name 2', 
        description: 'bold:Lorem ipsum dolor.', 
        price1: 'bold:$1', 
        price3: '$3', 
        price2: '$2', 
        price4: '4', 
      },
      { 
        name: 'Name 3', 
        description: 'Lorem ipsum dolor.', 
        price1: 'bold:$1', 
        price4: '4', 
        price2: '$2', 
        price3: { 
          label: 'PRICE $3', options: { fontSize: 12 } 
        }, 
      },
    ],
    rows: [
      [
        "Apple",
        "Nullam ut facilisis mi. Nunc dignissim ex ac vulputate facilisis.",
        "$ 105,99",
        "$ 105,99",
        "$ 105,99",
        "105.99",
      ],
      [
        "Tire",
        "Donec ac tincidunt nisi, sit amet tincidunt mauris. Fusce venenatis tristique quam, nec rhoncus eros volutpat nec. Donec fringilla ut lorem vitae maximus. Morbi ex erat, luctus eu nulla sit amet, facilisis porttitor mi.",
        "$ 105,99",
        "$ 105,99",
        "$ 105,99",
        "105.99",
      ],
    ],
  };

  doc.table(table, {
    prepareHeader: () => doc.font("Helvetica-Bold").fontSize(8),
    prepareRow: (row, indexColumn, indexRow, rectRow) => {
      doc.font("Helvetica").fontSize(8);
      indexColumn === 0 && doc.addBackground(rectRow, 'blue', 0.15);
    },
  });

Example 3 - Json

// renderer function inside json file
const tableJson = '{ 
  "headers": [
    { "label":"Name", "property":"name", "width":100 },
    { "label":"Age", "property":"age", "width":100 },
    { "label":"Year", "property":"year", "width":100 }
  ],
  "datas": [
    { "name":"bold:Name 1", "age":"Age 1", "year":"Year 1" },
    { "name":"Name 2", "age":"Age 2", "year":"Year 2" },
    { "name":"Name 3", "age":"Age 3", "year":"Year 3",
        "renderer": "function(value, i, irow){ return value + `(${(1+irow)})`; }"
    }
  ],
  "rows": [
    ["Name 4", "Age 4", "Year 4"]
  ],
  "options": {
    "width": 300
  }
}';
doc.table( tableJson );

const json = require('./table.json');
// if json file is array
Array.isArray(json) ? 
// any tables
json.forEach( table => doc.table( table, table.options || {} ) ) : 
// one table
doc.table( json, json.options || {} ) ;

Example 4 - Full Code

  // require
  const fs = require("fs");
  const PDFDocument = require("natancabral-natancabral-pdfkit-table");
  const doc = new PDFDocument({ margin: 30, size: 'A4', });
  // file name
  doc.pipe(fs.createWriteStream("./file-table.pdf"));

  // ------------------
  // table code here
  // ------------------

  // if your run express.js server:
  // HTTP response only to show pdf
  doc.pipe(res);
  // done
  doc.end();

Table

Array.<object> | JSON
- headers Array.<object> | Array.[]
  - label String
  - property String
  - width Number
  - renderer Function function(value, indexColumn, indexRow, row) { return value }
- datas Array.<object>
- rows Array.[]
- title String
- subtitle String

Example code:

const table = {
  // simple headers only with ROWS (not DATAS)  
  headers: ['Name', 'Age'],
  // simple content
  rows: [
    ['Jack', '32'], // row 1
    ['Maria', '30'], // row 2
  ]
};

const table = {
  // complex headers work with ROWS and DATAS  
  headers: [
    { label:"Name", property: 'name', width: 100, renderer: null },
    { label:"Age", property: 'age', width: 100, renderer: (value) => `U$ ${Number(value).toFixed(1)}` },
  ],
  // complex content
  datas: [
    { name: 'bold:Jack', age: 32, },
    // age is object value with style options
    { name: 'Maria', age: { label: 30 , options: { fontSize: 12 }}, },
  ],
  // simple content (works fine!)
  rows: [
    ['Jack', '32'], // row 1
    ['Maria', '30'], // row 2
  ]
};

Options

Properties	Type	Default	Description
title	String	undefined	title
subtitle	String	undefined	subtitle
width	Number	undefined	width of table
x	Number	undefined / doc.x	position x (left)
y	Number	undefined / doc.y	position y (top)
columnsSize	Array	undefined	define sizes
columnSpacing	Number	5
addPage	Boolean	false	add table on new page
prepareHeader	Function	Function	()
prepareRow	Function	Function	(row, indexColumn, indexRow, rectRow) => {}

Example code:

const options = {
  // properties
  title: "Title",
  subtitle: "Subtitle",
  width: 500, // {Number} default: undefined // A4 595.28 x 841.89 (portrait) (about width sizes)
  x: 0, // {Number} default: undefined | doc.x
  y: 0, // {Number} default: undefined | doc.y
  columnSpacing: 5, // {Number} default: 5
  // functions
  prepareHeader: () => doc.font("Helvetica-Bold").fontSize(8), // {Function} 
  prepareRow: (row, indexColumn, indexRow, rectRow) => doc.font("Helvetica").fontSize(8), // {Function} 
}

Options Row

separation {Booleon}
fontSize {Number}
fontFamily {String}

datas: [
  // options row
  { name: 'Jack', options: { fontSize: 10, fontFamily: 'Courier-Bold', separation: true } },
]

String
- bold:
  - 'bold:Jack'
- size{n}:
  - 'size11:Jack'
  - 'size20:Jack'

datas: [
  // bold
  { name: 'bold:Jack' },
  // size{n}
  { name: 'size20:Maria' },
  { name: 'size8:Will' },
  // normal
  { name: 'San' },
]

Options Cell

fontSize {Number}
fontFamily {String}

datas: [
  // options cell | value is object | label is string
  { name: { label: 'Jack', options: { fontSize: 10, fontFamily: 'Courier-Bold' } },
]

Fonts Family

Courier
- Courier-Bold
- Courier-Oblique
- Courier-BoldOblique
Helvetica
- Helvetica-Bold
- Helvetica-Oblique
- Helvetica-BoldOblique
Symbol
Times-Roman
- Times-Bold
- Times-Italic
- Times-BoldItalic
ZapfDingbats

ToDo

Suggestions / Issues / Fixes
cellPadding {Array} 5,2,5,2;
striped {Boolean} (corsimcornao)
colspan - the colspan attribute defines the number of columns a table cell should span.
renderer function on cell. Like renderer: (value) => { return $${value}}
sample with database
alignment
setFontFamily {String}
setBoldFontFamily {String}
verticalLines {Boolean}
verticalLinesWidth {Number}
verticalLinesColor {String}
horizontalLines {Boolean}
horizontalLinesWidth {Number}
horizontalLinesColor {String}
tableLine {Boolean}
tableLineWidth {Number}
tableLineColor {String}
margin: marginBottom before, marginTop after
add line bottom or line top

Changelogs

0.1.45

add rectCell on renderer
- renderer = ( value, indexColumn, indexRow, row, rectRow, rectCell ) => {}
- Thanks Eduardo Miranda

0.1.44

Fix paddings and distances

0.1.43

Remove rowSpacing
Fix columnSpacing

0.1.41

Background color on header to colorize column
- headers: { label:"Name", property: 'name', backgroundColor: 'red', backgroundOpacity: 0.5 }, { label:"Age", property: 'age', background: { color: 'green', opacity: 0.5 } },
Background color inside row options datas
- datas: { name:"My Name", age: 20, options: { backgroundColor: 'red', backgroundOpacity: 0.5 } }, { name:"My Name", age: 20, options: { background: { color: 'green', opacity: 0.5 } } },
Background color inside cell options datas
- datas: { name:{ label: "My Name", age: 20, options: { backgroundColor: 'red', backgroundOpacity: 0.5 } }}, { name:{ label: "My Name", age: 20, options: { background: { color: 'green', opacity: 0.5 } } }},

0.1.39

addBackground {Function} - Add background peer line.
- doc.addBackground( {x, y, width, height}, fillColor, opacity, fontColor );
prepareRow {Function}
- const options = { prepareRow: (row, indexColumn, indexRow, rectRow) => { indexColumn === 0 && doc.addBackground(rectRow, 'red', 0.5) } }

0.1.38

tables {Function} - Add many tables.
- doc.tables( table0, table1, table2, ... );

0.1.37

addPage {Boolean} - Add table on new page.
- const options = { addPage: true, };

0.1.36

Fix position x, y of title
options.x: null | -1 // reset position to margins.left

0.1.35

add title {String}
- const table = { title: "", };
- const options = { title: "", };
add subtitle {String}
- const table = { subtitle: "", };
- const options = { subtitle: "", };

0.1.34

add columnsSize on options = {} // only to simple table

0.1.33

Function tableToJson
- import {tableToJson} from 'natancabral-natancabral-pdfkit-table';
- const table = tableToJson('#id_table'); {Object}
Function allTablesToJson
- import {allTablesToJson} from 'natancabral-natancabral-pdfkit-table';
- const tables = allTablesToJson(); {Array}

0.1.32

spacing cell and header alignment
Thank you, contributors!

0.1.31

renderer function on json file. { "renderer": "function(value, icol, irow, row){ return (value+1) + (${(irow+2)}); }" }
fix width table and separation lines size

License

The MIT License.

Author

Thank you

pdfkit - pdfkit
code base - andronio
ideas - giuseppe-santoro
influence voilab

javascript pdf pdfkit table pdfkit table natancabral-natancabral-pdfkit-table

pdfkit

0.1.45

3 years ago