30. Dash Table app

This script creates a Dash web application that demonstrates the interactive capabilities of the dash_table.DataTable component. The application features a table that is fully editable, allowing users to modify cell values directly. Users can also dynamically add new rows with a button click and add new, named columns using an input field.

The core feature of this example is the real-time link between the data table a nd a dcc.Graph component. Any modification to the table’s data or structure—such as adding a row, deleting a column, or editing a cell’s value—automatically triggers an update to a heatmap below. This provides an immediate visual representation of the table’s data, showcasing how to build a fully interactive dashboard where data manipulation and visualization are seamlessly connected.

Note

Open your browser and go to http://127.0.0.1:8050

 22 # sphinx_gallery_thumbnail_path = '_static/images/thumbnails/thumbnail-plotly-main30-dash-table.png'
 23
 24 # Libraries
 25 import dash
 26 from dash.dependencies import Input, Output, State
 27 from dash import dash_table
 28 from dash import dcc
 29 from dash import html
 30
 31 try:
 32     __file__
 33     TERMINAL = True
 34 except:
 35     TERMINAL = False
 36
 37 # Create app
 38 app = dash.Dash('table-app')
 39
 40 # Define layout
 41 app.layout = html.Div([
 42     html.Div([
 43         dcc.Input(
 44             id='adding-rows-name',
 45             placeholder='Enter a column name...',
 46             value='',
 47             style={'padding': 10}
 48         ),
 49         html.Button('Add Column', id='adding-rows-button', n_clicks=0)
 50     ], style={'height': 50}),
 51
 52     dash_table.DataTable(
 53         id='adding-rows-table',
 54         columns=[{
 55             'name': 'Column {}'.format(i),
 56             'id': 'column-{}'.format(i),
 57             'deletable': True,
 58             'renamable': True
 59         } for i in range(1, 5)],
 60         data=[
 61             {'column-{}'.format(i): (j + (i-1)*5) for i in range(1, 5)}
 62             for j in range(5)
 63         ],
 64         editable=True,
 65         row_deletable=True
 66     ),
 67
 68     html.Button('Add Row', id='editing-rows-button', n_clicks=0),
 69
 70     dcc.Graph(id='adding-rows-graph')
 71 ])
 72
 73
 74 @app.callback(
 75     Output('adding-rows-table', 'data'),
 76     Input('editing-rows-button', 'n_clicks'),
 77     State('adding-rows-table', 'data'),
 78     State('adding-rows-table', 'columns'))
 79 def add_row(n_clicks, rows, columns):
 80     if n_clicks > 0:
 81         rows.append({c['id']: '' for c in columns})
 82     return rows
 83
 84
 85 @app.callback(
 86     Output('adding-rows-table', 'columns'),
 87     Input('adding-rows-button', 'n_clicks'),
 88     State('adding-rows-name', 'value'),
 89     State('adding-rows-table', 'columns'))
 90 def update_columns(n_clicks, value, existing_columns):
 91     if n_clicks > 0:
 92         existing_columns.append({
 93             'id': value, 'name': value,
 94             'renamable': True, 'deletable': True
 95         })
 96     return existing_columns
 97
 98
 99 @app.callback(
100     Output('adding-rows-graph', 'figure'),
101     Input('adding-rows-table', 'data'),
102     Input('adding-rows-table', 'columns'))
103 def display_output(rows, columns):
104     return {
105         'data': [{
106             'type': 'heatmap',
107             'z': [[row.get(c['id'], None) for c in columns] for row in rows],
108             'x': [c['name'] for c in columns]
109         }]
110     }
111
112
113 if __name__ == '__main__':
114
115     if TERMINAL:
116         app.run_server(debug=True)

Total running time of the script: ( 0 minutes 0.342 seconds)

Gallery generated by Sphinx-Gallery