Сделать подколонки (группа столбцов с одинаковым заголовком) в pdfmake

Question

Я бы напечатал таблицу, в которой есть группа столбцов с такой же ячейкой, что и заголовок. Пример ниже:

Я искал возможное решение, например this , но это вложенная таблица, отличающаяся, конечно, от моей цель.

Answer 1

Используйте rowSpan для ячеек, расширяющих n строки вниз, и colSpan, расширяющих n столбцы вправо.

Попробуйте это:

var dd = {
    content: [
        {
            table: {
                headerRows: 2,
                body: [
                    [{text: 'Item', rowSpan: 2}, {text: 'Properties', colSpan: 3}, '', '', {text: 'Status', rowSpan: 2}],
                    ['', {text: 'A'}, {text: 'B'}, {text: 'C'}, ''],
                    ['Thing', 'Prop A', 'Prop B', 'Prop C', 'Free'],
                ]
            }
        },
    ],
};

Answer 2

Положите необходимые логики c соответственно в l oop тела таблицы. Также при выполнении body.pu sh () вы можете объединить реквизиты с именем столбца (например: props [i] + '' + columnA [i];)

var columnA = "A";
var columnB = "B";
var columnC = "C";
var items = ["item1","item2","item3"];
var props = ["Prop1","Prop2","Prop3"];
var statuses = ["Free","Paid","Free"];
var dd = {
  content: [
      {
          table: {
              headerRows: 2,
              body: tableBody()
          }
      },
  ],
  styles: {
      header: {
        fontSize: 18,
        bold: true,
        color: 'red',
        alignment: 'center'
      }
  }
};  

function tableBody(){
  var arr=[];
  var body =[
              [{text: 'Item', rowSpan: 2 , style:"header"}, {text: 'Properties', 
               colSpan: 3, style:"header"}, '', '', {text: 'Status', rowSpan: 2 , 
               style:"header"}],
              ['', {text: 'A',style:"header"}, {text: 'B',style:"header"}, {text: 
                 'C',style:"header"}, '']
            ]

    for(var j = 0;j < props.length; j++){
                body.push([items[j], (props[j] + ' '+ columnA), (props[j] + ' '+ columnB), (props[j] + ' '+ columnC), statuses[j]]);

    }    
    return body;
}