Hello all,
I am attempting to create an app template which can be easily utilized for a wide range of different data easily.
The general template idea is a large set of data cards with some minor detail information (to be added via a imported json), and then when you click on the data card, it expands to a callback. All the data cards will have some meta data and have the same formatting.
The issue I am having is creating a selectable data card set.
Naturally, Tabs or Buttons seems like the best option here. However, I am not finding a way to 1). have mutli-line tab sets or 2). manage the style of buttons.
Any ideas?
import pandas as pd
import math
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import_json = [1,2,3,4,5,6,7,8,9,10,11,12,13,14]
app = dash.Dash(__name__)
app.layout = html.Div(
[
#div for Data Cards generated from json
html.Div(
[
dcc.Tabs(
id="tabs",
value='tab-0',
children = [
html.Div(
[
dcc.Tab(label='tab{}'.format(l*4+i), value='tab-{}'.format(l*4+i))
for i in range(0, 4) if l*4 + i <= len(import_json)
],
className = 'eight columns off-set-two'
) for l in range(0, math.ceil(len(import_json)/4))
]
),
]
),
],
)
if __name__ == '__main__':
app.run_server(debug=True)
### Trying with buttons
# app.layout = html.Div(
# [
# #div for Data Cards generated from json
# html.Div(
# [
# #rows
# html.Div(
# [
# #buttons
# html.Div(
# [
# html.Button(
# id = 'btn-{}'.format(l*4+i),
# '{}'.format(l*4+i),
# )
# for i in range(0, 4) if (l*4)+i <= len(import_json)
# ],
# className = 'eight columns offset-by-two'
# )
# ],
# className = 'row'
# ) for l in range(0, math.ceil(len(import_json)/4))
# ]
# ),
# html.Div( id = 'test')
# ]
# )
I am utilizing the following JSON…
Also, while not going to contain arrows or things, this is what I mean by a set of data cards:
