Black Lives Matter. Please consider donating to Black Girls Code today.

📣 Dash 1.1.0 released

Update: version 1.16 has been released since this was posted.

Dash 1.1.0 is a minor release with features and bug fixes for dash, dash-table and dash-core-components.

Changelogs

Highlights

  • Update to Plotly.js 1.49.0

  • Clearable table columns

  • Hideable table columns

  • Export table content as CSV or XLSX

  • Option to copy over table headers on copy/paste operations outside the table’s browser tab

  • Fixed fixed_columns on Safari

  • Greatly improved behavior for dcc.Input component with type=number

Additional details

  • Hidden table columns
    • The hideable nested prop in columns makes the hide action button visible in the header
    • A table can’t be made to have no column and will prevent hiding the last one
    • hidden_columns contains the list of all the currently hidden columns
    • hidden_columns can be used programatically whether the action buttons are made visible or not

Code examples

This table clears / deletes / hides columns:

import dash
from dash_table import DataTable, FormatTemplate

app = dash.Dash(__name__)

app.layout = DataTable(
        columns=[{
            'name': x,
            'id': x,
            'hideable': True,
            'clearable': True,
            'deletable': True
        } for x in ['a', 'b', 'c', 'd']],
        editable=True,
        include_headers_on_copy_paste=True,
        data=[{
            'a': 'a' + str(x),
            'b': 'b' + str(x) + str(x),
            'c': 'c' + str(x) + 'c',
            'd': 'd' + str(x) + '-' + str(x)
        } for x in range(0,100)]
    )

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

This table allows exporting the content of a filtered & sorted table:

import dash
from dash_table import DataTable, FormatTemplate

app = dash.Dash(__name__)

app.layout = DataTable(
        columns=[{
            'name': x,
            'id': x
        } for x in ['a', 'b', 'c', 'd']],
        export_format='xlsx',
        editable=True,
        filter_action='native',
        sort_action='native',
        data=[{
            'a': 'a' + str(x),
            'b': 'b' + str(x) + str(x),
            'c': 'c' + str(x) + 'c',
            'd': 'd' + str(x) + '-' + str(x)
        } for x in range(0,100)]
    )

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

Using the dcc.Input with type=number, the value in the callback is a number when valid, None when invalid:

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

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        dcc.Input(
            id='dfalse',
            type='number',
            debounce=False,
            value=17,
            min=0,
            max=100,
            step=0.1,
            placeholder='debounce=>False',
        ),
        html.Button(id='fbtn'),
        html.Div(id='out_false', children=''),
        html.Hr(id='bl'),
        dcc.Input(
            id='dtrue',
            type='number',
            debounce=True,
            value=113,
            min=0,
            max=20000,
            placeholder='debounce=>True',
        ),
        html.Button(id='tbtn'),
        html.Div(id='out_true', children=''),
    ]
)

@app.callback(
    [Output('out_false', 'children'), Output('out_true', 'children')],
    [Input('dfalse', 'value'), Input('dtrue', 'value')])
def render(fval, tval):
    print(fval, tval)
    return fval, tval

@app.callback(
    Output('dtrue', 'value'),
    [Input('tbtn', 'n_clicks')]
)
def tclick(n_clicks):
    if n_clicks is None:
        raise exceptions.PreventUpdate

    return 5

@app.callback(
    Output('dfalse', 'value'),
    [Input('fbtn', 'n_clicks')]
)
def fclick(n_clicks):
    if n_clicks is None:
        raise exceptions.PreventUpdate

    return 4


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

Cool, thank you :slight_smile: :slight_smile:

1 Like

Wahoo! Hideable columns are back! :partying_face:

Time to play around with them and see if I can now move my apps to Dash 1.x, expect feedback soon :smiley_cat:

2 Likes

If you had a purely programmatic use case in the past it’s still possible to support it without UI actions if desired through the hidden_columns prop.

2 Likes

the Input [type=number] now follows the MDN specs and has consistent invalid UI behavior across browsers.

here below showed some interesting edge cases like 5e-325, 0.0, 10e10 etc
number-demo

3 Likes

Loving the download data button!

Quick patch just got released, we recommend bumping up to 1.1.1: 📣 Dash v1.1.1 released :heart:

Documentation for the new mapping chart types:
* Alternative base layers: https://plot.ly/python/mapbox-layers/
* densitymapbox: https://plot.ly/python/mapbox-density-heatmaps/
* choroplethmapbox - GeoJSON choropleths: https://plot.ly/python/mapbox-county-choropleth/

1 Like

Documentation for the new table features:
https://dash.plot.ly/datatable/editable

Documentation for the updated dcc.Input (number):
https://dash.plot.ly/dash-core-components/input

2 Likes