tablesorter grouping widget customization

Question

I have a requirement where I need the ability to group by a particular column in a table based on the users choice. I need to mirror the dynamic grouping functionality as shown in jqgrid documenation. I am using the table sorter grouping mechanism.Initially I tried jqGrid which worked well but we were not able to customize the css according to our requirement. I am using tablesorter along with the grouping widget. Now using this combo I can see that you can group by all the columns in the table by just clicking on the column header, which i need to limit. So, basically I need to load the table with a particular column grouped and then when the user clicks on the other columns only sorting should happen. Also,on grouping the widget is considering only the first letter instead of the whole word. I checked out the grouping code and there is a split function being used which should be modified. Can anyone please point me in the right direction for achieving my target

Answer 1

The grouping widget allows you to set it to group by letter, word, separator, date and to disable grouping of a column - see the "Header Class Names" section for a full list class names that can be used.

In your case, use group-word class name on the column you want to group by words, and group-false to disable grouping (demo)

HTML

<table class="tablesorter">
    <thead>
        <tr>
            <th class="group-word">AlphaNumeric</th>
            <th class="group-false">Numeric</th>
            <th class="group-false">Animals</th>
            <th class="group-false">Sites</th>
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

Script

$('table').tablesorter({
    theme: 'blue',
    sortList: [ [0, 0] ],
    widgets: ['zebra', 'group']
});

CSS (collapsable arrow)

/* collapsed arrow */
 tr.group-header td i {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid #888;
    border-right: 4px solid #888;
    border-left: 4px solid transparent;
    margin-right: 7px;
    user-select: none;
    -moz-user-select: none;
}
tr.group-header.collapsed td i {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #888;
    border-right: 0;
    margin-right: 10px;
}