General
Data Table
Data Table
A template showing the Data Table component, with all the various options.
{
"$schema":"https://hybiscuscdn.blob.core...."
"type":"Report"
"options":{
"report_title":"Example.com"
"report_byline":"Monthly analytics report"
"enable_header":true
"version_number":"v0.1.0"
"vertical_margin":5
"horizontal_margin":5
}
"config":{
"enable_multi_page":true
"colour_theme":"forest"
"typography_theme":"prompt-inter"
"google_fonts":{
"headings":{
"family":
"weight":"700"
}
"paragraph":{
"family":
"weight":"300"
}
}
}
"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.