diff --git a/images/sample-table-sortable-1.png b/images/sample-table-sortable-1.png deleted file mode 100644 index 7e7373bb015..00000000000 Binary files a/images/sample-table-sortable-1.png and /dev/null differ diff --git a/images/sample-table-sortable-2.png b/images/sample-table-sortable-2.png deleted file mode 100644 index 08eaaafbefe..00000000000 Binary files a/images/sample-table-sortable-2.png and /dev/null differ diff --git a/images/sample-table-sortable-3.png b/images/sample-table-sortable-3.png deleted file mode 100644 index 07a6e92ce81..00000000000 Binary files a/images/sample-table-sortable-3.png and /dev/null differ diff --git a/source b/source index aedeb2cd6d5..9f4b43120e3 100644 --- a/source +++ b/source @@ -9500,7 +9500,6 @@ http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0
  • object (if the usemap attribute is present)
  • select
  • textarea
  • -
  • sorting interface th elements
  • video (if the controls attribute is present)
  • @@ -9993,7 +9992,6 @@ http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%0
  • onseeking
  • onselect
  • onshow
  • -
  • onsort
  • onstalled
  • onsubmit
  • onsuspend
  • @@ -18745,11 +18743,13 @@ this specification: the <abbr>WHATWG</abbr> and the
    -

    Here, a short table has its numeric values encoded using data so that the - table sorting model can provide a sorting mechanism on each column, despite the - numbers being presented in textual form in one column and in a decomposed form in another.

    +

    Here, a short table has its numeric values encoded using the data element so + that the table sorting JavaScript library can provide a sorting mechanism on each column + despite the numbers being presented in textual form in one column and in a decomposed form in + another.

    -
    <table sortable>
    +   
    <script src="sortable.js"></script>
    +<table class="sortable">
      <thead> <tr> <th> Game <th> Corporations <th> Map Size
      <tbody>
       <tr> <td> 1830 <td> <data value="8">Eight</data> <td> <data value="93">19+74 hexes (93 total)</data>
    @@ -37591,7 +37591,6 @@ dictionary TrackEventInit : EventInit {
        script-supporting elements.
        
    Content attributes:
    Global attributes
    -
    sortable
    DOM interface:
    interface HTMLTableElement : HTMLElement {
    @@ -37609,8 +37608,6 @@ dictionary TrackEventInit : EventInit {
       [SameObject] readonly attribute HTMLCollection rows;
       HTMLTableRowElement insertRow(optional long index = -1);
       void deleteRow(long index);
    -  attribute boolean sortable;
    -  void stopSorting();
     };
    @@ -37711,11 +37708,6 @@ dictionary TrackEventInit : EventInit {
    -

    The sortable attribute is used in the table - sorting model.

    - -
    -
    @@ -37969,12 +37961,6 @@ dictionary TrackEventInit : EventInit { -

    The stopSorting() method is used in the table - sorting model.

    - -

    The IDL attribute sortable must - reflect the sortable content attribute.

    -
    @@ -38891,12 +38877,12 @@ the cell that corresponds to the values of the two dice.
    Categories:
    -
    If the th element is a sorting interface th element: Interactive content.
    -
    Otherwise: None.
    +
    None.
    Contexts in which this element can be used:
    As a child of a tr element.
    Content model:
    -
    Flow content, but with no header, footer, sectioning content, or heading content descendants, and if the th element is a sorting interface th element, no interactive content descendants.
    +
    Flow content, but with no header, footer, + sectioning content, or heading content descendants.
    Content attributes:
    Global attributes
    @@ -38905,14 +38891,11 @@ the cell that corresponds to the values of the two dice.
    headers
    scope
    abbr
    -
    sorted
    DOM interface:
    interface HTMLTableHeaderCellElement : HTMLTableCellElement {
       attribute DOMString scope;
       attribute DOMString abbr;
    -  attribute DOMString sorted;
    -  void sort();
     };
    @@ -38970,23 +38953,17 @@ the cell that corresponds to the values of the two dice. to a data cell). It is typically an abbreviated form of the full header cell, but can also be an expansion, or merely a different phrasing.

    -

    The sorted attribute is used in the table - sorting model.

    -

    The th element and its colspan, rowspan, headers, and scope attributes take part in the table model.

    -

    The sort() method is used in the table sorting - model.

    -

    The scope IDL attribute must reflect the content attribute of the same name, limited to only known values.

    -

    The abbr and sorted IDL attributes must reflect the - content attributes of the same name.

    +

    The abbr IDL attribute must reflect + the content attributes of the same name.

    @@ -40145,1339 +40122,6 @@ the cell that corresponds to the values of the two dice. - -

    Table sorting model

    - -

    The sortable attribute on - table elements is a boolean attribute. When present, it indicates that - the user agent is to allow the user to sort the table.

    - -

    To make a column sortable in a table with a thead, the column needs - to have th element that does not span multiple - columns in a thead above any rows that it is to sort.

    - -

    To make a column sortable in a table without a thead, the column - needs to have th element that does not span multiple - columns in the first tr element of the table, where that - tr element is not in a tfoot.

    - -

    When the user selects a column by which to sort, the user agent sets the th - element's sorted attribute. This attribute can also - be set manually, to indicate that the table should be automatically sorted, even when scripts - modify the page on when the page is loaded.

    - -

    The sorted attribute, if specified, must have a value that - is a set of space-separated tokens consisting of optionally a token whose value is an - ASCII case-insensitive match for the string "reversed", and optionally a token whose value - is a valid non-negative integer greater than zero, in either order.

    - -

    In other words, ignoring spaces and case, the sorted attribute's value can be empty, "reversed", "1", "reversed 1", or - "1 reversed", where "1" is any number equal to or greater than 1.

    - -

    While one or more th elements in the table have a sorted attribute, the user agent will keep the table's data rows - sorted. The value of the attribute controls how the column is used in determining the sort order. - The reversed keyword means that the column sort - direction is reversed, rather than normal, which is the default if the keyword - is omitted. The number, if present, indicates the column key ordinality; if the number - is omitted, the column is the primary key, as if the value 1 had been specified.

    - -

    Thus, sorted="1" indicates the table's primary key, sorted="2" its secondary key, and so forth.

    - -
    - -

    A sorting-capable th element is a th element that matches - all the following conditions simultaneously:

    - - - -

    In other words, each column can have one - sorting-capable th element; this will be the highest th in - a thead that spans no other columns, or, if there is no thead, the - th in the first row (that is not in a tfoot), assuming it spans no - columns.

    - -

    The sorting-capable th elements of the table element table are the sorting-capable - th elements whose cell's table is table.

    - -

    A table element table is a sorting-capable - table element if there are one or more sorting-capable th - elements of the table element table.

    - -

    A th element is a sorting-enabled th element if it is a - sorting-capable th element and it has a sorted attribute.

    - -

    The sorting-enabled th elements of the table element table are the sorting-enabled - th elements whose cell's table is table.

    - -

    A table element table is a sorting-enabled - table element if there are one or more sorting-capable th - elements of the table element table, and at least one of - them is a sorting-enabled th element (i.e. at least one has a sorted attribute).

    - -

    A table element is a table element with a user-agent exposed - sorting interface if it is a sorting-capable table element and has - a sortable attribute specified.

    - -

    A sorting interface th element is a sorting-capable - th element whose cell's table is a table element with a user-agent exposed - sorting interface.

    - -
    - -

    Each table element has a currently-sorting flag, which must initially - be false.

    - -
    - -

    The sorted attribute must not be specified on - th elements that are not sorting-capable - th elements. The sortable attribute - must not be specified on table elements that are not sorting-capable table elements.

    - -
    - -

    To determine a th element's sorted attribute's - column sort direction and column key ordinality, user agents must use - the following algorithm:

    - -
      - -
    1. Let direction be normal.

      - -
    2. Let have explicit direction be false.

      - -
    3. Let ordinality be 1.

      - -
    4. Let have explicit ordinality be false.

      - -
    5. Let tokens be the result of splitting the attribute's value on spaces.

    6. - -
    7. - -

      For each token token in tokens, run the appropriate - steps from the following list:

      - -
      - -
      If have explicit direction is false and token is an - ASCII case-insensitive match for the string "reversed"
      - -
      - -

      Let direction be reversed and have explicit - direction be true.

      - -
      - - -
      If have explicit ordinality is false
      - -
      - -

      Parse token as an - integer. If this resulted in an error or the value zero, then ignore the token. - Otherwise, set ordinality to the parsed value, and set have - explicit ordinality to true.

      - -
      - - -
      Otherwise
      - -

      Ignore the token.

      - -
      - -
    8. - -
    9. The column sort direction is the value of direction, and - the column key ordinality is the value of ordinality.

    10. - -
    - -
    - -

    A table must not have two th elements whose sorted attribute have the same column key - ordinality.

    - -
    - -
    - -

    The table sorting algorithm, which is applied to a table, is as - follows:

    - -
      - -
    1. Let table be the table element being sorted.

    2. - -
    3. If table's currently-sorting flag is true, then abort - these steps.

    4. - -
    5. Set table's currently-sorting flag to true.

    6. - -
    7. Fire a simple event named sort that is - cancelable at table.

    8. - -
    9. If the event fired in the previous step was canceled, then jump to the step labeled - end below.

    10. - -
    11. - -

      If table is not now a sorting-enabled table - element, then jump to the step labeled end below.

      - -

      Even if table was a sorting-enabled table - element when the algorithm was invoked, the DOM might have been entirely changed by the - event handlers for the sort event, so this has to be verified at - this stage, not earlier.

      - -
    12. - -
    13. Let key heading cells be the sorting-enabled th - elements of the table element table.

    14. - -
    15. Sort key heading cells in ascending order of the column key - ordinality of their sorted attributes, with those - having the same column key ordinality being sorted in tree order.

      - -
    16. - -

      Let row collection cursor be a pointer to an element, initially pointing - at the first child of table that is after table's first - thead, if any, and that is either a tbody or a tr - element, assuming there is one. If there is no such child, then jump to the step labeled - end below.

      - -
    17. - -
    18. If table has no row group - corresponding to a thead element, then set ignore first group to - true. Otherwise, set it to false.

    19. - -
    20. - -

      Run these substeps:

      - -
        - -
      1. Row loop: Let rows be an empty list of tr - elements.

      2. - -
      3. - -

        Run these substeps:

        - -
          - -
        1. - -

          Run the appropriate steps from the following list:

          - -
          - -
          If row collection cursor points to a tr element - -
          - -
            - -
          1. Collect: Append the element pointed to by row collection - cursor to rows.

          2. - -
          3. If there are no tr or tbody children of table that are later siblings of the element pointed to by row - collection cursor, or if the next such child is a tbody element, then jump - to the step labeled group below.

          4. - -
          5. Let row collection cursor point to the next tr child - of table that is a later sibling of the element pointed to by row collection cursor.

          6. - -
          7. Jump back to the step labeled collect above.

          8. - -
          - -
          - - -
          If row collection cursor points to a tbody element - -
          - -
            - -
          1. Place all the tr element children of the element pointed to by row collection cursor into rows, in tree - order.

          2. - -
          3. If rows is empty, jump to the step labeled increment loop - below.

          4. - -
          - -
          - -
          - -
        2. - -
        3. Group: Let groups be an empty list of groups of tr - elements.

        4. - -
        5. Let group be an empty group of tr elements.

        6. - -
        7. Let group cursor be a pointer to an element, initially pointing at the - first tr element in rows.

        8. - -
        9. - -

          Run these substeps:

          - -
            - -
          1. Start group: Let pending rows in group be 1.

          2. - -
          3. - -

            Run these substeps:

            - -
              - -
            1. Group loop: Append the tr element pointed to by group - cursor to group.

            2. - -
            3. If there are any cells whose highest row's element is the one pointed to by group - cursor, then let tallest height be the number of rows covered by the - tallest such cell.

            4. - -
            5. If tallest height is greater than pending rows in - group then set pending rows in group to tallest - height.

            6. - -
            7. Decrement pending rows in group by one.

            8. - -
            9. Let group cursor point to the next tr element in rows, if any; otherwise, let it be null.

            10. - -
            11. If group cursor is not null and pending rows in - group is not zero, jump back to the step labeled group loop.

            12. - -
            - -
          4. - -
          5. Append a new group to groups consisting of the tr - elements in group.

          6. - -
          7. Empty group.

          8. - -
          9. If group cursor is not null, then jump back to the step labeled start - group.

          10. - -
          - -
        10. - -
        11. If ignore first group is true, then drop the first group in groups and set ignore first group to false.

        12. - -
        13. - -

          Run these steps:

          - -
            - -
          1. Drop leading header groups: If groups is now empty, jump to the - step labeled increment loop below.

          2. - - - -
          3. If the first group of groups consists of tr elements - whose element children are all th elements, then drop the first group in groups and jump back to the previous step (labeled drop leading header - groups).

          4. - -
          - -
        14. - -
        15. Let insertion point be a placeholder in a DOM tree, which can be used - to reinsert nodes at a specific point in the DOM. Insert insertion point into - the parent of the first tr element of the first group in groups, - immediately before that tr element.

        16. - -
        17. - -

          Sort the groups in groups, using the following algorithm to decide the - relative order of any two groups a and b (the algorithm - either returns that a comes before b, or that b comes before a):

          - -
            - -
          1. Let key index be an index into key heading - cells, initially denoting the first element in the list.

          2. - -
          3. Let direction be a sort direction, initially ascending. Its - other possible value is descending. When direction is - toggled, that means that if its value is ascending, it must be changed to - descending, and when its value is descending, it must be changed to - ascending.

          4. - -
          5. - -

            Run these substeps:

            - -
              - -
            1. Column loop: Let th be the key indexth - th in key heading cells.

            2. - -
            3. If th's sorted attribute's - column sort direction is reversed, then toggle direction.

            4. - -
            5. Let tentative order be the result of comparing two row groups - using the th element th, with a and - b as the rows.

            6. - -
            7. If tentative order is not "equal", then jump to the step labeled - return below.

            8. - -
            9. Increment key index.

            10. - -
            11. If key index still denotes a th element in key heading cells, then jump back to the step above labeled column - loop.

            12. - -
            - -
          6. - -
          7. If a's tr elements precede b's in - tree order, then let tentative order be "a before b". - Otherwise, let tentative order be "b before a".

          8. - -
          9. Return: Return the relative order given by the matching option from the following - list:

            - -
            - -
            If direction is ascending and tentative - order is "a before b"
            - -
            Return that a comes before b.
            - - -
            If direction is ascending and tentative - order is "b before a"
            - -
            Return that b comes before a.
            - - -
            If direction is descending and tentative - order is "a before b"
            - -
            Return that b comes before a.
            - - -
            If direction is descending and tentative - order is "b before a"
            - -
            Return that a comes before b.
            - -
            - -
          10. - -
          - -

          When the user agent is required to compare two row groups using the th element th, - with a and b being the two row groups respectively, the - user agent must run the following steps:

          - -
            - -
          1. Let x be the x-coordinate of the slots that - th covers in its table.

          2. - -
          3. - -

            Let cella be the element corresponding to the cell in the first row of group - a that covers the slot in that row whose - x-coordinate is x.

            - -

            Let cellb be the element corresponding to the cell in the first row of group - b that covers the slot in that row whose - x-coordinate is x.

            - - - -

            In either case, if there's no cell that actually covers - the slot, then use the value null instead.

            - -
          4. - -
          5. - -

            Let typea and valuea be - the type and value of the cell cella, as defined - below.

            - -

            Let typeb and valueb be - the type and value of the cell cellb, as defined - below.

            - -

            The type and value of the cell cell are computed as follows.

            - -
              - -
            1. If cell is null, then the type is "string" and the value is - the empty string; abort these steps.

            2. - -
            3. If, ignoring inter-element whitespace and nodes other than - Element and Text nodes, cell has only one child - and that child is a data element, then the value is the value of that - data element's value attribute, if there is - one, or the empty string otherwise; the type is "string".

              - -
            4. If, ignoring inter-element whitespace and nodes other than - Element and Text nodes, cell has only one child - and that child is a progress element, then the value is the value of that - progress element's value attribute, if - there is one, or the empty string otherwise; the type is "string".

              - -
            5. If, ignoring inter-element whitespace and nodes other than - Element and Text nodes, cell has only one child - and that child is a meter element, then the value is the value of that - meter element's value attribute, if there is - one, or the empty string otherwise; the type is "string".

              - -
            6. - -

              If, ignoring inter-element whitespace and nodes other than - Element and Text nodes, cell has only one - child and that child is a time element, then the value is the - machine-readable equivalent of the element's contents, if any, and the type is - the kind of value that is thus obtained - (a month, - a date, - a yearless date, - a time, - a local date and time, - a time-zone offset, - a global date and time, - a week, - a year, or - a duration); - abort these steps after completing this one.

              - -

              If there is no machine-readable equivalent, then the type is "string" and the value is - the empty string.

              - -

              If the type is - a month, - a date, - a week, or - a year, - then change the value to be the instant in time (with no time zone) that describes the - earliest moment that the value represents, and change the type to be - a local date and time.

              - -

              For example, if the cell was <td><time>2011-11</time> then for sorting purposes the value is - interpreted as "2011-11-01T00:00:00.000" and the type is treated as a local date and time rather than a month.

              - -

              Similarly, if the cell was <td><time - datetime="2014">MMXIV</time> then for sorting purposes the value is interpreted as - "2014-01-01T00:00:00.000" and the type is treated as a local date and time rather than a year.

              - -
            7. - -
            8. The value is the element's textContent. The type is "string".

            9. - -
            - -
          6. - -
          7. - -

            If typea and typeb are not - equal, then: return "a before b" if typea is earlier in the - following list than typeb, otherwise, return "b before a"; - then, abort these steps.

            - -
              -
            1. time
            2. -
            3. yearless date
            4. -
            5. local date and time
            6. -
            7. global date and time
            8. -
            9. time-zone offset
            10. -
            11. duration
            12. -
            13. "string"
            14. -
            - -
          8. - -
          9. If valuea and valueb are - equal, then return "equal" and abort these steps.

          10. - -
          11. - -

            If typea and typeb are not - "string", then: if valuea is earlier than valueb then return "a before b" and abort these steps, otherwise, - return "b before a" and abort these steps.

            - -

            Values sort in their natural order, with the following additional constraints:

            - -

            For time values, 00:00:00.000 is the earliest value and - 23:59:59.999 is the latest value.

            - -

            For yearless date values, 01-01 is the earliest - value and 12-31 is the latest value; 02-28 is earlier than 02-29 which is earlier than - 03-01.

            - -

            Values that are local date and time compare as - if they were in the same time zone.

            - - - -

            For time-zone offset values, -23:59 is the earliest - value and +23:59 is the latest value.

            - - - -
          12. - - - -
          13. - -

            Let componentsa be the result of parsing the sort - key valuea.

            - -

            Let componentsb be the result of parsing the sort - key valueb.

            - -

            As described below, componentsa and componentsb are tuples consisting of a list of n - numbers, a list of n number strings, a list of n+1 non-numeric strings, and a list of 2n+1 raw - strings, for any non-negative integer value of n (zero or more).

            - -
          14. - -
          15. - -

            Let order be the result of a locale-specific string - comparison of componentsa's first non-numeric - string and componentsb's first non-numeric string, - in the context of th.

            - -

            If order is not "equal" then return order and abort - these steps.

            - -
          16. - -
          17. - -

            If componentsa and componentsb both have exactly one number, then run these - substeps:

            - -
              - -
            1. - -

              If componentsa's number is less than componentsb's number, return "a before b".

              - -

              If componentsb's number is less than componentsa's number, return "b before a".

              - -
            2. - -
            3. - -

              Let order be the result of a locale-specific string - comparison of componentsa's second non-numeric - string and componentsb's second non-numeric - string, in the context of th.

              - -

              If order is not "equal" then return order and - abort these steps.

              - -
            4. - -
            5. - -

              Let order be the result of a locale-specific string - comparison of componentsa's number string and - componentsb's number string, in the context of th.

              - -

              If order is not "equal" then return order and - abort these steps.

              - -
            6. - -
            - -

            Otherwise, run these substeps:

            - -
              - -
            1. - -

              If componentsa has zero numbers but componentsb has more than zero numbers, return "a before - b".

              - -

              If componentsb has zero numbers but componentsa has more than zero numbers, return "b before - a".

              - -
            2. - -
            3. - - - -

              If componentsa has one number, return "a before - b".

              - -

              If componentsb has one number, return "b before - a".

              - -
            4. - -
            5. - - - -

              If componentsa and componentsb have more than one number, run these substeps:

              - -
                - -
              1. Let count be the smaller of the number of numbers in componentsa and the number of numbers in componentsb.

              2. - -
              3. For each number in componentsa and componentsb from the first to the countth, in - order: if componentsa's number is less than componentsb's number, then return "a before b" and abort - these steps; otherwise, if componentsb's number is - less than componentsa's number, return "b before a" - and abort these steps.

              4. - -
              5. - -

                If componentsa has fewer numbers than componentsb, return "a before b" and abort these steps.

                - -

                If componentsb has fewer numbers than componentsa, return "b before a" and abort these steps.

                - -
              6. - - - -
              7. Let index be zero.

              8. - -
              9. - -

                String loop: Let order be the result of a locale-specific - string comparison of componentsa's indexth number string and componentsb's indexth number string, - in the context of th.

                - -

                If order is not "equal" then return order and - abort these steps.

                - -
              10. - -
              11. - -

                Increment index.

                - -
              12. - -
              13. - -

                Let order be the result of a locale-specific string - comparison of componentsa's indexth separator string and componentsb's indexth separator - string, in the context of th.

                - -

                If order is not "equal" then return order and - abort these steps.

                - -
              14. - -
              15. - -

                If index is less than the number of numbers in componentsa and componentsb, jump back - to the step labeled string loop.

                - -
              16. - -
              - -
            6. - -
            - -
          18. - -
          19. - - - -

            Let index be zero.

            - -
          20. - -
          21. - -

            Run these substeps:

            - -
              - -
            1. - -

              Final loop: Let order be the result of a raw string - comparison of componentsa's nth - raw string and componentsb's nth - raw string.

              - -

              If order is not "equal" then return order and abort - these steps.

              - -
            2. - -
            3. - -

              Increment index.

              - -
            4. - -
            5. - -

              If index is less than the number of raw strings in componentsa and componentsb, jump back - to the step labeled final loop.

              - -
            6. - -
            - -
          22. - -
          23. - -

            Return "equal".

            - -
          24. - -
          - -
        18. - - -
        19. Let new order be a list of tr elements consisting of the - tr elements of all the groups in the newly ordered groups, with - the tr elements being in the same order as the groups to which they belong are in - groups, and the tr elements within each such group themselves - being ordered in tree order.

        20. - -
        21. Remove all the tr elements in new order from their parents, in tree order.

        22. - -
        23. Insert all the tr elements in new order into the DOM at the location of insertion point, in - the order these elements are found in new order.

        24. - - - -
        25. Remove insertion point from the DOM.

        26. - -
        - -
      4. - -
      5. Increment loop: If there are no tr or tbody children of - table that are later siblings of the element pointed to by row - collection cursor, then jump to the step labeled end below.

      6. - -
      7. Let row collection cursor point to the next tr or - tbody child of table that is a later sibling of the element - pointed to by row collection cursor.

      8. - -
      9. Jump back to the step labeled row loop above.

      10. - -
      - -
    21. - -
    22. End: Set table's currently-sorting flag to - false.

    23. - -
    - -

    When a user agent is to parse the sort key value, it must run the following steps. These return a tuple consisting of a list - of n numbers, a list of n number strings, a - list of n+1 non-numeric strings, and a list of 2n+1 - raw strings, respectively, for any non-negative integer value of n (zero or - more).

    - -
      - -
    1. -

      Let raw strings be a list of strings initially containing just one entry, an empty string.

      -
    2. - -
    3. -

      Let negatives prejudiced be false.

      -

      Let decimals prejudiced be false.

      -

      Let exponents prejudiced be false.

      -
    4. - -
    5. -

      Let buffer be the empty string.

      -

      Let index be zero.

      -

      Let mode be "separator".

      - -

      When a subsequent step in this algorithm says to push the buffer, the user agent must run the following substeps:

      - -
        - -
      1. Add an entry to raw strings that consists of the value of buffer.

      2. - -
      3. Add an entry to raw strings that is the empty string.

      4. - -
      5. Decrement index by one.

      6. - -
      7. Set mode to "separator".

      8. - -
      - -
    6. - -
    7. -

      Let checkpoint buffer be the empty string.

      -

      Let checkpoint index be zero.

      - -

      When a subsequent step in this algorithm says to checkpoint, the user agent must run the following substeps:

      - -
        -
      1. Set the checkpoint buffer to the value of buffer.

        -
      2. Set the checkpoint index to the value of index.

        -
      - -

      When a subsequent step in this algorithm says to push the checkpoint, the user agent must run the following substeps:

      - -
        - -
      1. Add an entry to raw strings that consists of the value of checkpoint buffer.

      2. - -
      3. Add an entry to raw strings that is the empty string.

      4. - -
      5. Decrement index by one.

      6. - -
      7. Set mode to "separator".

      8. - -
      - -
    8. - -
    9. - -

      Run through the following steps repeatedly until the condition in the last step is met.

      - -
        - -
      1. - -

        Top of loop: If index is equal to or greater than the number of - characters in value, let c be EOF. Otherwise, let c be the indexth character in value.

        - -
      2. - -
      3. - -

        Run the appropriate steps from the following list:

        - -
        parse using c, index, buffer, negatives prejudiced, decimals prejudiced, exponents prejudiced
        -      posting to: the last entry in raw strings
        -      buffering to: buffer
        -      defined above: push the buffer, checkpoint, push the checkpoint
        -      prefix xrefs with "sort parser"
        -      switch using mode
        -        case separator:
        -          c=space character:
        -            negatives prejudiced := false
        -            decimals prejudiced := false
        -            exponents prejudiced := false
        -            post c
        -          c=- unless negatives prejudiced:
        -            buffer := c
        -            mode := negative
        -          c=. unless decimals prejudiced:
        -            buffer := c
        -            mode := leading-decimal
        -          c=0-9:
        -            buffer := c
        -            mode := integral
        -          c=letter:
        -            exponents prejudiced := true
        -            post c
        -          c=eof:
        -            nop
        -          otherwise:
        -            post c
        -        case negative:
        -          c=-:
        -            negatives prejudiced := true
        -            post buffer
        -            post c
        -            mode := separator
        -          c=. unless decimals prejudiced:
        -            buffer c
        -            mode := leading-decimal
        -          c=0-9:
        -            buffer c
        -            mode := integral
        -          otherwise:
        -            post buffer
        -            dec index
        -            mode := separator
        -        case integral:
        -          c=-:
        -            negatives prejudiced := true
        -            push the buffer
        -          c=. unless decimals prejudiced:
        -            checkpoint
        -            buffer c
        -            mode := decimal
        -          c=0-9:
        -            post c
        -          c=e/E unless exponents prejudiced:
        -            checkpoint
        -            buffer c
        -            mode := exponent
        -          otherwise:
        -            push the buffer
        -        case leading-decimal:
        -          c=0-9:
        -            buffer c
        -            mode := decimal
        -          otherwise:
        -            post buffer
        -            dec index
        -            mode := separator
        -        case decimal:
        -          c=-:
        -            negatives prejudiced := true
        -            push the buffer
        -          c=. if numbers are coming:
        -            decimals prejudiced := true
        -            push the checkpoint
        -          c=. if numbers are not coming:
        -            push the buffer
        -          c=0-9:
        -            buffer c
        -          c=e/E unless exponents prejudiced:
        -            checkpoint
        -            buffer c
        -            mode := exponent
        -          otherwise:
        -            push the buffer
        -        case exponent:
        -          c=- unless negatives prejudiced:
        -            buffer c
        -            mode := exponent-negative
        -          c=.:
        -            decimals prejudiced := true
        -            push the checkpoint
        -          c=0-9:
        -            buffer c
        -            mode := exponent-number
        -          c=e/E:
        -            exponents prejudiced := true
        -            push the checkpoint
        -          otherwise:
        -            push the checkpoint
        -        case exponent-negative:
        -          c=-:
        -            negatives prejudiced := true
        -            push the checkpoint
        -          c=.:
        -            decimals prejudiced := true
        -            push the checkpoint
        -          c=0-9:
        -            buffer c
        -            mode := exponent-negative-number
        -          c=e/E:
        -            exponents prejudiced := true
        -            push the checkpoint
        -          otherwise:
        -            push the checkpoint
        -        case exponent-number:
        -          c=-:
        -            negatives prejudiced := true
        -            push the buffer
        -          c=.:
        -            decimals prejudiced := true
        -            push the checkpoint
        -          c=0-9:
        -            buffer c
        -          c=e/E:
        -            exponents prejudiced := true
        -            push the checkpoint
        -          otherwise:
        -            push the buffer
        -        case exponent-negative-number:
        -          c=-:
        -            negatives prejudiced := true
        -            push the checkpoint
        -          c=.:
        -            decimals prejudiced := true
        -            push the checkpoint
        -          c=0-9:
        -            buffer c
        -          c=e/E:
        -            exponents prejudiced := true
        -            push the checkpoint
        -          otherwise:
        -            push the buffer
        -      
        - -
      4. - -
      5. - -

        Increment index by one.

        - -
      6. - -
      7. - -

        If index is greater than the number of characters in value, stop repeating these substeps and continue along the overall steps. - Otherwise, return to the step labeled top of loop.

        - -
      8. - -
      - -
    10. - -
    11. -

      Let numbers be an empty list.

      -

      Let number strings be an empty list.

      -

      Let non-numeric strings be an empty list.

      -
    12. - -
    13. - -

      For each even-numbered entry in raw strings, in order, starting from the - first entry (numbered 0), append an entry to non-numeric strings that - consists of the result of trimming and collapsing the value of the entry.

      - -
    14. - -
    15. - -

      If raw strings has more than one entry, then, for each odd-numbered entry - in raw strings, in order, starting from the second entry (numbered 1), - append an entry to number strings that consists of the value of the entry, - and append an entry to number strings that consists of the result of parsing - the value of the entry using the rules for parsing floating-point number - values.

      - -
    16. - -
    17. - -

      Return numbers, number strings, non-numeric strings, and raw strings respectively.

      - -
    18. - -
    - -

    When the user agent is required by the step above to perform a locale-specific string - comparison of two strings a and b in the context of - an element e, the user agent must apply the Unicode Collation Algorithm, using - the Default Unicode Collation Element Table as customised for the language of the - element e in the Common Locale Data Repository, to the strings a and b, ignoring case. If the result of this algorithm places - a first, then return "a before b"; if it places b first, - then return "b before a"; otherwise, if they compare as equal, then return "equal".

    - -

    When the user agent is required by the step above to perform a raw string comparison - of two strings a and b, the user agent must apply the - Unicode Collation Algorithm, using the Default Unicode Collation Element Table without - customizations, to the strings a and b. If the result of - this algorithm places a first, then return "a before b"; if it places b first, then return "b before a"; otherwise, if they compare as equal, then return - "equal".

    - -

    Where the steps above refer to trimming and collapsing a string value, it means running the following algorithm:

    - -
      - -
    1. Strip leading and trailing whitespace from value.

    2. - -
    3. Replace any sequence of one or more space characters - in value with a single U+0020 SPACE character.

    4. - -
    - -
    - -

    When any of the descendants of a sorting-enabled table element change - in any way (including attributes changing), and when a table element becomes a - sorting-enabled table element, the table element is said to - become a table with a pending sort. When a table element becomes a - table with a pending sort, the user agent must queue a microtask that applies - the table sorting algorithm to that table, and then flags the - table as no longer being a table with a pending sort.

    - -
    - -

    When the user agent is to set the sort key to a th element target, it must run the following algorithm:

    - -
      - -
    1. Let table be the table of the table of which target is a header cell.

    2. - -
    3. If th is a sorting-enabled th element whose - column key ordinality is 1, then: if its column sort direction is - normal, set that element's sorted attribute to the - string "reversed", otherwise, set it to the empty string; then, abort these - steps.

    4. - -
    5. Let current headers be the sorting-enabled th - elements of the table element table, excluding target.

    6. - -
    7. Sort current headers by their sorted attributes' column key ordinality, in ascending - order, with elements that have the same column key ordinality being sorted in - tree order.

    8. - -
    9. Let level be 2.

    10. - -
    11. - -

      For each th element th in current - headers, in order, run the following substeps:

      - -
        - -
      1. If th's sorted attribute's - column sort direction is normal, then set th's sorted attribute to a valid integer whose value is - level. Otherwise, set it to the concatenation of the string "reversed", a U+0020 SPACE character, and a valid integer whose - value is level.

        - -
      2. Increment level by 1.

      3. - -
      - -
    12. - -
    13. Set target's sorted attribute to - the empty string.

    14. - -
    - -
    - -

    The activation behaviour of a sorting interface th - element is to set the sort key to the th element.

    - -

    The table will be sorted the next time the user agent performs a microtask checkpoint.

    - -
    - -
    - -
    th . sort()
    - -
    - -

    Act as if the user had indicated that this was to be the new primary sort column.

    - -

    The table won't actually be sorted until the script terminates.

    - -
    - - -
    table . stopSorting()
    - -
    - -

    Removes all the sorted attributes that are causing the - table to automatically sort its contents, if any.

    - -
    - -
    - -
    - -

    The th element's sort() method, when - invoked, must run the following steps:

    - -
      - -
    1. If the th element is not a sorting-capable th - element, then abort these steps.

    2. - -
    3. - -

      Set the sort key to the th element.

      - -

      The table will be sorted the next time the user agent performs a microtask checkpoint.

      - -
    4. - -
    - - -

    The table element's stopSorting() method, when invoked, must remove - the sorted attribute of all the sorting-enabled - th elements of the table element on which the method was invoked.

    - -
    - -

    Examples

    @@ -41687,51 +40331,6 @@ the cell that corresponds to the values of the two dice. 11.6% 12.3% 12.6% -
    - -

    Sometimes, tables are used for dense data. For examples, here a table is used to show entries - in an access log:

    - -
    <table sortable>
    - <thead>
    -  <tr>
    -   <th sorted> Timestamp
    -   <th> IP
    -   <th> Message
    - <tbody>
    -  <tr>
    -   <td> <time>21:01</time>
    -   <td> 128.30.52.199
    -   <td> Exceeded ingress limit
    -  <tr>
    -   <td> <time>21:04</time>
    -   <td> 128.30.52.3
    -   <td> Authentication failure
    -  <tr>
    -   <td> <time>22:35</time>
    -   <td> 128.30.52.29
    -   <td> Malware command request blocked
    -  <tr>
    -   <td> <time>22:36</time>
    -   <td> 128.30.52.3
    -   <td> Authentication failure
    -</table>
    - -

    Because the table element has a sortable - attribute, the column headers can be selected to change the table's sort order.

    - -

    This might render as follows:

    - -

    The table as marked above, but with the column headers having interactive affordances to select which column to sort by, the first being already selected. - -

    If the user activates the second column, the table might change as follows:

    - -

    The same table, but with the second column header's interactive affordance marked as selected, with the IP addresses sorted in numeric order (first the rows with the address ending in '3', then the row with the address ending in '29', and finally the row with the address ending in '199'. - -

    If the user activates the second column again, reversing the sort order, it might change as follows:

    - -

    The same table, but with the second column header's interactive affordance marked as selected and reversed, with the IP addresses sorted in reverse numeric order (first the row with the address ending in '199', then the row with the address ending in '29', and finally the rows with the address ending in '3'. -

    Forms

    @@ -60852,7 +59451,17 @@ not-slash = %x0000-002E / %x0030-10FFFF
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    -
    Transparent, but with no interactive content descendants except for a elements, img elements with usemap attributes, button elements, input elements whose type attribute are in the Checkbox or Radio Button states, input elements that are buttons, select elements with a multiple attribute or a display size greater than 1, sorting interface th elements, and elements that would not be interactive content except for having the tabindex attribute specified.
    +
    Transparent, but with no interactive content descendants except + for a elements, img elements with + usemap attributes, button elements, + input elements whose type attribute are in + the Checkbox or Radio Button states, input elements that are + buttons, select elements with a multiple attribute or a display size greater than 1, and elements that would not be + interactive content except for having the tabindex attribute specified.
    Content attributes:
    Global attributes
    width
    @@ -66104,8 +64713,6 @@ v6DVT (also check for '- -' bits in the part above) --> with a multiple attribute or a display size greater than 1

    -
  • a sorting interface th element

  • -
  • an element that would not be interactive content except for having the tabindex attribute specified

  • @@ -73316,9 +71923,6 @@ END:VCARD
  • Browsing context containers
  • -
  • Sorting interface th - elements
  • -

    One valid reason to ignore the platform conventions and always allow an element @@ -88115,7 +86719,6 @@ typedef OnBeforeUnloadEventHandlerNonNull? OnBeforeUnloadEvent onseeking seeking onselect select onshow show - onsort sort onstalled stalled onsubmit submit onsuspend suspend @@ -88270,7 +86873,6 @@ interface GlobalEventHandlers { attribute EventHandler onseeking; attribute EventHandler onselect; attribute EventHandler onshow; - attribute EventHandler onsort; attribute EventHandler onstalled; attribute EventHandler onsubmit; attribute EventHandler onsuspend; @@ -109093,13 +107695,6 @@ table { parsing non-zero dimension values" can't return 0, if the value is "0" they treat it as an error --> -


    - -

    User agents are expected to render sorting interface th elements in such a manner as to indicate that - activating the elements will cause the table to be sorted.

    - -

    Margin collapsing quirks

    A node is substantial if it is a text node @@ -114555,8 +113150,7 @@ if (s = prompt('What is your name?')) { tfoot*; tr*; script-supporting elements - globals; - sortable + globals HTMLTableElement @@ -114659,7 +113253,6 @@ if (s = prompt('What is your name?')) { rowspan; headers; scope; - sorted; abbr HTMLTableHeaderCellElement @@ -115060,7 +113653,6 @@ if (s = prompt('What is your name?')) { img (if the usemap attribute is present); input (if the type attribute is not in the Hidden state); object (if the usemap attribute is present); - th (for sorting interface th elements) video (if the controls attribute is present) @@ -115988,16 +114580,6 @@ if (s = prompt('What is your name?')) { source Image sizes for different page layouts Valid source size list - - sortable - table - Enables a sorting interface for the table - Boolean attribute - - sorted - th - Column sort direction and ordinality - Set of space-separated tokens, ASCII case-insensitive, consisting of neither, one, or both of "reversed" and a valid non-negative integer greater than zero span col; @@ -116635,12 +115217,6 @@ if (s = prompt('What is your name?')) { show event handler Event handler content attribute - - onsort - HTML elements - sort event handler - Event handler content attribute - onstalled HTML elements @@ -117453,12 +116029,6 @@ INSERT INTERFACES HERE menu elements Fired at a menu element when it is shown as a context menu - - sort - Event - table elements - Fired at table elements before it is sorted; canceling the event cancels the sorting of the table - storage StorageEvent