General
Invoice
Invoice
This example demonstrates how to use advanced features of the Table component to generate an invoice.
{
"$schema":"https://hybiscuscdn.blob.core...."
"type":"Report"
"options":{
"report_byline":"Invoice"
"logo_url":"https://hybiscus.dev/public/im..."
"version_number":""
}
"config":{
"colour_theme":"candy"
"typography_theme":"urbanist"
}
"components":[
0:{
"type":"Row"
"options":{
"columns":3
}
"components":[
0:{
"type":"Text"
"options":{
"bg_colour":"background-faded"
"text":"# Bill to
John Doe
229B Bak..."
}
}
1:{
"type":"Text"
"options":{
"bg_colour":"background-faded"
"text":"# Ship to
John Doe
229B Bak..."
}
}
2:{
"type":"Table"
"options":{
"rows":[
0:[
0:"<b>Invoice No.</b>"
1:"908Y7T"
]
1:[
0:"<b>Invoice date</b>"
1:"2022/08/12"
]
2:[
0:"<b>Due date</b>"
1:"2022/09/12"
]
3:[
0:"<b>Purchase Order.</b>"
1:"908YIUHO"
]
]
"col_bg":[
0:"background-faded"
1:
]
}
}
]
}
1:{
"type":"Row"
"components":[
0:{
"type":"Table"
"options":{
"headings":[
0:"Qty"
1:"Description"
2:"Unit price"
3:"Amount"
]
"rows":[
0:[
0:1
1:"Product A"
2:"£5.00"
3:"£5.00"
]
1:[
0:1
1:"Product A"
2:"£5.00"
3:"£5.00"
]
2:[
0:1
1:"Product A"
2:"£5.00"
3:"£5.00"
]
]
"col_width":[
0:
1:70
2:
3:
]
"col_borders":true
"col_align":[
0:"left"
1:"left"
2:"right"
3:"right"
]
"col_bg":[
0:
1:
2:
3:"background-faded"
]
}
}
]
}
2:{
"type":"Row"
"options":{
"align":"right"
"horizontal_margin":0
}
"components":[
0:{
"type":"Table"
"options":{
"width":"1/3"
"rows":[
0:[
0:"<b>Sub-total</b>"
1:"£45.50"
]
1:[
0:"<b>Tax</b>"
1:"15%"
]
2:[
0:"<b>Grand total</b>"
1:"£52.33"
]
]
"col_borders":true
"col_align":[
0:"left"
1:"right"
]
"col_bg":[
0:"background-faded"
1:
]
}
}
]
}
3:{
"type":"Row"
"components":[
0:{
"type":"Text"
"options":{
"colour":"headline"
"size":"xs"
"text":"#Terms and Conditions
Lorem ip..."
}
}
]
}
]
}
To use this template, simply press the button in the top right corner to copy the JSON to your clipboard. You can paste it directly into the Cloud Editor to get started with this template.