|
<< Click to Display Table of Contents >> Columns |
  
|
|
<< Click to Display Table of Contents >> Columns |
|
By default paragraphs are rendered as a vertical stack of elements (one below another). It is possible however to divide available space into columns.
dd TDocDefinition
dd.BeginContent()
dd.AddText('This paragraph fills full width, as there are no columns. Next paragraph however consists of three columns')
dd.BeginColumns()
! auto-sized columns have their widths based on their content
dd.AddText('First column', '"width": "auto"')
! star-sized columns fill the remaining space
! if there's more than one star-column, available width is divided equally
dd.AddText('Second column', '"width": "*"')
! fixed width
dd.AddText('Third column', '"width": 100')
! % width
dd.AddText('Fourth column', '"width": "20%"')
! optional space between columns
dd.EndColumns('"columnGap": 10')
dd.AddText('This paragraph goes below all columns and has full width')
dd.EndContent()
[=== compare with pdfmake:
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'
},
{
// star-sized columns fill the remaining space
// if there's more than one star-column, available width is divided equally
width: '*',
text: 'Second column'
},
{
// fixed width
width: 100,
text: 'Third column'
},
{
// % width
width: '20%',
text: 'Fourth column'
}
],
// optional space between columns
columnGap: 10
},
'This paragraph goes below all columns and has full width'
]
};
===]
Column content is not limited to a simple text. It can actually contain any valid pdfmake element. Make sure to look at the COLUMNS example.