search

tofsjonas / sortable

Vanilla JavaScript table sort
The Unlicense
429 stars 50 forks source link

support for colspan attribute in header elements #41

Closed mmitch closed 1 year ago

mmitch commented 1 year ago

Would it be possible to support <th colspan=x> in header lines?

I have this minimal HTML example:

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/gh/tofsjonas/sortable@latest/sortable.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/gh/tofsjonas/sortable@latest/sortable.min.js"></script>
  </head>
  <body>
    <table class="sortable">
      <thead>
    <tr>
      <th colspan="2">col 1</th>
      <th>col 3</th>
    </tr>
      </thead>
      <tbody>
    <tr>
      <td>a</td><td>bb</td><td>dddd</td>
    </tr>
    <tr>
      <td>dddd</td><td>dddd</td><td>ccc</td>
    </tr>
    <tr>
      <td>ccc</td><td>a</td><td>a</td>
    </tr>
    <tr>
      <td>bb</td><td>ccc</td><td>bb</td>
    </tr>
      </tbody>
    </table>
  </body>
</html>

Sorting by clicking on the "col 3" header actually sorts the table by the second column, not by the 3rd column as expected. I would guess that the code counts <th> elements and does not look for colspan attributes.

I've come across this probem on my first usage of sortable. I do have a usable workaround by splitting my <th colspan=2> into 2 separate <th> elements and the table sorts as expected. So this is no deal-breaker for me, but if it is something that you want to support and perhaps it's not that hard to implement, then I would kindly request this feature :-)

tofsjonas commented 1 year ago

That is what data-sort-col is for. You can read about it here: https://github.com/tofsjonas/sortable#sort-on-specific-column

Hope that helps!

mmitch commented 1 year ago

Thanks your the quick answer - I'm already using data-sort-alt, but I must have skipped data-sort-col. I could have just searched for colspan… Sorry for the noise and thanks for the nice package!