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>

Reply via email to