import sd_data_table
import dash
import dash.dependencies
import dash_html_components as html

app = dash.Dash('')

app.scripts.config.serve_locally = True

app.layout = html.Div([
    sd_data_table.SDDataTable(
        id='input',
        data=[
            {'x': 1, 'y': {'label': 'Test 1', 'value': 2}, 'z': 'Test'},
            {'x': 2, 'y': {'label': 'Test 3', 'value': 5}, 'z': 'Other'},
            {'x': 3, 'y': {'label': 'Test 2', 'value': 7}, 'z': 'Other 1'},
            {'x': 4, 'y': {'label': 'Test 4', 'value': 1}, 'z': 'Other 2'},
        ],
        style=dict(height=400),
        columns=[
            {'header': 'Yay!', 'isMultilevel': True, 'columns': [
                {'col': 'x', 'formatter': ',.2%'},
                {'col': 'y', 'formatter': '/dash?id={}', 'header': 'Y', 'isLink': True, 'refreshLink': True}
            ]}, {'col': 'z'}],
        rowsSelectable=True,
        rowsSelected=[],
        maxNumberChecked=2,
        filterable=True,
        colIndex='y'),
    html.Div(id='output')
])


@app.callback(
    dash.dependencies.Output('output', 'children'),
    inputs=[dash.dependencies.Input('input', 'rowsSelected')])
def update_output(rows) -> str:
    return ','.join(str(r) for r in rows)


app.css.append_css(
    stylesheet={'external_url': 'https://unpkg.com/react-table@latest/react-table.css'})


if __name__ == '__main__':
    app.run_server(debug=True)