plotly / dash-table-experiments

NO LONGER SUPPORTED - use https://github.com/plotly/dash-table instead
MIT License
174 stars 57 forks source link

added option to enable single row select #66

Closed doccray closed 5 years ago

doccray commented 6 years ago

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

Harsha-Nori commented 6 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.

edwardreed81 commented 6 years ago

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...

doccray commented 6 years ago

Hi! here are the steps to install the fork:

  1. git clone https://github.com/doccray/dash-table-experiments.git
  2. cd dash-table-experiments
  3. npm i (download JavaScript dependencies)
  4. npm run build-local (generate bundle.js)
  5. 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.

doccray commented 6 years ago

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)
sammysamx20 commented 5 years ago

Can anyone continue this?

alexcjohnson commented 5 years ago

@sammysamx20 this package is obsolete and about to be archived. the current package dash-table has this option, row_selectable='single'