title: Rendering Datatable from callback function - Dash
body: <p>I am creating a dashboard with multiple tabs and each tab triggers and .py file that renders different elements of plotly objects.</p>
  
  <p>For instance, my callback functions return plots, charts and I am looking to return Datatable.</p>
  
  <p>I am able to do render pandas dataframe with go.Table as shown in the example, but not with DataTable, which is newer and offers an enhanced user experience.</p>
  
  <pre><code>import pandas as pd
  import dash
  from dash.dependencies import Input, Output, State
  import dash_html_components as html
  import dash_core_components as dcc
  import plotly.plotly as py
  from plotly import graph_objs as go
  from plotly.graph_objs import *
  import dash_table
  import flask
  from datetime import datetime as dt
  from app import app
  
  
  layout = html.Div([
  
      html.Div([
  
          dcc.Dropdown(
                  id='select',
                  options=[{'label': i, 'value': i} for i in List],
                  value='abc',
                  placeholder="xyz",
                  style={'width': '100%'}
  
          ), 
  
      ], style={"width": "15%", "margin-left": "20%", "margin-right": "35%"}), 
  
  
      html.Div([
  
          dash_table.DataTable(
  
              id='my-table',
              columns=[{"name": i, "id": i} for i in df_lease.columns],
  
          )
      ])
  ])
  
  
  @app.callback(Output('my-table', 'data'),
                [
                    Input("landlord-select", "value")
                ]
               )
  def render_table(company, market):
  
      df_sub1 = df_lease[(df_lease['Landlord'] == company)] 
  
      df_sub1 = df_sub1[['UnitNo',
                         'Commencement_Date',
                         'Expiration_Date'
                         ]]
  
      return df_sub1.to_dict(orient='records')
  </code></pre>
  
  <p>Expected behavior is to render the pandas dataframe as DataTable. </p>
  
  <p>File structure:</p>
  
  <pre><code>- app.py
  - index.py
  - apps
     |-- __init__.py
     |-- app1.py
     |-- app2.py
  </code></pre>
  
  <p>index.py includes all the code that renders multi-page/tab layout, and the children property of <code>dcc.Tabs</code> is updated as layout object from template file (app1.py) is passed. This is where, I believe, the error is generated from. </p>
  
  <pre><code>app.layout = html.Div([
  
      # tabs
      html.Div([
  
          dcc.Tabs(
              id="tabs",
              style={"height":"60","verticalAlign":"middle"},
              children=[
                   dcc.Tab(label="Marketing", value="marketing_tab"),
                   dcc.Tab(label="Tenants", value="tenants_tab"),
                   dcc.Tab(label="Portfolio", value="portfolio_tab"),
              ],
              value="marketing_tab",
          )
  
          ],
  
          className="row tabs_div"
          ),
  
          # Tab content
          html.Div(id="tab_content", style={"margin": "2% 3%"})
  
  ])
  
  @app.callback(Output("tab_content", "children"),
            [
                Input("tabs", "value")
            ]
           )
  def render_content(tab):
      """
      For user selections, return the relevant tab
      """
      if tab == "marketing_tab":
          return marketing.layout
      elif tab == "tenants_tab":
          return tenants.layout
      elif tab == "portfolio_tab":
          return portfolio.layout
      else:
          return marketing.layout
  
  
      # In[10]:
  
      if __name__ == '__main__':
          app.run_server(debug=True)
  </code></pre>