Separate dcc.Input for Dash_table

Dash Python
1

Dash_table provides the option to select rows inside the table itself.
I would like to make an App in which the date can be selected outside the dash_table, using a simple dcc.Input or eventually a date picker box. The reason is that multiple tables need to change given a single date input by the user. Note by the way that I do not show a date column in the final tables, it is only a variable used in pre-processing to filter data before table display.

I have been able to do this successfully with graphs, which correctly shows the plot for a desired date. I am unfortunately not able to implement this using dash_table. Below is a simplified reproducible example. Any of your suggestions would help me !

import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, Event
import os
import io
import pandas as pd
import plotly.graph_objs as go
from functools import reduce
import json

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config['suppress_callback_exceptions']=True

df = pd.DataFrame({'A': ['2019-01-01', '2019-01-01', '2019-01-02', '2019-01-02', '2019-01-02'], 'B': [2,4,1,4,5], 'C': [2,8,9,10,6]})
df['B'] = df['B'].astype(int)
df['C'] = df['C'].astype(int)


def serve_layout():

    slayout = html.Div([html.H4('Input a date'),
                html.Div([
                    dcc.Input(
                    placeholder='Enter a date...',
                    id='input1',
                    value='2019-01-01'
                    ),
                    ]),


                 html.Div([
                     html.H3("DataFrame"),
                     dash_table.DataTable(
                         id='table',
                         columns=[{"name": i, "id": i, "deletable": True} for i in ['A', 'B', 'C'] ],
                         data = [{}],
                         filtering=True,
                         sorting=True,
                         sorting_type="multi",
                         row_selectable="multi",
                         editable=True,
                         row_deletable=True,
                     ),
                     ])
    ])
    return slayout

@app.callback(
    Output('table', 'value'),
    [Input('input1', 'value')])
def update_table(nvalue):
    ndf = df[df['A'] == nvalue]
    ndf = ndf.to_json(orient='split', date_format='iso')
    table = pd.read_json(ndf)
    return table.to_dict('records')

app.layout = serve_layout

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

Thank you very much in advance for your help!

2

I was trying to solve a similar problem; select by a categorical value in my case.

I ended up solving it by using an HTML table rather than a dash_table. I would really like to know how the dash_table people plan to make their tables work with the dcc.

I also like this concept of app.layout = serve_layout and defining it somewhere else. how did you come to that idea? I haven’t seen that before within the dash docs, but I keep imagining the docs I am seeing are outdated, and no longer the preferred method due to new features that have been developed since the docs were written, but I can’t verify that feeling.

3

I would like to know the same thing as will, how can you do dcc.Input with Dash_Table.

Is there still no information about it?

4

My suggested solution for all types of data using special filters for each type, it also sets the limits of each filter based on the data of the selected column:

This is the same solution used in a simple dashboard for Twitter data:

Hope that helps!