Skip to main content

Table Elements

Tables display structured data with extensive styling options.

Table Properties & Styling​

Table Element Properties​

PropertyTypeRequiredDescriptionDefault
typestring✓Element type: "table"-
headersarray✗Table header row (max 20 columns, strings only)-
rowsarray✓Table data rows (max 100 rows, 20 columns each, strings only)-
captionstring✗Table caption (max 500 characters)-
spacingobject✗Custom spacing override (before / after in pt)From defaults.spacing.table
styleobject✗Table styling options object (see nested style properties below)Default styles

Nested Style Properties (dot notation)​

The style object controls borders, header, rows and cell padding. The following nested properties are available (all optional):

PropertyTypeDescription
style.borders.outer.widthnumberOuter border width in pt (0-10)
style.borders.outer.colorstringOuter border color in hex (e.g. #0066cc)
style.borders.outer.stylestringOuter border style: solid, dashed, or dotted (default: solid)
style.borders.inner.widthnumberInner border width in pt (0-10)
style.borders.inner.colorstringInner border color in hex
style.borders.inner.stylestringInner border style: solid, dashed, or dotted (default: solid)
style.header.backgroundColorstringHeader background color in hex
style.header.colorstringHeader text color in hex
style.header.fontSizenumberHeader font size in pt (6-72)
style.header.fontWeightstringHeader font weight: normal or bold (default: bold)
style.header.fontStylestringHeader font style: normal or italic (default: normal)
style.header.alignstringHeader text alignment: left, center, right (default: center)
style.rows.backgroundColorstringRow background color in hex
style.rows.colorstringRow text color in hex
style.rows.fontSizenumberRow font size in pt (6-72)
style.rows.fontWeightstringRow font weight: normal or bold (default: normal)
style.rows.fontStylestringRow font style: normal or italic (default: normal)
style.rows.alignstringRow text alignment: left, center, right (default: left)
style.rows.alternateBackgroundColorstringAlternate row background color in hex for striped tables
style.cellPadding.topnumberCell padding top in pt (0-50, default: 8)
style.cellPadding.rightnumberCell padding right in pt (0-50, default: 8)
style.cellPadding.bottomnumberCell padding bottom in pt (0-50, default: 8)
style.cellPadding.leftnumberCell padding left in pt (0-50, default: 8)

Table Style Defaults (defaults.styles.table)​

You can configure default styling for all tables in a document under defaults.styles.table. Individual tables can override any of these properties via their own style object.

Defaults Example​

{
"document": {
"type": "pdf"
},
"defaults": {
"styles": {
"table": {
"borders": {
"outer": {
"width": 1,
"color": "#cccccc",
"style": "solid"
},
"inner": {
"width": 0.5,
"color": "#e0e0e0",
"style": "dotted"
}
},
"header": {
"backgroundColor": "#f5f5f5",
"color": "#111827",
"fontSize": 11,
"fontWeight": "bold",
"align": "center"
},
"rows": {
"backgroundColor": "#ffffff",
"color": "#374151",
"fontSize": 10,
"fontWeight": "normal",
"align": "left",
"alternateBackgroundColor": "#f9fafb"
},
"cellPadding": {
"top": 8,
"right": 8,
"bottom": 8,
"left": 8
}
}
}
},
"sections": []
}

Basic Table​

Basic Table JSON
{
"document": {
"type": "pdf",
"filename": "table-basic-example"
},
"sections": [
{
"type": "flow",
"content": [
{
"type": "table",
"caption": "Employee Directory",
"headers": ["Name", "Department", "Role"],
"rows": [
["John Doe", "Engineering", "**Senior Developer**"],
["Jane Smith", "Marketing", "*Content Manager*"],
["Bob Johnson", "Sales", "Account Executive"]
]
}
]
}
]
}

Styled Metrics Table​

Styled Metrics Table JSON
{
"document": {
"type": "pdf",
"filename": "table-metrics-example"
},
"sections": [
{
"type": "flow",
"content": [
{
"type": "table",
"caption": "Quarterly Performance Metrics 2024",
"headers": ["Quarter", "Revenue", "Growth", "Status", "Notes"],
"rows": [
["**Q1**", "$1,250,000", "+12%", "**Good**", "*Target met*"],
["**Q2**", "$1,480,000", "+18%", "**Excellent**", "***Exceeded target***"],
["**Q3**", "$1,620,000", "+22%", "**Excellent**", "**Above expectations**"],
["**Q4**", "$1,850,000", "+28%", "***Outstanding***", "[Details](https://example.com)"]
],
"style": {
"borders": {
"outer": {
"width": 2,
"color": "#0066cc",
"style": "solid"
},
"inner": {
"width": 1,
"color": "#cccccc",
"style": "dashed"
}
},
"header": {
"backgroundColor": "#0066cc",
"color": "#ffffff",
"fontSize": 12,
"fontWeight": "bold",
"align": "center"
},
"rows": {
"backgroundColor": "#f8f9fa",
"color": "#333333",
"fontSize": 10,
"fontWeight": "normal",
"align": "left",
"alternateBackgroundColor": "#ffffff"
},
"cellPadding": {
"top": 12,
"right": 12,
"bottom": 12,
"left": 12
}
}
}
]
}
]
}

Pricing Comparison Table​

Pricing Comparison Table JSON
{
"document": {
"type": "pdf",
"filename": "table-pricing-example"
},
"sections": [
{
"type": "flow",
"content": [
{
"type": "table",
"headers": ["Feature", "Basic", "Pro", "Enterprise"],
"rows": [
["API Access", "**Limited**", "**Full**", "**Full**"],
["Storage", "1 GB", "100 GB", "***Unlimited***"],
["Support", "*Email*", "*Email + Chat*", "**24/7 Phone**"],
["Price", "$0", "$49/mo", "[Contact](mailto:sales@example.com)"]
],
"style": {
"borders": {
"outer": {
"width": 1,
"color": "#00aa00",
"style": "solid"
},
"inner": {
"width": 0.5,
"color": "#dddddd",
"style": "dotted"
}
},
"header": {
"backgroundColor": "#00aa00",
"color": "#ffffff",
"fontSize": 11,
"fontWeight": "bold",
"align": "center"
},
"rows": {
"backgroundColor": "#f0f8f0",
"color": "#006600",
"fontSize": 9,
"fontWeight": "normal",
"align": "center",
"alternateBackgroundColor": "#ffffff"
}
}
}
]
}
]
}