Header Groups

[duckwilliamson]

I needed to have header groups for my headers (additional <tr> in the <thead> with colspans), but didn't want anything to sort. I can't think of a situation where someone would want to sort on a header group, since you should just sort on the lowest level header.

In this light, I modified line 46 of sortable to find "tr:last-child th" to get my desired results. Do you agree this is something you should update or is there something planned for header groups/intented functionality?

[steveush]

Hey duckwilliamson,

I must admit I didn't think about your scenario but your fix seems nice and simple. I looked through the sortable plugin and it seems I need to go through and update the selectors anyway to use thead > tr > th, thead > tr > td as used by the core to support td's as well as th's so I'll add in your fix at the same time and test it out.

Thanks
Steve

[steveush]

I've had a chance to play with this now and after testing I've decided to add in some additional support for this in the core plugin. The issue I ran into was simply the group headers were not hidden/shown at the correct breakpoints and they didn't have the correct colspan set according to the number of visible columns which caused layout issues on smaller resolutions.

To accommodate this I added in a new attribute called data-group which allows you to assign your main/sortable header row cells to their header groups, by doing this the core plugin manages when to display the header groups and assigns the correct colspan to them thus maintaining layout.

To aid with selection the row containing the header groups needs to have the class footable-group-row applied to it.

Example HTML:

<table class="footable">
  <thead>
    <tr class="footable-group-row">
      <th data-group="group1" colspan="2">Group 1</th>
      <th data-group="group2" colspan="3">Group 2</th>
    </tr>
    <tr>
      <th data-group="group1">First Name</th>
      <th data-group="group1">Last Name</th>
      <th data-group="group2" data-hide="phone">Job Title</th>
      <th data-group="group2" data-hide="phone">DOB</th>
      <th data-group="group2" data-hide="phone,tablet">Status</th>
    </tr>
  </thead>
    ...
</table>

Looking at the above HTML snippet on a tablet the Status column would be hidden, as this is linked to the group header "Group 2" via the data-group="group2" attribute the group header will have it's colspan adjusted to 2 but it will remain visible. When viewed on a phone though the Job Title, DOB and Status columns are all hidden so the "Group 2" header will be hidden as well.

I currently have a testing branch called Colspan where I have made these changes. In this branch I have also addressed the colspan concerns raised in Issue #21 so please take a look and let me know what you think.

An example demonstrating your scenario can be found in the root and is called issue23.htm.

Thanks
Steve

[duckwilliamson]

That's an excellent solution to the issue. I never had a problem with it because my breakpoints mirror the groups and seem to work fine with the temporary hack. I've implemented your data-group fields and class and it seems to work great!

So now the only thing I'd like to see that's related to this (keep in thread or close & new enhancement?) would be to have any group-row fields come down in the mobile view with some style:
Header Group
field: value
field: value
Header Group 2
field: value
etc

I can contribute to this in the fairly distant future, but if you have a simple idea on how to implement it go right ahead.

[steveush]

Hi duckwilliamson,

I've looked at how to add in this functionality without affecting any of the other functions of the plugin and the best way I could find was adding in 2 extra properties to the cell data passed to the createDetail function.
This function is overridable as an option but I have altered the default to be able to handle grouping and still output the detail row as it did previously so there should be no issues if not using Group Headers.

The old createDetail function, as you can see, is a rather simple dump to HTML:

createDetail: function(element, data) {
    /// <summary>This function is used by FooTable to generate the detail view seen when expanding a collapsed row.</summary>
    /// <param name="element">This is the div that contains all the detail row information, anything could be added to it.</param>
    /// <param name="data">
    ///  This is an array of objects containing the cell information for the current row.
    ///  These objects look like the below:
    ///    obj = {
    ///      'name': String, // The name of the column
    ///      'value': Object, // The value parsed from the cell using the parsers. This could be a string, a number or whatever the parser outputs.
    ///      'display': String // This is the actual HTML from the cell, so if you have images etc you want moved this is the one to use and is the default value used.
    ///    }
    /// </param>

    for (var i = 0; i < data.length; i++) {
        element.append('<div><strong>' + data[i].name + '</strong> : ' + data[i].display + '</div>');
    }
}

The below is the new createDetail function which handles groups, as you can see the objects containing the cell information have had 2 properties added to them, group (The identifier used in the data-group attribute) and groupName (The actual text value of the group):

createDetail: function(element, data) {
    /// <summary>This function is used by FooTable to generate the detail view seen when expanding a collapsed row.</summary>
    /// <param name="element">This is the div that contains all the detail row information, anything could be added to it.</param>
    /// <param name="data">
    ///  This is an array of objects containing the cell information for the current row.
    ///  These objects look like the below:
    ///    obj = {
    ///      'name': String, // The name of the column
    ///      'value': Object, // The value parsed from the cell using the parsers. This could be a string, a number or whatever the parser outputs.
    ///      'display': String // This is the actual HTML from the cell, so if you have images etc you want moved this is the one to use and is the default value used.
    ///      'group': String, // This is the identifier used in the data-group attribute of the column.
    ///      'groupName': String // This is the actual name of the group the column belongs to.
    ///    }
    /// </param>

    // group up the groups by there identifier :)
    var groups = { '_none': { 'name': null, 'data': [] } };
    for (var i = 0; i < data.length; i++) {
        var groupid = data[i].group;
        if (groupid != null) {
            if (!(groupid in groups))
                groups[groupid] = { 'name': data[i].groupName, 'data': [] };

            groups[groupid].data.push(data[i]);
        } else {
            groups._none.data.push(data[i]);
        }
    }

    // output the data to HTML appending an H4 where neccessary
    for (var group in groups) {
        if (groups[group].data.length == 0) continue;
        if (group != '_none') element.append('<h4>' + groups[group].name + '</h4>');

        for (var j = 0; j < groups[group].data.length; j++) {
            element.append('<div><strong>' + groups[group].data[j].name + '</strong> : ' + groups[group].data[j].display + '</div>');
        }
    }
}

Again this is checked into the Colspan branch so please go have a look and see how it works for yourself. The test page is again issue23.htm in the root.

Please note there is currently no styling applied to the detail row and as such the h4's may look a little out of place however in response to Issue #26 I will be adding into this branch some default styling for the detail row.

Thanks
Steve

[duckwilliamson]

This works great! I'm using the temporary version now and look forward to it moving into release.