Determine which column(s) were sorted in DataTable JavaScript

I have a Bokeh app using standalone flask. I send ajax requests to update the data source after selections are made. If I sort, then make a selection, then update the DataSource, the connected DataTable is no longer sorted. I understand why this is, what I'd like to be able to do, is to send in my ajax request which column[s], if any, were sorted and whether it is ascending/descending. I can then sort the DataFrame in the flask app before sending the updated data. So this is why I'd like to determine which columns have been sorted in a DataTable.

Welcome to other suggestions as well.

Thanks,
Justin

Is your question how to programatically specify the sort order on DataTable?

If yes, then I’m not sure. But here’s my first take:

Having looked at the API docs - https://bokeh.pydata.org/en/latest/docs/reference/models/widgets.tables.html#bokeh.models.widgets.tables.TableColumn - I don’t think this is possible.

I think you would need to write some JavaScript to simulate the front-end click that does sorting. That would need to get triggered after the selection update.

Hopefully someone else has a better answer.

···

On Wednesday, November 7, 2018 at 8:40:15 AM UTC-6, Justin Griffiths wrote:

I have a Bokeh app using standalone flask. I send ajax requests to update the data source after selections are made. If I sort, then make a selection, then update the DataSource, the connected DataTable is no longer sorted. I understand why this is, what I’d like to be able to do, is to send in my ajax request which column[s], if any, were sorted and whether it is ascending/descending. I can then sort the DataFrame in the flask app before sending the updated data. So this is why I’d like to determine which columns have been sorted in a DataTable.

Welcome to other suggestions as well.

Thanks,

Justin

Hi Sarah,

Thanks for the reply. If I sort a datatable by clicking on the column header, then I can visually see that the table has been sorted by that column. I see an arrow point up or down. So my question is, how can I programmatically determine whether a column has been sorted or not? Motivation is that I sort the table, make a selection using another widget, trigger a callback, send updated data to the app using ajax. Now the column data source has changed, and the table is no longer sorted.

I get this, it make sense. So what I would like to do is to send in the ajax request whether a column(s) has been sorted or not. Then on the server side, I can be sure to send over new data that is already presorted. So technically the table would no longer have the sort triggered, but it would also be unnecessary.

So, there is an arrow on the column header, shouldn’t I be able to detect this by inspecting the datatable object?

Thanks,

Justin

···

On Sunday, November 11, 2018 at 7:51:12 AM UTC-6, Sarah Bird wrote:

Is your question how to programatically specify the sort order on DataTable?

If yes, then I’m not sure. But here’s my first take:

Having looked at the API docs - https://bokeh.pydata.org/en/latest/docs/reference/models/widgets.tables.html#bokeh.models.widgets.tables.TableColumn - I don’t think this is possible.

I think you would need to write some JavaScript to simulate the front-end click that does sorting. That would need to get triggered after the selection update.

Hopefully someone else has a better answer.

On Wednesday, November 7, 2018 at 8:40:15 AM UTC-6, Justin Griffiths wrote:

I have a Bokeh app using standalone flask. I send ajax requests to update the data source after selections are made. If I sort, then make a selection, then update the DataSource, the connected DataTable is no longer sorted. I understand why this is, what I’d like to be able to do, is to send in my ajax request which column[s], if any, were sorted and whether it is ascending/descending. I can then sort the DataFrame in the flask app before sending the updated data. So this is why I’d like to determine which columns have been sorted in a DataTable.

Welcome to other suggestions as well.

Thanks,

Justin

Hi, totally understand your use case.

So, there is an arrow on the column header, shouldn’t I be able to detect this by inspecting the datatable object?

Not necessarily, we have put a wrapper around SlickGrid (which we also have forked GitHub - bokeh/SlickGrid: A lightning fast JavaScript grid/spreadsheet). We haven’t necessarily coded up a wrapper that includes all properties.

Here’s the code: https://github.com/bokeh/bokeh/blob/master/bokehjs/src/lib/models/widgets/tables/table_column.ts

I don’t know if SlickGrid exposes the property you’re after. If it does, then this would be a small PR and I agree with your use case and so I think this would be a nice addition to bokeh.

In the meantime though. As you said you can see the arrow, so you should be able to read something out of the DOM using JS manually. Sorry this isn’t the answer you want.

