import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html
import dash_core_components as dcc
import dash_table_experiments as dt
import json
import pandas as pd


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']
})
ROWS = DF_SIMPLE.to_dict('records')

app = dash.Dash()

app.layout = html.Div([
    dt.DataTable(
        rows=ROWS,
        filterable=True,
        id='dt',
        sortColumn='z',
        sortDirection='ASC'
    ),
    html.Div(id='output')
])


@app.callback(Output('output', 'children'), [
    Input('dt', 'filters'),
    Input('dt', 'sortColumn'),
    Input('dt', 'sortDirection'),
])
def display_filters(filters, sort_column, sort_direction):
    return html.Div([
        html.Pre(json.dumps(filters, indent=2)),
        html.Pre(json.dumps(sort_column, indent=2)),
        html.Pre(json.dumps(sort_direction, indent=2))
    ])


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