How to fill column background color for pdfmake using fillColor?

Question

Is it possible to fill the background color of a column with fillColor: '#dedede' ? fillColor works fine in tablecell, at the same time it doesn't work for a column :(

 <script src="https://rawgit.com/bpampuch/pdfmake/master/build/vfs_fonts.js"></script> <script src="https://rawgit.com/yelouafi/pdfmake/master/build/pdfmake.js"></script> <script> function print(argument) { // open the PDF in a new window pdfMake.createPdf(docDefinition).open(); } </script> <button onclick="print()" style="display:block; margin: 10px auto;padding: 20px 50px;">Print</button> <hr> <script> var docDefinition = { content: [ 'This paragraph fills full width, as there are no columns. Next paragraph however consists of three columns', { columns: [{ // auto-sized columns have their widths based on their content width: 'auto', text: 'First column', fontSize: 30, fillColor: '#dedede' }, { // star-sized columns fill the remaining space // if there more than one star-column, available width is divided equally width: '*', text: 'Second column' }, { // fixed width width: 100, text: 'Third column' }, { // percentage width width: '10%', text: 'Last column' }], // optional space between columns columnGap: 10 }, 'This paragraph goes below all columns and has full width' ] }; </script> 

Answer 1

I did not get to apply the background color to the columns. I think the only option is to use tables.

Below this line I have attached a simple code that you can paste right on the pdfmake site to try it.

Good luck

  var dd = { content: [ 'This paragraph fills full width, as there are no columns. Next paragraph however consists of three columns', { style: 'section', table: { widths: [ '15%', '*', '35%'], body: [ [ { text: 'first column', fillColor: '#555555', color: '#00FFFF', }, { text: 'second column', color: '#555555', fillColor: '#dedede' }, { text: 'third column', fillColor: '#555555' } ] ] }, layout: 'noBorders' } ], styles: { section: { fontSize: 9, color: '#FFFFFF', fillColor: '#2361AE', margin: [0, 15, 0, 5] } }, defaultStyle: { alignment: 'center' } } 

Answer 2

Use a spreadsheet to wrap your content

Set up a table with one cell and no border and use fillColor to set the background.

 var docDefinition = { content: [ { table: { headerRows: 0, body: [ [{ // Choose your color fillColor: '#bada55', // Remove distasteful border border: [false, false, false, false], // Columns/Whatever goes here columns: [{ // auto-sized columns have their widths based on their content width: 'auto', text: 'First column', fontSize: 30, fillColor: '#dedede' }, { // star-sized columns fill the remaining space // if there more than one star-column, available width is divided equally width: '*', text: 'Second column' }, { // fixed width width: 100, text: 'Third column' }, { // percentage width width: '10%', text: 'Last column' }], // optional space between columns columnGap: 10 }, 'This paragraph goes below all columns and has full width' ] }], ] } }, }; 

This brings me back to the time when the Internet was designed using tables. If nothing else supports the fill color property, wrap it in something that supports it; table.