[whatwg] Sortable Tables

[Markus Ernst]

Am 28.12.2012 03:04 schrieb Ian Hickson:
>
> I've added a feature to HTML to enable users (and authors) to sort tables.
>
> The basic design of the feature is that if a column's <th> has a sorted=""
> attribute, the UA will sort the table every time the mutation observers
> would fire (before they fire). A table can have a sortable="" attribute,
> which lets the user tell the user agent to add sorted="" attributes to
> columns to sort them.

This spec is great work! Anyway I have some thoughts on user sorting and 
the sort() method - if they are silly, please feel free to ignore them.

I believe that "asc" and "desc" would be more intuitive to handle than 
"" and "reverse", and I think that some kind of th.sortedState attribute 
would be handy, to question the actual state of the table.

Given a basic table such as:

<table id="pirates">
   <thead>
     <tr>
       <th sorted="1" id="last">Last name</th>
       <th sorted="2" id="first">First name</th>
       <th sorted="3" id="age">Age</th>
       <th sorted="4" id="sex">Sex</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Read</td>
       <td>Mary</td>
       <td>25</td>
       <td>f</td>
     </tr>
     <tr>
       <td>Sparrow</td>
       <td>Jack</td>
       <td>32</td>
       <td>m</td>
     </tr>
     ...
   </tbody>
</table>

1. If the user clicks on the header "Age" (or does a respective 
interaction provided by the UAs sorting UI), the table should be sorted 
by the age column. If ist is already sorted by this column, the sort 
direction should be reversed.

2. Authors should be able to provide external links or buttons that can:
- Sort by a column as described in 1.
- Sort by a column, force ascending
- Sort by a column, force descending

I believe that this could be achieved with the following additions:
- a th.sortedstate attribute to question if the table is currently 
sorted by this column, and if yes in which direction
- th.sort() method would take an optional argument to indicate the 
desired sort direction

The algorithm for th.sort([String direction]) could then be extended 
somehow like the following (to be simple I just write "th" for the 
column header element that the method is applied to):
- Temporarily set the column key ordinality of th to 0
- If the direction argument is provided (and valid), temporarily set the 
column sort direction to direction
- Else if the sortedstate attribute of th is not null
   - if it is "asc", temporarily set the column sort direction to "desc"
   - else temporarily set the column sort direction to "asc"
- Perform the table sorting steps
- Set the sortedstate attributes of all column headers to null
- Set the sortetstate attribute of th to the column sort direction
- Reset the column sort direction and the column key ordinality of th to 
their initial values

<aside>

Furthermore, a table.sort() method would be handy. It could take a comma 
separated string as an argument, with each token being the ID of a th, 
and optional the direction, such as:

<button
   onclick="document.getElementById('pirates').sort('sex asc, age')">
   Order pirates by age, women first. Click again for descending age.
</button>

</aside>