# DataTable Dropdowns

The DataTable includes support for per-column and per-cell dropdowns. In future releases, this will be tightly integrated with a more formal typing system.

For now, use the dropdown renderer as a way to limit the options available when editing the values with an editable table.

## DataTable with Per-Column Dropdowns

    using Dash
    using CSV, DataFrames

    app = dash()

    df = DataFrame([
            (climate = "Sunny", temperature = 13, city ="NYC"),
            (climate = "Snowy", temperature = 43, city ="Montreal"),
            (climate = "Sunny", temperature = 50, city ="Miami"),
            (climate = "Rainy", temperature = 30, city ="NYC")
    ])

    app.layout = html_div([
        dash_datatable(
            id="table-dropdown",
            data = Dict.(pairs.(eachrow(df))),
            columns=[Dict("name" =>  i, "id" =>  i, "presentation" =>  "dropdown") for i in names(df)],
            editable=true,
            dropdown=Dict(
                "climate" =>  Dict(
                    "options" =>  [
                        Dict("label" =>  i, "value" =>  i)
                        for i in unique(df[!,"climate"])
                    ]
                ),
                "city" =>  Dict(
                     "options" =>  [
                        Dict("label" =>  i, "value" =>  i)
                        for i in unique(df[!,"city"])
                    ]
                )
            )
        ),
        html_div(id="table-dropdown-container")
    ])

    run_server(app, "0.0.0.0", debug=true)

climate | temperature | city
--- | --- | ---
Sunny Sunny × | 13 | NYC NYC ×
Snowy Snowy × | 43 | Montreal Montreal ×
Sunny Sunny × | 50 | Miami Miami ×
Rainy Rainy × | 30 | NYC NYC ×

## DataTable with Per-Row Dropdowns

    using Dash
    using CSV, DataFrames

    app = dash()

    df = DataFrame([
            (City = "NYC", Neighborhood = "Brooklyn", Temperature  =70),
            (City = "Montreal", Neighborhood = "Mile End", Temperature  =60),
            (City = "Los-Angeles", Neighborhood = "Venice", Temperature  =90)
    ])

    app.layout = html_div([
        dash_datatable(
            id="dropdown_per_row",
            data=Dict.(pairs.(eachrow(df))),
            columns=[
                Dict("id"=> "City", "name"=> "City"),
                Dict("id"=> "Neighborhood", "name"=> "Neighborhood", "presentation"=> "dropdown"),
                Dict("id"=> "Temperature", "name"=> "Temperature")
            ],
            editable=true,
            dropdown_conditional =
            [
                Dict(
                    "if"=> Dict(
                        "column_id"=> "Neighborhood",
                        "filter_query"=> "{City} eq $(string("NYC"))"
                    ),
                    "options"=> [
                        Dict("label"=> i, "value"=> i)
                        for i in [
                            "Brooklyn",
                            "Queens",
                            "Staten Island"
                        ]
                    ]
                ),
                Dict(
                    "if"=> Dict(
                        "column_id"=> "Neighborhood",
                        "filter_query"=> "{City} eq $(string("Montreal"))"
                    ),
                    "options"=> [
                        Dict("label"=> i, "value"=> i)
                        for i in [
                            "Mile End",
                            "Plateau",
                            "Hochelaga"
                        ]
                    ]
                ),
                Dict(
                    "if"=> Dict(
                        "column_id"=> "Neighborhood",
                        "filter_query"=> "{City} eq $(string("Los-Angeles"))"
                    ),
                    "options"=> [
                        Dict("label"=> i, "value"=> i)
                        for i in [
                            "Venice",
                            "Hollywood",
                            "Los Feliz"
                        ]
                    ]
                )
            ]
        ),
        html_div(id="dropdown_per_row_container")
    ])

    run_server(app, "0.0.0.0", debug=true)

City | Neighborhood | Temperature (F)
--- | --- | ---
NYC | Brooklyn Brooklyn × | 70
Montreal | Mile End Mile End × | 60
Los Angeles | Venice Venice × | 90