Expand/Collapse functionality in dash-tabulator

Hi,

Unable to make the dataTree expand/collapse through a click of a button. Below is the code example.

  1. Options property gets updated based on the button click, but it does not reflect in the UI.
  2. But on page reload, it works as expected.

Need help in making Expand/Collapse all rows through button click, but not on whole page refresh.

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_tabulator
from dash.dependencies import Input, Output
import dash_html_components as html
external_scripts = [‘https://oss.sheetjs.com/sheetjs/xlsx.full.min.js’]
app = dash.Dash(
name,
external_stylesheets=[
dbc.themes.BOOTSTRAP,
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”,
],
external_scripts=external_scripts,
suppress_callback_exceptions=True,
meta_tags=[
{“name”: “viewport”, “content”: “width=device-width, initial-scale=1.0”}
],
)

options = {“selectable”:1, “dataTree”: True, “dataTreeElementColumn” : “name”, “dataTreeChildIndent”:“12”, “height” : “400px”}
downloadButtonType = {“css”: “btn btn-primary”, “text”:“Export to Excel”, “type”:“xlsx”, “downloadRowRange”: “all”}
columns = [

        {"title":"ID", "field":"id"},

        {"title": "Name", "field": "name"},

        {"title":"Age", "field":"age"}

    ]

data = [

{"id":1, "name":"Billy Bob", "age":"12", "_children":[
    {"id":2, "name":"Mary May", "age":"1"},
    {"id":3, "name":"Christine Lobowski", "age":"42"},
    {"id":4, "name":"Brendon Philips", "age":"125", "_children":[
        {"id":5, "name":"Margret Marmajuke", "age":"16"},
        {"id":6, "name":"Frank Peoney", "age":"12", "_children":[
            {"id": 11, "name": "Joseph Marx", "age": "20"}
        ]},
    ]},
]},
{"id":7, "name":"Jenny Jane", "age":"1"},
{"id":8, "name":"Martha Tiddly", "age":"42", "_children":[
    {"id":9, "name":"Frasier Franks", "age":"125"},
]},
{"id":10, "name":"Bobby Green", "age":"11"},

];

@app.callback([Output(‘tabulator’, ‘columns’),
Output(‘tabulator’, ‘data’),
Output(‘tabulator’, ‘options’)],
[Input(‘expand’, ‘n_clicks’),
Input(‘collapse’, ‘n_clicks’),
Input(‘interval-component-iu’, ‘n_intervals’)])
def initialize(expbtn, clpsebtn, interval):
changed_id = [p[‘prop_id’] for p in dash.callback_context.triggered][0]
print ("Change id: " + str(changed_id))
if ‘expand’ in changed_id:
options[‘dataTreeStartExpanded’] = True
elif ‘collapse’ in changed_id:
options[‘dataTreeStartExpanded’] = False
return columns, data, options

app.layout = dbc.Container(
[
dbc.Row(
[
dbc.Col(
[
html.Div([
dbc.Button(“Expand All”, color=“primary”, className=“mr-1”, id=“expand”, n_clicks=0),
dbc.Button(“Collapse All”, color=“secondary”, className=“mr-1”, id=“collapse”, n_clicks=0),
]),
dash_tabulator.DashTabulator(
id=‘tabulator’,
theme=‘tabulator_simple’,
data=data,
columns=columns,
options=options,
downloadButtonType=downloadButtonType)
])
]
),
dcc.Interval(
id=‘interval-component-iu’,
interval=1*1000, # in milliseconds
n_intervals=0,
max_intervals=0
)
],
fluid=True
)

if name == “main”:

app.run_server(debug=True, dev_tools_ui=False)

Hi, Can anyone help me on this.

Hi @pmsavano

I might be able to help, but I can’t read your code. Could you please format it by wrapping it in 3 back ticks: :

```

put your code here

```

Thanks. i have added the code within back ticks. Appreciate your help and support.

import dash

import dash_bootstrap_components as dbc

import dash_core_components as dcc

import dash_tabulator

from dash.dependencies import Input, Output

import dash_html_components as html

external_scripts = ['https://oss.sheetjs.com/sheetjs/xlsx.full.min.js']

app = dash.Dash(

    __name__,

    external_stylesheets=[

        dbc.themes.BOOTSTRAP,

        "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css",

    ],

    external_scripts=external_scripts,

    suppress_callback_exceptions=True,

    meta_tags=[

        {"name": "viewport", "content": "width=device-width, initial-scale=1.0"}

    ],

)

options = {"selectable":1, "dataTree": True, "dataTreeElementColumn" : "name", "dataTreeChildIndent":"12", "height" : "400px"}

downloadButtonType = {"css": "btn btn-primary", "text":"Export to Excel", "type":"xlsx", "downloadRowRange": "all"}

columns = [

            {"title":"ID", "field":"id"},

            {"title": "Name", "field": "name"},

            {"title":"Age", "field":"age"}

        ]

data = [

    {"id":1, "name":"Billy Bob", "age":"12", "_children":[

        {"id":2, "name":"Mary May", "age":"1"},

        {"id":3, "name":"Christine Lobowski", "age":"42"},

        {"id":4, "name":"Brendon Philips", "age":"125", "_children":[

            {"id":5, "name":"Margret Marmajuke", "age":"16"},

            {"id":6, "name":"Frank Peoney", "age":"12", "_children":[

                {"id": 11, "name": "Joseph Marx", "age": "20"}

            ]},

        ]},

    ]},

    {"id":7, "name":"Jenny Jane", "age":"1"},

    {"id":8, "name":"Martha Tiddly", "age":"42", "_children":[

        {"id":9, "name":"Frasier Franks", "age":"125"},

    ]},

    {"id":10, "name":"Bobby Green", "age":"11"},

];

@app.callback([Output('tabulator', 'columns'), 

               Output('tabulator', 'data'),

               Output('tabulator', 'options')],

               [Input('expand', 'n_clicks'),

                Input('collapse', 'n_clicks'),

                Input('interval-component-iu', 'n_intervals')])

def initialize(expbtn, clpsebtn, interval):

    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]

    if 'expand' in changed_id:

        options['dataTreeStartExpanded'] = True

    elif 'collapse' in changed_id:

        options['dataTreeStartExpanded'] = False

    return columns, data, options

app.layout = dbc.Container(

    [

        dbc.Row(

            [

                 dbc.Col(

                    [

                        html.Div([

                            dbc.Button("Expand All", color="primary", className="mr-1", id="expand", n_clicks=0),

                            dbc.Button("Collapse All", color="secondary", className="mr-1", id="collapse", n_clicks=0),

                        ]),                   

                        dash_tabulator.DashTabulator(

                                    id='tabulator',

                                    theme='tabulator_simple',

                                    data=data,

                                    columns=columns,

                                    options=options,

                                    downloadButtonType=downloadButtonType)

                    ])

            ]

        ),

        dcc.Interval(

                id='interval-component-iu',

                interval=1*1000, # in milliseconds

                n_intervals=0,

                max_intervals=0

            )

    ],

    fluid=True,

)

if __name__ == "__main__":

    app.run_server(debug=True, dev_tools_ui=False)

Hi @pmsavano

I can reproduce what you describe. If you change the table options, it’s necessary to refresh the screen to see the change.

This does not look like a bug in dash-tabulator. Tabulator does not have an expand/collapse all function, and it appears that it does not support changing the options once the table has been initialized. See: Tabulator FAQ

I found some workarounds here that would require some JavaScript. That’s as far as I got – best to double check with the experts @pjaol or @Emil on this one.