Expose Table's current sort order

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

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

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

@john-guerra

@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.

@Fil

@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.

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).

dispatch the value on sort events, with details allowing to read the …

Navigation Menu

Repository navigation

Expose Table's current sort order #115

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Expose Table's current sort order #115

Description

Activity

john-guerra commented on Mar 27, 2022

john-guerra commented on Apr 26, 2022

Fil commented on Apr 30, 2022

mbostock commented on Apr 30, 2022

Fil commented on May 2, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions