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

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