Sort table with child-rows

Question

I know this might be tricky, but I have been strived for a solution with no luck, so I have a table with expandable/collapsable row/child-rows:

Col1            Col2    Col3
Node A          A       A
  --A child 1   A1      A1
  --A child 2   Foo     Bar
Node B          Foo     Bar
  --B child 1   B1      B1
  --B child 2   Foo     Bar

So while all child-rows got expanded and I am sorting Col1, I am expecting to sort Node A and Node B, NOT sort all the child rows, i.e., if sort Col1, I should see this:

Col1            Col2    Col3
Node B          Foo     Bar
  --B child 1   B1      B1
  --B child 2   Foo     Bar
Node A          A       A
  --A child 1   A1      A1
  --A child 2   Foo     Bar

Not this....:

Col1            Col2    Col3
  --B child 1   B1      B1
  --B child 2   Foo     Bar
  --A child 1   A1      A1
  --A child 2   Foo     Bar
Node B          Foo     Bar
Node A          A       A

My code is located at: https://jsfiddle.net/wayneye/tyxykyf3/, I was using jquery table sorter, but don't restrict to use it as long as my requirement satisfied: sort the parent rows, not child-rows

Please kindly give me a hand, you can change my HTML structure/js, or using other libs, appreciated!

Answer 1

If you check this link here, it states the following (for tablesorter 2.15.12+, and you are using 2.25.4):

Parents of child rows now have a tablesorter-hasChildRow class name added.

If you look at the example on that page, you will also note that there is a class for child rows tablesorter-childRow.

You simply need to add tablesorter-hasChildRow to your parent rows, and tablesorter-childRow to your child rows.

Updated JSFiddle Here