···

On Wednesday, November 14, 2018 at 10:35:05 AM UTC-6, Justin Griffiths wrote:

Hi Sarah,

Thanks for the reply. If I sort a datatable by clicking on the column header, then I can visually see that the table has been sorted by that column. I see an arrow point up or down. So my question is, how can I programmatically determine whether a column has been sorted or not? Motivation is that I sort the table, make a selection using another widget, trigger a callback, send updated data to the app using ajax. Now the column data source has changed, and the table is no longer sorted.

I get this, it make sense. So what I would like to do is to send in the ajax request whether a column(s) has been sorted or not. Then on the server side, I can be sure to send over new data that is already presorted. So technically the table would no longer have the sort triggered, but it would also be unnecessary.

So, there is an arrow on the column header, shouldn’t I be able to detect this by inspecting the datatable object?

Thanks,

Justin

On Sunday, November 11, 2018 at 7:51:12 AM UTC-6, Sarah Bird wrote:

Is your question how to programatically specify the sort order on DataTable?

If yes, then I’m not sure. But here’s my first take:

Having looked at the API docs - https://bokeh.pydata.org/en/latest/docs/reference/models/widgets.tables.html#bokeh.models.widgets.tables.TableColumn - I don’t think this is possible.

I think you would need to write some JavaScript to simulate the front-end click that does sorting. That would need to get triggered after the selection update.

Hopefully someone else has a better answer.

On Wednesday, November 7, 2018 at 8:40:15 AM UTC-6, Justin Griffiths wrote:

I have a Bokeh app using standalone flask. I send ajax requests to update the data source after selections are made. If I sort, then make a selection, then update the DataSource, the connected DataTable is no longer sorted. I understand why this is, what I’d like to be able to do, is to send in my ajax request which column[s], if any, were sorted and whether it is ascending/descending. I can then sort the DataFrame in the flask app before sending the updated data. So this is why I’d like to determine which columns have been sorted in a DataTable.

Welcome to other suggestions as well.

Thanks,

Justin

Thanks a lot Sarah!

I’ll take a look at the links.

Justin

···

Justin Griffiths

Hi Sarah,

Perhaps here:

https://github.com/bokeh/bokeh/blob/master/bokehjs/src/lib/models/widgets/tables/data_table.ts

Line 129

DataTable->DataTableView->grid->getSortColumns

I tested in the js console here:

https://mleibman.github.io/SlickGrid/examples/example-multi-column-sort.html

grid.getSortColumns()

Gives me sort column name and direction.

Would a change in bokeh need to be made in order to expose this on the DataTable? Not a js expert. Seems that the grid is private to the view, so my guess is no? or not easy?

If you want I can make the request on github

Thanks,

Justin

···

Justin Griffiths

Hi,

Definitely open a github issue to discuss this in more depth.

Best,

Bird

···

On 11/15/18 10:00 PM, Justin Griffiths
wrote:

Hi Sarah,

Perhaps here:

https://github.com/bokeh/bokeh/blob/master/bokehjs/src/lib/models/widgets/tables/data_table.ts

Line 129

DataTable->DataTableView->grid->getSortColumns

I tested in the js console here:

https://mleibman.github.io/SlickGrid/examples/example-multi-column-sort.html

grid.getSortColumns()

Gives me sort column name and direction.

          Would a change in bokeh need to be made in order to

expose this on the DataTable? Not a js expert. Seems
that the grid is private to the view, so my guess is no?
or not easy?

If you want I can make the request on github

Thanks,

Justin

      On Thu, Nov 15, 2018 at 9:09 PM Justin Griffiths

<[email protected] >
wrote:

Thanks a lot Sarah!

I’ll take a look at the links.

Justin

          On Thu, Nov 15, 2018 at 11:42 AM Sarah Bird

<[email protected] >
wrote:

Hi, totally understand your use case.

              > So, there is an arrow on the column header,

shouldn’t I be able to detect this by inspecting the
datatable object?

                Not necessarily, we have put a wrapper around

