jQuery groupBy => HTML

README.md

groupBy => HTML

jsFiddle Example

Takes an object with the format key => list and a list of keys to exclude from the table. Returns an array of groups. The keys should be the ones used as the iterator or by the iterator when performing the group by to prevent redundancy of data in the output table.

Since JavaScript object keys can only be numbers or strings, if the data was grouped by multiple keys, the group key must be a string delimited by some value. By default, the separator is a comma ,.

groupByHTML(groups, keys[, sep])

The resulting group HTML follows this markup:

<div class=group>
    <div class=group-label>
        <span class=group-key></span>
        <!-- ... rest of group keys -->
    </div>
    <table class=group-table>
        <thead>
            <tr>
                <th></th>
                <!-- ... rest of non-grouped column names -->
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <!-- ... rest of column values -->
            </tr>
            <!-- ... rest of rows -->
        </tbody>
    </table>
</div>

groupByHtml.coffee

groupByHtml = (groups, keys, sep) ->
  html = []
  sep = sep or ","
  _.each groups, (list, groupKey) ->
    group = $("<div>").addClass("group")
    label = $("<span>").addClass("group-label")
    table = $("<table>").addClass("group-table")
    header = $("<tr>")
    tbody = $("<tbody>")
    if _.isString(groupKey)
      _.each groupKey.split(sep), (tok) ->
        label.append "<span class=group-key>" + $.trim(tok) + "</span>"
    else
      label.append "<span class=group-key>" + groupKey + "</span>"
    _.each list, (obj, i) ->
      tr = $("<tr>")
      _.each obj, (value, key) ->
        if keys.indexOf(key) >= 0
          i is 0
        else
          header.append "<th>" + key + "</th>"  if i is 0
          tr.append "<td>" + value + "</td>"

      tbody.append tr

    $("<thead>").appendTo(table).append header
    table.append tbody
    group.append label, table
    html.push group

  return html

groupByHtml.js

function groupByHtml(groups, keys, sep) {
    var html = [],
        sep = sep || ',';
    // Build group
    _.each(groups, function(list, groupKey) {
        var group = $('<div>').addClass('group'),
            label = $('<span>').addClass('group-label'),
            table = $('<table>').addClass('group-table'),
            header = $('<tr>'),
            tbody = $('<tbody>');
        if (_.isString(groupKey)) {
            _.each(groupKey.split(sep), function(tok) {
                label.append('<span class=group-key>' + $.trim(tok) + '</span>');
            });
        } else {
            label.append('<span class=group-key>' + groupKey + '</span>');
        }
        // Build table
        _.each(list, function(obj, i) {
            var tr = $('<tr>');
            _.each(obj, function(value, key) {
                // Add group label on first iteration
                if (keys.indexOf(key) >= 0) {
                    if (i == 0) {
                        
                    }
                } else {
                    // Add head row on first iteration
                    if (i == 0) {
                        header.append('<th>' + key + '</th>');
                    }
                    tr.append('<td>' + value + '</td>');
                }
            });
            tbody.append(tr);
        });
        $('<thead>').appendTo(table).append(header);
        table.append(tbody);    
        group.append(label, table);
        html.push(group);
    });
    return html;
}