Closed doccray closed 5 years ago
@doccray Thank you -- was really looking for this :).
@chriddyp Is there a major reason this can't be included in the dash table experiments preview? I think many of us would love this as a stop gap measure.
What's the status of this PR? I'd like to use it, but I can't get it to work by installing the fork...
Hi! here are the steps to install the fork:
git clone https://github.com/doccray/dash-table-experiments.git
cd dash-table-experiments
npm i
(download JavaScript dependencies)npm run build-local
(generate bundle.js)npm run copy-lib && python setup.py install
(copy bundle.js to another directory and install package)Afaik bundle.js
contains the whole JavaScript code and have to be regenerated when one of the source files were changed.
Here is some example code.
It is important to use the lines with serve_locally
otherwise a remote bundle.js
from an external server will be used and not the newly generated local file.
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
import pandas as pd
app = dash.Dash()
app.scripts.config.serve_locally = True
app.css.config.serve_locally = True
DF_GAPMINDER = pd.read_csv(
'https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'
)
DF_GAPMINDER = DF_GAPMINDER[DF_GAPMINDER['year'] == 2007]
DF_GAPMINDER.loc[0:20]
DF_SIMPLE = pd.DataFrame({
'x': ['A', 'B', 'C', 'D', 'E', 'F'],
'y': [4, 3, 1, 2, 3, 6],
'z': ['a', 'b', 'c', 'a', 'b', 'c']
})
dataframes = {'DF_GAPMINDER': DF_GAPMINDER,
'DF_SIMPLE': DF_SIMPLE}
def get_data_object(user_selection):
"""
For user selections, return the relevant in-memory data frame.
"""
return dataframes[user_selection]
app.layout = html.Div([
html.H4('DataTable'),
html.Div(id='dummy', style={'display':'none'}),
html.Label('Report type:', style={'font-weight': 'bold'}),
dcc.Dropdown(
id='field-dropdown',
options=[{'label': df, 'value': df} for df in dataframes],
value='DF_GAPMINDER',
clearable=False
),
dt.DataTable(
# Initialise the rows
rows=[{}],
selected_row_indices=[],
row_selectable=True,
row_single_select=True,
id='table'
),
html.Div(id='selected-indexes')
], className='container')
@app.callback(Output('table', 'rows'), [Input('field-dropdown', 'value')])
def update_table(user_selection):
"""
For user selections, return the relevant table
"""
df = get_data_object(user_selection)
return df.to_dict('records')
@app.callback(Output('dummy', 'title'),
[Input('table', 'selected_row_indices'),
Input('table', 'rows')])
def update_table(user_selection, rows):
print("out: " + str(user_selection))
if len(user_selection) == 1:
print(rows[user_selection[0]])
app.css.append_css({
'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})
if __name__ == '__main__':
app.run_server(debug=True)
Can anyone continue this?
@sammysamx20 this package is obsolete and about to be archived. the current package dash-table
has this option, row_selectable='single'
Here is the code to enable single row select via option
row_single_select
. More information can be found in Issue https://github.com/plotly/dash-table-experiments/issues/15