SlickGrid (which we also have forked https://github.com/bokeh/SlickGrid/ ).
We haven’t necessarily coded up a wrapper that
includes all properties.

Here’s the code: https://github.com/bokeh/bokeh/blob/master/bokehjs/src/lib/models/widgets/tables/table_column.ts

              I don't know if SlickGrid exposes the property

you’re after. If it does, then this would be a small
PR and I agree with your use case and so I think this
would be a nice addition to bokeh.

              In the meantime though. As you said you can see the

arrow, so you should be able to read something out of
the DOM using JS manually. Sorry this isn’t the answer
you want.

            On Wednesday, November 14, 2018 at 10:35:05 AM UTC-6,

Justin Griffiths wrote:

Hi Sarah,

                  Thanks for the reply.  If I sort a datatable by

clicking on the column header, then I can visually
see that the table has been sorted by that
column. I see an arrow point up or down. So my
question is, how can I programmatically determine
whether a column has been sorted or not?
Motivation is that I sort the table, make a
selection using another widget, trigger a
callback, send updated data to the app using
ajax. Now the column data source has changed, and
the table is no longer sorted.

                  I get this, it make sense.  So what I would

like to do is to send in the ajax request whether
a column(s) has been sorted or not. Then on the
server side, I can be sure to send over new data
that is already presorted. So technically the
table would no longer have the sort triggered, but
it would also be unnecessary.

                  So, there is an arrow on the column header,

shouldn’t I be able to detect this by inspecting
the datatable object?

Thanks,

Justin

                On Sunday, November 11, 2018 at 7:51:12 AM UTC-6,

Sarah Bird wrote:

                      Is your question how to programatically

specify the sort order on DataTable?

                      If yes, then I'm not sure. But here's my

first take:

Having looked at the API docs - https://bokeh.pydata.org/en/latest/docs/reference/models/widgets.tables.html#bokeh.models.widgets.tables.TableColumn
- I don’t think this is possible.

                      I think you would need to write some

JavaScript to simulate the front-end click
that does sorting. That would need to get
triggered after the selection update.

Hopefully someone else has a better answer.

                    On Wednesday, November 7, 2018 at 8:40:15 AM

UTC-6, Justin Griffiths wrote:

                      I have a Bokeh app using standalone flask.  I

send ajax requests to update the data source
after selections are made. If I sort, then
make a selection, then update the DataSource,
the connected DataTable is no longer sorted.
I understand why this is, what I’d like to be
able to do, is to send in my ajax request
which column[s], if any, were sorted and
whether it is ascending/descending. I can
then sort the DataFrame in the flask app
before sending the updated data. So this is
why I’d like to determine which columns have
been sorted in a DataTable.

                      Welcome to other suggestions as well.




                      Thanks,


                      Justin

          You received this message because you are subscribed to a

topic in the Google Groups “Bokeh Discussion - Public”
group.

          To unsubscribe from this topic, visit [https://groups.google.com/a/continuum.io/d/topic/bokeh/xeVkrQ_i1nI/unsubscribe](https://groups.google.com/a/continuum.io/d/topic/bokeh/xeVkrQ_i1nI/unsubscribe).

          To unsubscribe from this group and all its topics, send an

email to [email protected].

          To post to this group, send email to [email protected].

          To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/f6770f82-f94d-439f-9efe-7c983ef0734c%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/f6770f82-f94d-439f-9efe-7c983ef0734c%40continuum.io?utm_medium=email&utm_source=footer).

          For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

            Justin Griffiths

        Justin Griffiths

  You received this message because you are subscribed to a topic in

the Google Groups “Bokeh Discussion - Public” group.

  To unsubscribe from this topic, visit [https://groups.google.com/a/continuum.io/d/topic/bokeh/xeVkrQ_i1nI/unsubscribe](https://groups.google.com/a/continuum.io/d/topic/bokeh/xeVkrQ_i1nI/unsubscribe).

  To unsubscribe from this group and all its topics, send an email

to [email protected].

  To post to this group, send email to [email protected].

  To view this discussion on the web visit [https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAKOhOKzoDz6b1pS4_qEEQGciYWPTGbf6TBYZ8_LSxEg62zAO_Q%40mail.gmail.com](https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAKOhOKzoDz6b1pS4_qEEQGciYWPTGbf6TBYZ8_LSxEg62zAO_Q%40mail.gmail.com?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).