Grouping Widget: Separate grouping and sorting

[cgarwood]

It would be nice to have separate grouping and sorting.

For example if you have the table:

ColA	ColB	ColC
A	2	5
A	1	3
B	1	7
B	3	2

It would be nice to group the table by ColA (sorted alphabetically), but sort the table within the groups by ColB or ColC

[Mottie]

Hi @cgarwood!

Is the first column never sorted? If you set the group_forceColumn option and sort "ColC" the group headers will show "B", "A", "B" - demo.

If you use sortForce to always sort the first column along with group_forceColumn, then maybe this gives you the result you want (demo)?

$(function(){

  $("#groups").tablesorter({
    theme : "blue",
    sortForce: [[0, 0]],
    widgets: [ "group", "filter", "zebra" ],
    widgetOptions: {
      group_forceColumn: [0]
    }
  });

});

[cgarwood]

@Mottie thanks for the quick reply!

The second example using sortForce and group_forceColumn is closest to what I'm wanting to achieve, but I would like to be able to switch which column is used for grouping without editing the JS file (for example, with a Group By: dropdown above the table). Is that possible using that method?

[Mottie]

The group_forceColumn option can be dynamically set... so in your dropdown, you can modify it then apply whatever sort you want.

[Mottie]

I'm not completely opposed to adding a new feature, I'd need to get a better idea of how to implement it when I do.

[cgarwood]

So it seems that I have to set sortForce and group_forceColumn to whatever I want the grouping to be, and then actually click on a table header to change the sort options once the page loads. This gives me the correct grouping. However, for some reason it doesn't give me the correct grouping on first load of the page, I have to actually click a table header to get it to fix the groups. From outside of the constructor how would I go about changing the sortForce and group_forceColumn values?

[Mottie]

Add a sortList option to apply an initial sort (demo):

$(function(){
  $("#groups").tablesorter({
    theme : "blue",
    sortForce: [[0, 0]],
    sortList: [[0, 0]],
    widgets: [ "group", "filter", "zebra" ],
    widgetOptions: {
      group_forceColumn: [0]
    }
  });
});

[kczx3]

How can we avoid something such as this when using your method?
demo

The initial sort is not abiding by the group_forceColumn. When you click to sort after initialization, then it functions correctly.

[Mottie]

Hi @kczx3! I'm not sure what you are expecting. The grouping is applied to the second column... please remember that the group_forceColumn uses zero-based column indexing.

[kczx3]

Correct, but why are there two groups for "B"? If you sort on column A after the demo loads, then the two group B's become one. How can we make it do this on load?

[Mottie]

Ahh, I forgot that setting a sortList initially and through the API will ignore the sortForce and sortAppend settings. This allows you to programmatically set the sort without interference. I should make that more explicit in the documentation. Changing this behavior now would break backwards compatibility.

So on initialization, also include the sortForce column - demo.

$(function(){

  $("#groups").tablesorter({
    theme : "blue",
    sortForce: [[1, 0]],
    sortList: [[1,0], [0, 0]],
    widgets: [ "group", "filter", "zebra" ],
    widgetOptions: {
      group_forceColumn: [1]
    }
  });

});

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue the discussion in this thread.