Dash-tabulator get current sorting

Dash Python
1

I am trying to get the sorting of the current table. The dataSorted callback is not used in the dash implementation at this point, so I am trying to implement it myself. But I am not fluid in javascript.

So I added this code in the Python code:


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

options = {"groupBy": "Label", 
           "selectable": True,
           "headerFilterLiveFilterDelay":3000,
           "dataSorted" : ns("dataSorted"),
           }

and in the assets folder I added a file dataSorted.js:

window.myNamespace = Object.assign({}, window.myNamespace, {
    tabulator: {
        dataSorted: function (options, table) {
            console.log("Data was sorted");
            console.log('Table:')
            console.log(table)
            console.log(options)
            // table.props.setProps({"columnMoved": ....})
        }
    }
});

I can see the callback logs in the chrome console. Now I am not sure what is the best way to extract the current ordering. What is also unclear to me is what arguments have to be provided and where those arguments come from. table seems to work and I can see the content of table, as well as the row indices, change when the table is sorted. If anyone has a suggestion on how to implement this and return the indices to the Python function, comments are very welcomed.

Screenshot 2021-01-08 110921

And I can somewhat extract the indeces, but I am not sure how to send them back to the backend.

window.myNamespace = Object.assign({}, window.myNamespace, {
    tabulator: {
        dataSorted: function (sorter, rows) {
            console.log("Data was sorted");
            let rowData = new Array(rows.length);
            rows.forEach(r => rowData.push(r.getData().index));
            console.log(rowData);           
        }
    }
});

>>>(76) [empty × 38, 2, 10, 7, 3, 22, 8, 21, 33, 17, 28, 11, 37, 29, 9, 6, 27, 19, 5, 32, 31, 1, 16, 26, 14, 4, 24, 12, 30, 15, 0, 20, 18, 23, 35, 13, 25, 36, 34]
38: 2
39: 10
40: 7
41: 3
42: 22
43: 8
44: 21
45: 33
46: 17
47: 28
48: 11
49: 37
50: 29
51: 9
52: 6
53: 27
54: 19
55: 5
56: 32
57: 31
58: 1
59: 16
60: 26
61: 14
62: 4
63: 24
64: 12
65: 30
66: 15
67: 0
68: 20
69: 18
70: 23
71: 35
72: 13
73: 25
74: 36
75: 34
length: 76
2

Below is the method I’m using to store the column sizes in local storage so the table remembers the column widths when it re-renders.

In your javascript function you just need to add something like:

table.props.setProps({“sortFinished”: column._column.field+‘:’+column._column.width})

and then have a callback like this:

@app.callback(
Output(‘local’, ‘data’),
Input(‘tabulator’, ‘sortFinished’),
State(‘local’, ‘data’),
prevent_initial_call=True
)
def col_res(value, data):
print(value)
data = data or {}

if ctx.triggered_id == 'tabulator':
    vals = value.split(':')
    data[vals[0]]=vals[1]
    return data
3

Thanks, though I don’t see why this is relevant for my question.