# tablesorter

## Sorting & Filtering with Colspans

### Flexible client-side table sorting

Back to documentation

NOTE!

- Having a `colspan` in the tbody is not fully supported by all widgets, and there are still some minor issues to work out.
- Alert Cells with a `rowspan` are not currently supported.
- Warning Cells with a `colspan` will attempt to use the parser set for that column and will not use the parser for another column while sorting or filtering - try this
  - the "17 Koala" cell is not parsed as a numeric value and is thus considered a string.
- The `duplicateSpan` option (storing of cache data) is a preliminary step in providing `colspan` support, it is by no means complete.
- Ignore an entire header row by adding a "tablesorter-ignoreRow" class (set by the `cssIgnoreRow` option).
- This demo requires tablesorter v2.25.0+, as well the corresponding version of the filter widget.
- Follow the demo steps to hopefully get the full understanding of how to use `colspan`s in the tbody.
- Ultimately, with the issues noted below, I would not recommend including an entire column in the tbody that does not have a corresponding header cell - don't do what I did in this demo for the first two colums.

# Demo

- Sort Column
  (toggle sort direction) - There is no method to use the UI to sort the second column because it has no header; use "sorton" instead.
- Search:
  , then toggle `duplicateSpan` :
  .
- Searching the first two columns †:
  - Search using column `0` (zero):
    (nothing visible in column filter)
    (search second column, nothing visible in filter)
  - Search using column `6` (used by "all" filter):
    (search both index columns)‡
    (only search "Group" column)
    (search second column)

Search: ‡
``

† The reason for this issue is that the filter input in the index column has this setting: `data-column="0-1"`, and it has not yet been worked out how to properly target that input.
‡ It is still being investigated as to why the search using the button targeting column 6 and the "all" input have different results (Enter "4" in the input and 4 rows will appear in the result, then click on the "4" to search both index columns - one less row).

This entire row is ignored
Index (colspan 2) | Products
--- | ---
Product ID | Numeric | Animals | Url
This entire row is ignored too!
Index | Product ID | Numeric | Animals | Url
Group 1 | 6 | abc 9 | 155 | Lion | http://www.nytimes.com/
Group 4 | 1 | abc 1 | 237 | Ox http://www.yahoo.com
Group 1 | 2 | zyx 1 957 Koala http://www.mit.edu/
Group 0 | 5 | abc 2 | 56 | Elephant | http://www.wikipedia.org/
Group 3 | 0 | abc 123 | 17 Koala | http://www.google.com
Group 2 | 8 | zyx 9 | 10 | Girafee | http://www.facebook.com
Group 1 | 3 | zyx 4 767 | Bison | http://www.whitehouse.gov/
Group 2 | 4 | abc 11 | 3 | Chimp | http://www.ucla.edu/
Group 4 | 7 | ABC 10 87 | Zebra | http://www.google.com
Group 3 | 9 | zyx 12 | 0 | Koala | http://www.nasa.gov/

# Javascript

# CSS

# HTML