In the existing visdcc package, I add an new conponent for plotting antd’s table, you can get the selected props from the table, like this example on my github …
Hey, this looks really cool. Is there any way to embed links in the table?
Cheers,
Ben
visdcc.DataTable can’t do it currently because it’s not designed …
maybe it can work for some function when the cell clicked and appcallback
@app.callback(
Output(?????????),
[Input('table', 'selectedcell')])
def myfun(x):
if x == None : return('')
else : some function
dcc.Location
can be used to edit the existing page’s location but it can’t be used to create a new tab
how to change columns width?
maybe you can set style = {‘width’:‘45%’} or
you can set each columns for the data prop. of visdcc.DataTable
col = [{'title': i,
'dataIndex': i,
'key': i,
'Is_sort': True,
'Is_click': True,
'width': 200} for i in df.columns]
col[0]['fixed'] = True
data = {'dataSource': your_dataSource,
'columns': col }
If I use the callback to display the table, I need to click the button multiple times to activate the sorting and selection function. Can you help solve this problem?
app.layout=html.Div([
html.Button(‘output’,id=‘output-btn’),
html.Div(‘output’)
])
@app.callback(
Output(‘output’, ‘children’),
[Input(‘output-btn’, ‘n_clicks’)])
def update_wordcloud(n_clicks):
if n_clicks is None:
raise PreventUpdate
return visdcc.DataTable(id = ‘table’ ,
box_type = ‘radio’,
data = DF_SAMPLE,
scroll = {‘y’:200},
pagination = {‘pageSize’: 5},
style = {‘width’:‘100%’})
your html.Div(‘output’) has no id
the correct code as following
app.config['suppress_callback_exceptions'] = True
app.layout=html.Div([
html.Button('output',id='output-btn'),
html.Div(id = 'output')
])
app.config['suppress_callback_exceptions']=True
@app.callback(
Output('output', 'children'),
[Input('output-btn', 'n_clicks')])
def update_wordcloud(n_clicks):
if n_clicks is None:
raise PreventUpdate
return visdcc.DataTable(id = 'table2',
box_type = 'radio',
data = DF_SAMPLE,
scroll = {'y':200},
pagination = {'pageSize': 5},
style = {'width':'100%'})