General
Data Table
Data Table
A template showing the Data Table component, with all the various options.
{
"schema_url":"https://hybiscuscdn.blob.core...."
"options":{
"report_title":"Example.com"
"report_byline":"Monthly analytics report"
"enable_header":true
"logo_url":
"version_number":"v0.1.0"
"footer_text":
"vertical_margin":5
"horizontal_margin":5
}
"config":{
"n_pages":1
"enable_multi_page":true
"enable_pagination":false
"landscape":false
"colour_theme":"forest"
"typography_theme":"prompt-inter"
"google_fonts":{
"headings":{
"family":
"weight":"700"
}
"paragraph":{
"family":
"weight":"300"
}
}
"override_colour_theme":{
"headline":
"sub_headline":
"accent":
"paragraph":
"background_default":
"background_muted":
"background_subtle":
"background_faded":
"light_background":
"background":
"highlight":
"highlight_text":
"custom_1":"lime"
"custom_2":
"custom_3":
"highlighted":{
"headline":
"sub_headline":
"accent":
"paragraph":
"background_default":
"background_muted":
"background_subtle":
"background_faded":
"light_background":
"background":
"highlight":
"highlight_text":
}
}
"cloud_storage":{
"s3":
"azure_blob_storage":
"google_cloud_storage":
}
"webhooks":[]
}
"cover_page":
"components":[
0:{
"type":"Beta.DataTable"
"options":{
"vertical_margin":3
"horizontal_margin":0
"rows":[
0:[
0:{
"data":"Lorem"
"color":"accent"
"url_link":
"bar_radius":1
"category_color":"blue"
"caption":
}
1:{
"data":[
0:96
1:31
2:51
3:10
4:93
5:53
6:34
7:91
8:25
9:45
10:73
11:15
12:47
13:17
14:23
15:5
16:92
17:40
18:0
19:20
]
"color":"accent"
"url_link":
"bar_radius":1
"category_color":"blue"
"caption":
}
2:{
"data":[
0:54
1:96
2:81
3:66
4:58
5:98
6:61
7:34
8:48
9:36
]
"color":"accent"
"url_link":
"bar_radius":0
"category_color":"blue"
"caption":
}
3:{
"data":82
"color":"accent"
"url_link":
"bar_radius":1
"category_color":"blue"
"caption":"This is some <br /> multi-line..."
}
4:{
"data":"RUNNING"
"color":"accent"
"url_link":
"bar_radius":1
"category_color":"blue"
"caption":
}
5:{
"data":"Click here"
"color":"accent"
"url_link":"https://yahoo.com"
"bar_radius":1
"category_color":"blue"
"caption":
}
]
1:[
0:{
"data":"Ipsum"
"color":"accent"
"url_link":
"bar_radius":1
"category_color":"blue"
"caption":
}
1:{
"data":[
0:87
1:1
2:75
3:19
4:44
5:32
6:54
7:27
8:18
9:99
]
"color":"accent"
"url_link":
"bar_radius":1
"category_color":"blue"
"caption":
}
2:{
"data":[
0:93
1:56
2:25
3:96
4:77
5:83
6:11
7:53
8:3
9:97
]
"color":"sub-headline"
"url_link":
"bar_radius":1
"category_color":"blue"
"caption":
}
3:{
"data":92
"color":"accent"
"url_link":
"bar_radius":1
"category_color":"blue"
"caption":
}
4:{
"data":"FAILED"
"color":"accent"
"url_link":
"bar_radius":1
"category_color":"red"
"caption":
}
5:{
"data":"Click here"
"color":"accent"
"url_link":"https://google.com"
"bar_radius":1
"category_color":"blue"
"caption":
}
]
2:[
0:{
"data":"Dolor sit amet"
"color":"accent"
"url_link":
"bar_radius":1
"category_color":"blue"
"caption":
}
1:{
"data":[
0:63
1:76
2:92
3:8
4:0
5:45
6:100
7:60
8:44
9:45
]
"color":"accent"
"url_link":
"bar_radius":1
"category_color":"blue"
"caption":
}
2:{
"data":[
0:36
1:97
2:19
3:36
4:86
5:91
6:2
7:33
8:9
9:11
]
"color":"accent"
"url_link":
"bar_radius":1
"category_color":"blue"
"caption":
}
3:{
"data":60
"color":"accent"
"url_link":
"bar_radius":1
"category_color":"blue"
"caption":
}
4:{
"data":"SUCCESS"
"color":"accent"
"url_link":
"bar_radius":1
"category_color":"green"
"caption":
}
5:{
"data":"Click here"
"color":"accent"
"url_link":"https://google.com"
"bar_radius":1
"category_color":"blue"
"caption":
}
]
]
"col_types":[
0:"Text"
1:"SparkLine"
2:"SparkBar"
3:"SparkRing"
4:"Category"
5:"Button"
]
"headings":[
0:"Text"
1:"SparkLine"
2:"SparkBar"
3:"SparkRing"
4:"Category"
5:"Button column"
]
"title":
"striped":false
"width":"full"
"col_borders":false
"col_bg":
"col_align":
"col_width":
"headings_font_size":"sm"
"rows_font_size":"xs"
"table_border":true
}
}
]
}
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.