Black Lives Matter. Please consider donating to Black Girls Code today.

Separate dcc.Input for Dash_table

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!

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.

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?

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!