.. DO NOT EDIT.
.. THIS FILE WAS AUTOMATICALLY GENERATED BY SPHINX-GALLERY.
.. TO MAKE CHANGES, EDIT THE SOURCE PYTHON FILE:
.. "_examples/plotly/plot_main30_dash_table.py"
.. LINE NUMBERS ARE GIVEN BELOW.

.. only:: html

    .. note::
        :class: sphx-glr-download-link-note

        Click :ref:`here <sphx_glr_download__examples_plotly_plot_main30_dash_table.py>`
        to download the full example code

.. rst-class:: sphx-glr-example-title

.. _sphx_glr__examples_plotly_plot_main30_dash_table.py:


30. Dash Table
====================

.. note:: https://plotly.com/python/2d-histogram-contour/

.. GENERATED FROM PYTHON SOURCE LINES 8-92




.. rst-class:: sphx-glr-script-out

 Out:

 .. code-block:: none


    "\napp = dash.Dash(__name__)\n\napp.layout = html.Div([\n    html.Div([\n        dcc.Input(\n            id='adding-rows-name',\n            placeholder='Enter a column name...',\n            value='',\n            style={'padding': 10}\n        ),\n        html.Button('Add Column', id='adding-rows-button', n_clicks=0)\n    ], style={'height': 50}),\n\n    dash_table.DataTable(\n        id='adding-rows-table',\n        columns=[{\n            'name': 'Column {}'.format(i),\n            'id': 'column-{}'.format(i),\n            'deletable': True,\n            'renamable': True\n        } for i in range(1, 5)],\n        data=[\n            {'column-{}'.format(i): (j + (i-1)*5) for i in range(1, 5)}\n            for j in range(5)\n        ],\n        editable=True,\n        row_deletable=True\n    ),\n\n    html.Button('Add Row', id='editing-rows-button', n_clicks=0),\n\n    dcc.Graph(id='adding-rows-graph')\n])\n\n\n@app.callback(\n    Output('adding-rows-table', 'data'),\n    Input('editing-rows-button', 'n_clicks'),\n    State('adding-rows-table', 'data'),\n    State('adding-rows-table', 'columns'))\ndef add_row(n_clicks, rows, columns):\n    if n_clicks > 0:\n        rows.append({c['id']: '' for c in columns})\n    return rows\n\n\n@app.callback(\n    Output('adding-rows-table', 'columns'),\n    Input('adding-rows-button', 'n_clicks'),\n    State('adding-rows-name', 'value'),\n    State('adding-rows-table', 'columns'))\ndef update_columns(n_clicks, value, existing_columns):\n    if n_clicks > 0:\n        existing_columns.append({\n            'id': value, 'name': value,\n            'renamable': True, 'deletable': True\n        })\n    return existing_columns\n\n\n@app.callback(\n    Output('adding-rows-graph', 'figure'),\n    Input('adding-rows-table', 'data'),\n    Input('adding-rows-table', 'columns'))\ndef display_output(rows, columns):\n    return {\n        'data': [{\n            'type': 'heatmap',\n            'z': [[row.get(c['id'], None) for c in columns] for row in rows],\n            'x': [c['name'] for c in columns]\n        }]\n    }\n\n\nif __name__ == '__main__':\n    app.run_server(debug=True)\n"





|

.. code-block:: default
   :lineno-start: 9


    import dash
    from dash.dependencies import Input, Output, State
    import dash_table
    import dash_core_components as dcc
    import dash_html_components as html

    """
    app = dash.Dash(__name__)

    app.layout = html.Div([
        html.Div([
            dcc.Input(
                id='adding-rows-name',
                placeholder='Enter a column name...',
                value='',
                style={'padding': 10}
            ),
            html.Button('Add Column', id='adding-rows-button', n_clicks=0)
        ], style={'height': 50}),

        dash_table.DataTable(
            id='adding-rows-table',
            columns=[{
                'name': 'Column {}'.format(i),
                'id': 'column-{}'.format(i),
                'deletable': True,
                'renamable': True
            } for i in range(1, 5)],
            data=[
                {'column-{}'.format(i): (j + (i-1)*5) for i in range(1, 5)}
                for j in range(5)
            ],
            editable=True,
            row_deletable=True
        ),

        html.Button('Add Row', id='editing-rows-button', n_clicks=0),

        dcc.Graph(id='adding-rows-graph')
    ])


    @app.callback(
        Output('adding-rows-table', 'data'),
        Input('editing-rows-button', 'n_clicks'),
        State('adding-rows-table', 'data'),
        State('adding-rows-table', 'columns'))
    def add_row(n_clicks, rows, columns):
        if n_clicks > 0:
            rows.append({c['id']: '' for c in columns})
        return rows


    @app.callback(
        Output('adding-rows-table', 'columns'),
        Input('adding-rows-button', 'n_clicks'),
        State('adding-rows-name', 'value'),
        State('adding-rows-table', 'columns'))
    def update_columns(n_clicks, value, existing_columns):
        if n_clicks > 0:
            existing_columns.append({
                'id': value, 'name': value,
                'renamable': True, 'deletable': True
            })
        return existing_columns


    @app.callback(
        Output('adding-rows-graph', 'figure'),
        Input('adding-rows-table', 'data'),
        Input('adding-rows-table', 'columns'))
    def display_output(rows, columns):
        return {
            'data': [{
                'type': 'heatmap',
                'z': [[row.get(c['id'], None) for c in columns] for row in rows],
                'x': [c['name'] for c in columns]
            }]
        }


    if __name__ == '__main__':
        app.run_server(debug=True)
    """

.. rst-class:: sphx-glr-timing

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


.. _sphx_glr_download__examples_plotly_plot_main30_dash_table.py:


.. only :: html

 .. container:: sphx-glr-footer
    :class: sphx-glr-footer-example



  .. container:: sphx-glr-download sphx-glr-download-python

     :download:`Download Python source code: plot_main30_dash_table.py <plot_main30_dash_table.py>`



  .. container:: sphx-glr-download sphx-glr-download-jupyter

     :download:`Download Jupyter notebook: plot_main30_dash_table.ipynb <plot_main30_dash_table.ipynb>`


.. only:: html

 .. rst-class:: sphx-glr-signature

    `Gallery generated by Sphinx-Gallery <https://sphinx-gallery.github.io>`_