Customized GroupBy

[xanderwallace85]

Hi!

does the library support also customized grouping functions as in the tabulator JS? Or only column names?

[xanderwallace85]

Hi @pjaol ! Can you help me with this, please?

[pjaol]

It shouldn't be too difficult to add PR #11 added the ability to register JS functionality for column formatters
The same could be done for other options like groupBy
Can you provide me a small example of the functionality and I can take a look at how to make it work?

[pjaol]

@xanderwallace85 I've just added Javascript resolution to dash-tabulator options, so if you update it will now be available
The documentation needs a little work but you can now do client side javascript like tabulator js
https://github.com/preftech/dash-tabulator#javascript

Ensure you have

pip install dash_extensions

Create your custom groupBy function in your assets folder based on http://tabulator.info/docs/4.8/group
in the window global name space (replace myNamespace and function key as appropriate)
e.g.

window.myNamespace = Object.assign({}, window.myNamespace, {
    tabulator: {
         groupByGenderAge:function(data, table){
                      //data - the data object for the row being grouped
                      // table - the tabulator table object

                     return data.gender + " - " + data.age; //groups by data and age
          }
    }
});

Within your python code add dash_extensions javascript Namespace and register your custom namespace

from dash_extensions.javascript import Namespace
...
ns = Namespace("myNamespace", "tabulator")

Then as you setup your options

options = { "groupBy": ns("groupByGenderAge", "selectable":"true, .....}

[xanderwallace85]

It shouldn't be too difficult to add PR #11 added the ability to register JS functionality for column formatters
The same could be done for other options like groupBy
Can you provide me a small example of the functionality and I can take a look at how to make it work?

Hi @pjaol ! I have just seen your replies (for some reason I haven't received any notifications :S). Thank you so so much for your precious help! I will follow your suggestion :)

[xanderwallace85]

@xanderwallace85 I've just added Javascript resolution to dash-tabulator options, so if you update it will now be available
The documentation needs a little work but you can now do client side javascript like tabulator js
https://github.com/preftech/dash-tabulator#javascript

Ensure you have

pip install dash_extensions

Create your custom groupBy function in your assets folder based on http://tabulator.info/docs/4.8/group
in the window global name space (replace myNamespace and function key as appropriate)
e.g.

window.myNamespace = Object.assign({}, window.myNamespace, {
    tabulator: {
         groupByGenderAge:function(data, table){
                      //data - the data object for the row being grouped
                      // table - the tabulator table object

                     return data.gender + " - " + data.age; //groups by data and age
          }
    }
});

Within your python code add dash_extensions javascript Namespace and register your custom namespace

from dash_extensions.javascript import Namespace
...
ns = Namespace("myNamespace", "tabulator")

Then as you setup your options

options = { "groupBy": ns("groupByGenderAge", "selectable":"true, .....}

Hi @pjaol ! Have you tried this? I get an error :(

Invalid argument optionspassed into DashTabulator with ID "id_table". Expectedobject. Was supplied type array. Value provided: [ { "selectable": true, "downloadRowRange": "selected", "groupStartOpen": false, "maxHeight": "500px", "groupBy": { "variable": "myNamespace.tabulator.groupbyFun" } } ]

[pjaol]

Maybe missing a ')'

 ns("groupByGenderAge")

[sorenwacker]

Hi there,

did you manage to send the data back to the backend? I have a similar problem.

https://community.plotly.com/t/dash-tabulator-get-current-sorting/48819

Cheers

[pjaol]

To send data back to python

in the JS function use

 table.props.setProps({"dataSorted": xxx}) 

That then make it an input in your python code

@app.callback(
                              [....], # outputs
                              [Input('table-id', 'dataSorted') ]
)
def doStuff(dataSorted) :
....