title: Creating a drop down menu in dash to filter by a column
body: <p>Using the example from dash, how can i filter on one columns value (in this case countries) to create a drop down list to filter by that column. I want it such that when i filter on a country the graphs also update. Any ideas?</p>
  
  <pre><code>import pyodbc 
  import plotly
  from plotly.offline import *
  import plotly.graph_objs as go
  from plotly import __version__
  from plotly.graph_objs import Scatter
  import dash
  import dash_core_components as dcc
  import dash_html_components as html
  import dash_table
  from werkzeug.wsgi import DispatcherMiddleware
  from werkzeug.serving import run_simple
  import pandas as pd
  import numpy as np
  from dash.dependencies import Input, Output
  import itertools
  #import ccxt
  import json
  import datetime as dt 
  
  df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
  
  app = dash.Dash(__name__)
  
  app.layout = html.Div([
      dash_table.DataTable(
          id='datatable-interactivity',
          columns=[
              {"name": i, "id": i, "deletable": True, "selectable": True} for i in df.columns
          ],
          data=df.to_dict('records'),
          editable=True,
          filter_action="native",
          sort_action="native",
          sort_mode="multi",
          column_selectable="single",
          row_selectable="multi",
          row_deletable=True,
          selected_columns=[],
          selected_rows=[],
          page_action="native",
          page_current= 0,
          page_size= 10,
      ),
      html.Div(id='datatable-interactivity-container')
  ])
  
  @app.callback(
      Output('datatable-interactivity', 'style_data_conditional'),
      [Input('datatable-interactivity', 'selected_columns')]
  )
  def update_styles(selected_columns):
      return [{
          'if': { 'column_id': i },
          'background_color': '#D2F3FF'
      } for i in selected_columns]
  
  @app.callback(
      Output('datatable-interactivity-container', "children"),
      [Input('datatable-interactivity', "derived_virtual_data"),
       Input('datatable-interactivity', "derived_virtual_selected_rows")])
  def update_graphs(rows, derived_virtual_selected_rows):
  
      if derived_virtual_selected_rows is None:
          derived_virtual_selected_rows = []
  
      dff = df if rows is None else pd.DataFrame(rows)
      print(derived_virtual_selected_rows )
      colors = ['#7FDBFF' if i in derived_virtual_selected_rows else '#0074D9'
                for i in range(len(dff))]
  
      return [
          dcc.Graph(
              id=column,
              figure={
                  "data": [
                      {
                          "x": dff["country"],
                          "y": dff[column],
                          "type": "bar",
                          "marker": {"color": colors},
                      }
                  ],
                  "layout": {
                      "xaxis": {"automargin": True},
                      "yaxis": {
                          "automargin": True,
                          "title": {"text": column}
                      },
                      "height": 250,
                      "margin": {"t": 10, "l": 10, "r": 10},
                  },
              },
          )
          # check if column exists - user may have deleted it
          # If `column.deletable=False`, then you don't
          # need to do this check.
          for column in ["pop", "lifeExp", "gdpPercap"] if column in dff
      ]
  
  
  if __name__ == '__main__':
      app.run_server(debug=False,ssl_context='adhoc')
  </code></pre>
  
  <p>Not sure how I can edit this, unless somebody has some documentation on how i can create this drop down</p>