# Link/button in dash\_table.DataTable

**URL:** <https://community.plotly.com/t/link-button-in-dash-table-datatable/70651>\
**Category:** Dash Python\
**Created:** [December 8, 2022, 8:45am UTC](https://community.plotly.com/t/link-button-in-dash-table-datatable/70651 "2022-12-08T08:45:27Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![beginof](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/beginof/32/19813_2.png) [@beginof](https://community.plotly.com/u/beginof)\
**Post date:** [December 8, 2022, 8:45am UTC](https://community.plotly.com/t/link-button-in-dash-table-datatable/70651/1 "2022-12-08T08:45:27Z")

</div>

Hi,

Is it possible to create a own link or button to attach in the dash\_table.DataTable?  
The link or button has able to get the date (as per the below function) and the date received should able to update back to existing database column.

workflow that needed:  
link/button in table \> user click it \> get date \> date received will update back to database \> table show

**function that work to get the date:**

```auto
today = datetime.now()

if today.hour > 15:
    today = today + timedelta(days=1)

today = today.date()

```

  

(original) df:

| Customer | Product | Sale reference | Sale Date | Payment Date |
| --- | --- | --- | --- | --- |
| Customer 123 | Clothes | sale001 | 08/11/2022 | |
| Customer ABC | Laptop | sale002 | 08/11/2022 | |

  

(original) dash\_table.DataTable:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/2/d/2d77bc58c4e5b7a5b90db34f1d7fd730c6b8415a.png)

Action: user will click the ‘Make payment’ \>  
  
  
  
  
  
(expected output) df:

| Customer | Product | Sale reference | Sale Date | Payment Date |
| --- | --- | --- | --- | --- |
| Customer 123 | Clothes | sale001 | 08/11/2022 | 09/12/2022 |
| Customer ABC | Laptop | sale002 | 08/11/2022 | 09/12/2022 |

  

(expected output) dash\_table.DataTable:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/e/4/e4a93a2b344ad1e0b15d7654c89d5afd12d3f426.png)

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [December 8, 2022, 1:14pm UTC](https://community.plotly.com/t/link-button-in-dash-table-datatable/70651/2 "2022-12-08T13:14:54Z")

</div>

Yes, this is possible. Albeit with some custom JavaScript.

To work, we need to have a hidden button in the layout that will act as the trigger to update the info in the background.

Then add an event listener to the specific cell that you want to make the payment on.

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [December 8, 2022, 7:51pm UTC](https://community.plotly.com/t/link-button-in-dash-table-datatable/70651/3 "2022-12-08T19:51:14Z")

</div>

Maybe interesting in this context:

> [@Button inside a Dash Table](https://community.plotly.com/t/button-inside-a-dash-table/51460/4):
>
> Thanks Chris !! I needed something like this to my app and I asked on Friday to the Dash data table Master (@AnnMarieW) and one day after we found this simple (and interesting) solution. smiley

---

<div class="post-metadata">

**Author:** ![beginof](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/beginof/32/19813_2.png) [@beginof](https://community.plotly.com/u/beginof)\
**Post date:** [December 9, 2022, 2:13am UTC](https://community.plotly.com/t/link-button-in-dash-table-datatable/70651/4 "2022-12-09T02:13:39Z")

</div>

Hi @jinnyzor,

Can you share some guide how to do this?

---

<div class="post-metadata">

**Author:** ![beginof](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/beginof/32/19813_2.png) [@beginof](https://community.plotly.com/u/beginof)\
**Post date:** [December 9, 2022, 2:44am UTC](https://community.plotly.com/t/link-button-in-dash-table-datatable/70651/5 "2022-12-09T02:44:19Z")

</div>

here is the code that currently I use to display the table without the function:

```auto
customer = list(df['Customer'].unique()) 

app.layout = dbc.Container([    
    dbc.Row([
        dbc.Col(html.H1("2nd page",
                        className = 'text-center text-primary, mb-4 '
                        ,style={"textDecoration":"underline",'font-weight': 'bold'}),
                width=12
                ),
      
        ]),
    html.Br(),
    html.Br(),
    
    
    dbc.Row([
       dbc.Col([
           html.H3('Customer'
                    ,style={'font-size': '25px'}
                   ),
           
           ], width=3, md=4),
       
       dbc.Col([            
           dcc.Dropdown(id='customer_dd', value= '',
                          options = [{'label':x, 'value':x} 
                                    for x in customer],
                          
                          searchable = True, search_value='',
                          placeholder= 'Please select ...',
                          clearable= True
                          ),
           html.Br(),
           
           ], width=3, md=4),    
       
       
       ]),
    html.Br(),
    
    dbc.Row([       
        dbc.Col([            
            html.H3('Sale Date from'
                    ,style={'font-size': '25px'}
                    ),
            
            ], width=3, md=4),
    
        dbc.Col([            
            dcc.Dropdown(id='date_from', value= '',                         
                          searchable = True, search_value='',
                          placeholder= 'Please select ...',
                          clearable=True
                          
                          ),
            html.Br(),
            
            ], width=3, md=4),
        ],),
    html.Br(),
    
    
    dbc.Row([ 
        dbc.Col([            
            html.H3('Sale Date to'
                    ,style={'font-size': '25px'}
                    ),
            
            ], width=3, md=4),
        
        dbc.Col([            
            dcc.Dropdown(id='date_to', value= '',                         
                          searchable = True, search_value='',
                          placeholder= 'Please select ...',
                          clearable=True
                          
                          ),
                       
            html.Br(),
            
            ], width=3, md=4),

        ], ), 
    html.Br(),
    
    
    
    
    
    dbc.Row([
        dbc.Col([
            html.P("Table:",
                    style={"textDecoration":"underline"}),
            
                                    
            dash_table.DataTable(id='tabledetail', 
                                    columns=[
                                        {'name': 'Customer', "id": 'Customer'},
                                        {'name': 'Product', "id": 'Product'},
                                        {'name': 'Sale Reference', "id": 'Sale Reference'},
                                        {'name': 'Status', "id": 'header'},
                                        {'name': 'Date', "id": 'info'},
                                        {'name': 'Action', "id": 'action',},
                                        # {'name': 'Action', "id": 'action','type':'text', 'presentation':'markdown'},
                                        {'name': 'Reference', "id": 'reference'},

                                            ],
                                editable=False,    
                                style_cell={'textAlign': 'left'},
                                active_cell = {"row": 0, "column": 0, "column_id": "Merchant ID", "row_id": 0}
                                
                                  ),

                ]),
            ]),
          
    
])

@app.callback(
    Output('date_from','options'),
    Input('customer_dd', 'value')
    )

def update_dd (merchant_dd):
       
    
    date = df.drop_duplicates(['Sale Date'], inplace= False)
    
    relevant_date = date[df['Customer'] == merchant_dd]['Sale Date'].values.tolist()

    date_option= [dict(label=x,value=x)for x in relevant_date]
    
    
    return date_option

@app.callback(
    Output('date_to','options'),
    Input('customer_dd', 'value')
    )

def update_dd (merchant_dd):
       
    date = df.drop_duplicates(['Sale Date'], inplace= False)
    
    relevant_date = date[df['Customer'] == merchant_dd]['Sale Date'].values.tolist()

    date_option= [dict(label=x,value=x)for x in relevant_date]
    
    
    return date_option

@app.callback(
    Output('tabledetail', 'data'), 
    Input('customer', 'value'),
    Input('date_from', 'value'),
    Input('date_to', 'value')
    )

def update_table(selection, datefr, dateto):
    if len (selection) == 0:
        return dash.no_update
    
    else:  
        dff = df[df['Customer'] == selection]

        daterange = dff[(dff['Sale Date']>=datefr) 
                            & (dff['Sale Date']<=dateto)
                            ]
 
        
        transpose = (daterange.set_index(['Customer', 'Product', 'Sale Reference']).rename_axis(columns='header')
                          .stack(dropna=False).reset_index(name='info')
                          )
        
        
        info = transpose

        info['ref_info'] = info['info'].fillna('No')
        info = info[info['ref_info'] !='No' ]
        
        #######
        
       # today = datetime.now()

       # if today.hour > 15:
       # today = today + timedelta(days=1)
        
       # today = today.date()
        
        #######
        
        tr1 = info[info['header'].str.contains(pat = 'Sale Date', regex = True)]
        tr1['action'] = 'Make Payment'

        
        tr2 = info[info['header'].str.contains(pat = 'Payment Date', regex = True)]
        tr2['reference'] = 'user id & time'
        
        
        final_df1 = pd.merge(left = info ,right = tr1, how="left", left_on=[
            'Customer', 'Product', 'Sale Reference', 'header', 'info','ref_info'], right_on=[
                'Customer', 'Product', 'Sale Reference','header', 'info','ref_info']).fillna('')
        
        final_df2 = pd.merge(left = final_df1 ,right = tr2, how="left", left_on=[
            'Customer', 'Product', 'Sale Reference', 'header', 'info','ref_info'], right_on=[
                'Customer', 'Product', 'Sale Reference','header', 'info','ref_info']).fillna('')

        
        
        columns = final_df2[['Customer', 'Product', 'Sale Reference', 'header','info', 'action','reference']]

        data= columns.to_dict('records')

       
        return data

```

---

<div class="post-metadata">

**Author:** ![beginof](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/beginof/32/19813_2.png) [@beginof](https://community.plotly.com/u/beginof)\
**Post date:** [December 13, 2022, 1:08am UTC](https://community.plotly.com/t/link-button-in-dash-table-datatable/70651/6 "2022-12-13T01:08:38Z")

</div>

HI @AIMPED,

Can the active cell only for specified data in the specified column and row?

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [December 13, 2022, 8:19am UTC](https://community.plotly.com/t/link-button-in-dash-table-datatable/70651/7 "2022-12-13T08:19:42Z")

</div>

HI @beginof , I am sorry, I don’t understand your question.

---

<div class="post-metadata">

**Author:** ![beginof](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/beginof/32/19813_2.png) [@beginof](https://community.plotly.com/u/beginof)\
**Post date:** [December 13, 2022, 8:46am UTC](https://community.plotly.com/t/link-button-in-dash-table-datatable/70651/8 "2022-12-13T08:46:25Z")

</div>

Hi @AIMPED,

for example, only the ‘make payment’ in the action is the active cell or able to click in the table.

| Customer | Product | Sale reference | Status | Date | Action |
| --- | --- | --- | --- | --- | --- |
| Customer 123 | Clothes | sale001 | Sale date | 08/11/2022 | Make payment |
| Customer 123 | Clothes | sale no 123 | Payment date | 09/11/2022 | Paid |

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [December 13, 2022, 9:16am UTC](https://community.plotly.com/t/link-button-in-dash-table-datatable/70651/9 "2022-12-13T09:16:20Z")

</div>

Taking @adamschroeder’s example:

> <https://github.com/Coding-with-Adam/Dash-by-Plotly/blob/master/DataTable/Sort-filter-select/selecting.py>

You can restrict the action of “active\_cell” to whatever columns/cells you want. If you wanted to restrict the graph showing up to `Angola` only, you could do something like that:

```python
    if country == 'Angola':
        fig = px.line(
            df[df["country"] == country], x="year", y=y, title=" ".join([country, y])
        )
        fig.update_layout(title={"font_size": 20}, title_x=0.5, margin=dict(t=190, r=15, l=5, b=5))
        fig.update_traces(line=dict(color=color[y]))

        return dcc.Graph(figure=fig)
    return []

```

Basically wrapping lines 59-65 of the original code in an if- statement.