How to split and group tables by column values

Sometimes you need to split a table into multiple tables, based on the value of a certain column. In other words, all rows that have the same value in the specified column will be put into the same sub-table. In this article we will discuss how to do that the right way, using the built-in functionality and the modification function groupbycolumn.

Let's assume that we have the following data input and we want to break it into smaller tables based on the geographical region, which happens to be column #1:

Georgia,Club 1
Georgia,Club 7                          
New Jersey,Club 2                                
New Jersey,Club 5
New Jersey,Club 6
New York,Club 3
New York,Club 4
Pennsylvania,Club 9
Rhode Island,Club 11
The first step is to break the input data into smaller tables using the value of the 1st column as the grouping key element. This is done by adding to the existing ruleset the following table rule:

Notice that we set the field priority to 10, in order to make sure that it will executed before all other rules that have the default priority equal to 0. After adding the split rule, the resulting list of tables looks like this:

This is OK, but there is room for improvement:
  • There is no need to repeat the same value in column #1
  • The table headers #1, #2, etc that appear in front of each resulting table are redundant in this case. also, you may wish to change the alignment of the tables (e.g. align them horizontally)
Let's see how to implement each of these improvements.

Remove column #1

Actually, we don't want to remove completely column #1, but instead replace it with a header row that will contain the unique value of this column. For this we will use the modification function groupbycolumn that does exactly that.

Function Name:groupbycolumn
Function Args:column id to group by, num of header row, num of footer rows, case insensitive
Note: all arguments are integer values. Example: 1,0,0,1. Only the first argument (column id) is required, the rest are optional.
Here is the settings we used in our example:

Here are the resulting tables:

Make the split header invisible and align the tables differently

This last step can be done using basic CSS statements. Since all elements has a CSS class attached to them, by changing the attributes of this class you can change the visual appearance of the table list. Here some ideas:

span.groupbyheader {
    font-weight: bold;
}
div.tabtitle {
   display: none;
}
div.tabsplit {
    float: left;
    width: 40%;
    margin: 10px 10px 10px 10px;
}
Resulting outcome:

span.groupbyheader {
    font-weight: bold;
}
div.tabtitle {
   display: none;
}
div.tabsplit {
    float: left;
    width: auto;
    margin: 10px 10px 10px 10px;
}
Resulting outcome:

Tip: If you want to apply different styling options to split tables on the same page, you may consider adding an extra DIV wrapper around the split tables, just to be more specific in your CSS statements. For instance, you can add this prepend/append rule:

Once we have added that rule, we can redefine our CSS statements with higher specificity as follows:
div.splitgroup1 div.tabtitle {
   display: none;
}
div.splitgroup1 div.tabsplit {
    float: left;
    width: auto;
    margin: 10px 10px 10px 10px;
}

Before using the modification function, you need to import it into your system.click here to download the demo ruleset along with the groupbycolumn modification function.You can import it like any other ruleset archive.