Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose Table's current sort order #115

Open
mootari opened this issue Mar 3, 2021 · 5 comments · May be fixed by #221
Open

Expose Table's current sort order #115

mootari opened this issue Mar 3, 2021 · 5 comments · May be fixed by #221
Labels
enhancement New feature or request

Comments

@mootari
Copy link
Member

mootari commented Mar 3, 2021

A Table input's current sort order is only tracked internally. This poses a problem if a notebook author wants to persist the current sort state, e.g. via a permalink.

Suggested solution

When the sort column or order is changed, dispatch a custom sort event:

new CustomEvent('sort', {bubbles: true, detail: {sort: currentColumnName, reverse: currentReverse}})

Workaround

The instantiating cell can listen to click events and parse order and column name from event.target.textContent. This technique is error prone and expected to break once additional features (like custom table names) have been added.

The workaround is currently implemented here: https://observablehq.com/@mootari/sortable-notebook-list#selection

@mootari mootari changed the title Expose current sort order Expose Table's current sort order Mar 3, 2021
@mbostock mbostock added the enhancement New feature or request label Mar 13, 2021
@john-guerra
Copy link

Not sure if this is the same, but I think I was just experiencing this need. If I create a table like this:

viewof selected = Inputs.table(data)

selected won't change when I change the order of the element of the table by clicking on one of the columns. However, if selected some or all the rows using the checkboxes then the table order will be reflected on selected. It would be nice for the table to trigger an input whenever the table visual order changes

@john-guerra
Copy link

To follow up on this discussion, here is a video demonstrating my view of the problem. Inputs.Table should trigger the input event when the order changes. At least it should be configurable via options

https://observablehq.com/d/297b6d84743974ae

observable_table_sort

@Fil
Copy link
Collaborator

Fil commented Apr 30, 2022

@john-guerra's suggestion would be consistent with what Inputs.table does when passed a sort option; I wonder if we couldn't just do the following:

index bd2df74..451d73a 100644
--- a/src/table.js
+++ b/src/table.js
@@ -238,6 +238,7 @@ function initialize(
     while (tbody.firstChild) tbody.firstChild.remove();
     appendRows(0, n = minlengthof(rows * 2));
     anchor = head = null;
+    root.dispatchEvent(new CustomEvent('input', {bubbles: true, detail: {sort: column, reverse: currentReverse}}));
     reinput();
   }

demo at https://observablehq.com/@fil/table-sort-115 ; this also allows to listen to the input event and check if it's a sort event, addressing @mootari's request.

@mbostock
Copy link
Member

@Fil I don’t think that’s quite enough; if there’s a selection, the selection should appear sorted, too. But currently it looks like the selection is ordered by the order in which rows were clicked.

Screen Shot 2022-04-30 at 11 48 36 AM

@Fil
Copy link
Collaborator

Fil commented May 2, 2022

I thought it worked because I had only tested sorting a selection; however I hadn't thought about adding elements to a selection while there is an "active" sort (which didn't work; now fixed).

Fil added a commit that referenced this issue May 2, 2022
@Fil Fil linked a pull request May 2, 2022 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants