Create Datatable based on DaterangePicker in a dashboard

I am new to datatable/dashboard. Please help me out in the following scenario:
I want to create a datatable based on the DateRangePicker and a Product list dropdown. On choosing a daterange and product dropdown, in the callback I am executing a query to fetch the record from our internal mysql database and stroing it in a dataframe. Once the data are stored in a dataframe I want to create the sum of total purchase on a date in a particular region and want to bind the value to a datatable. Here the Region is default and it is not from our internal Database. When I change the daterange I want to bind the sale value with this default Region in the first column. Please refer the screenshot and help me out.

What have you tried that you are having problems with?

Thanks for the response
I tried the following code and now I want to bind the default “Region” Value in the first column and then manipulate the data in the dataframe and get the count of totalpurchase for the selected date range and bind it in the datatable.

I dont know how to bind the default Region Value in the first column which is not available in the internal database. Also how to calculate the totalpurchase for the date and bind to the datatable

html.Div([
        html.Div([
            dcc.DatePickerRange(
                id='dateRangePicker',
                min_date_allowed=datetime.date(2011, 1, 1),
                start_date=datetime.date.today() - timedelta(days=5),
                end_date=datetime.date.today(),
            )
        ], style={'float': 'left'}),
        html.Div([
            dcc.Dropdown(
                id="productList",
                style={'height': '48px'},
                options=[
                    {'label': 'All Products', 'value': 'all'},
                    {'label': 'A', 'value': 'a'},
                    {'label': 'B', 'value': 'b'},
                    {'label': 'C', 'value': 'c'},
                    {'label': 'D', 'value': 'd'},
                ],
                value='all'
            )
        ], style={'float': 'left', 'width': '200px', 'padding-left': '10px'})
    ], style={'width': '500px', 'padding-top': '15px', 'padding-left': '10px'}),


    html.Div(id="productData", style={'padding-left': '10px', 'padding-top': '60px', 'width': '98%'})


     @app.callback(Output('productData', 'children'),
              [Input('dateRangePicker', 'start_date'),
                  Input('dateRangePicker', 'end_date')
              ]
              )
def update_output(start_date, end_date):
    Query = pd.read_sql_query(....)

    drRegistrationDF = pd.DataFrame(Query,
                                    columns=['productPurchasedDate', 'product'])

    startDate = datetime.datetime.strptime(start_date, "%Y-%m-%d")
    endDate = datetime.datetime.strptime(end_date, "%Y-%m-%d")

    inBetweenDayCount = endDate - startDate

    dayList = []
    for i in range(inBetweenDayCount.days + 1):
        listDate = startDate + timedelta(days=i)
        dayList.append(datetime.datetime.strftime(listDate, "%b-%d-%Y"))

    output = dt.DataTable(
        id='table',
        data=drRegistrationDF.to_dict('records'),
        columns=[{"name": i, "id": i} for i in dayList],
        style_table={'overflowX': 'scroll'},
    )

    return output

I am also working on similar requirement, where u able to view the data for selected range

Hello @ArunGowda,

Could you please provide your code snippet where you are trying to apply the filters, and we will see if we can point you in the right direction?

app.layout = html.Div(
[

    ######### DISPLAY DATA ##########################

    dcc.DatePickerRange(
    id='date',
    start_date=df['date'].min(),
    end_date=df['date'].max(),
    show_outside_days=True,
    day_size=32,
    display_format='DD/MM/YYYY',
    clearable=True,
    ),

html.Div([
dash_table.DataTable(
id = myid,
editable=False,
sort_action=“native”,
sort_mode=“multi”,
filter_action=‘native’,
page_action=‘native’,
page_current= 0,
page_size=20,
data=df.to_dict(‘records’),
columns=[{‘id’: c, ‘name’: c} for c in df.columns],
style_header={
‘color’: ‘black’,
‘border’: ‘2px solid black’,
‘backgroundColor’: ‘rgb(220, 220, 220)’,
},
style_data={
‘backgroundColor’: ‘rgb(50, 50, 50)’,
‘color’: ‘white’,
‘border’: ‘2px solid black’
},
)
])

]

)

@app.callback(
[Output(‘table’, ‘data’), Output(‘table’, ‘columns’)],
[Input(‘date’, ‘start_date’),
Input(‘date’, ‘end_date’),])

def update_table(start_date, end_date):
if not start_date or not end_date:
raise dash.exceptions.PreventUpdate
elif df.loc[df[“date”].between(pd.to_datetime(start_date), pd.to_datetime(end_date))]:
data=df.to_dict(‘records’)
columns=[{‘id’: c, ‘name’: c} for c in df.columns]
df_tmp = pd.DataFrame()
data=df_tmp.to_dict(‘records’)
columns=
return data, columns

In the layout

1> i have mentioned the datepicker
2> submit button
3> display my dataframe (df)

Update table

I am not able to figure out the mistake in update layout.
as i want to display the data for the selected date range.

can someone plz help

In the future, could you use the </> button when replying with code?

Looking at your code, if looks like you are blanking out the data and columns, is this on purpose?

I would want to display the data for the selected date.
i don’t want to block any data.
plz suggest what i should do better to resolve