Note
Click here to download the full example code
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)