tables

I have an idea for it. We can pass a two-dimensional array of texts, to a method with presentation options like the following:

doc.table([
  ["cell11"],["cell21"],["cell31"],
  ["cell12"],["cell22"],["cell32"],
  ["cell13"],["cell23"],["cell33"]
  ],{
    width:20,
    height:40,
    x:30,
    y:40
});

Then in the module we make rectangles and texts for each cell.

[giuseppe-santoro]

Hi people! I’m developing a function to generate tables, in general my idea is:

doc.table data options

Where data is an array of rows and each row is rappresented as an object. For example, suppose you want to create an invoice, data should be something like this:

data =
    [
        { code: '0001', name: 'Black table', quantity: '10', price: '$ 19.20' }
        { code: '0005', name: 'White table', quantity: '8',  price: '$ 19.20' }
        { code: '0012', name: 'Red chair',   quantity: '40', price: '$ 12.00' }
    ]

In my opinion, this strategy is more useful than a two dimensional array when you get the data from a database.

The second parameter, options, contains a set of options that modify the rendering of the table. An example of options should be:

options =

    columns:
    [
        { id: 'code',     width: 10, name: 'Code' }
        { id: 'name',     width: 40, name: 'Name' }
        { id: 'quantity', width: 25, name: 'Quantity' }
        { id: 'price',    width: 25, name: 'Price' }
    ]

    margins:
        left: 20
        top: 40
        right: 20
        bottom: 0

    padding:
        left: 10
        top: 10
        right: 10
        bottom: 10

options.columns.id is the is ID used to map the column with the corresponding data. options.columns.width is the percentage of width that the column occupies; this meas that the sum of all width must be 100. options.columns.name is the name of the column that will be render as an header of the table. options.margins is the table margin, so it is the distance from the page borders to the table borders. options.padding is the cell padding, so it is the distance from the cell borders to the text in the cell.

What do you think about? any suggestion is appreciated!

[LanguageAgnostic]

Here’s another way inspired by the above.

Call

//Simple
createTable(doc, [[1, 2], [1, 2], [1, 2, 3, 4]]);


//Setting the width of the table
createTable(doc, [[1, 2], [1, 2], [1, 2, 3, 4]], 500);

Method

function createTable(doc, data, width = 500) {
  const startY = doc.y,
    startX = doc.x,
    distanceY = 15,
    distanceX = 10;

  doc.fontSize(12);

  let currentY = startY;

  data.forEach(value => {
    let currentX = startX,
      size = value.length;

    let blockSize = width / size;

    value.forEach(text => {
      //Write text
      doc.text(text, currentX + distanceX, currentY);

      //Create rectangles
      doc
        .lineJoin("miter")
        .rect(currentX, currentY, blockSize, distanceY)
        .stroke();

      currentX += blockSize;
    });

    currentY += distanceY;
  });
}

Result

Hope it helps some of you 👍 Feel free to improve/customize it