jQuery DataTables: COLSPAN in table body TBODY

jQuery DataTables only supports COLSPAN or ROWSPAN attributes in table header as long as you have at least one header cell per column. See Complex headers (rowspan and colspan) example for more details and demonstration.

Officially jQuery DataTables doesn’t support COLSPAN or ROWSPAN attributes for a cell in table body.

There is a way to use ROWSPAN attribute with RowsGroup plugin, see jQuery DataTables: ROWSPAN in table body TBODY for more details and examples.

The problem with COLSPAN attribute is that jQuery DataTables requires one TD element for each cell in table body.

The solution is to include a TD node for each cell, use COLSPAN attribute on the first cell in a group and hide the remaining cells by applying display: none CSS style.

HTML data

The following code demonstrates how to to group 3 cells starting from the cell in the second column.

<tr>
   <td>Ashton Cox</td>
   <td colspan="3" align="center">N/A</td>
   <td style="display: none"></td>
   <td style="display: none"></td>
   <td>2009/01/12</td>
   <td>$86,000</td>
</tr>

Please note that jQuery DataTables will use data in each individual cell to perform filtering and sorting.

For example, sorting by Office or Age will show Ashton Cox as the first record because hidden cells in third and fourth columns contain no data. Either disable filtering and/or sorting or use appropriate data for hidden columns if this behavior is undesirable.

Example

Ajax or JavaScript sourced data

When data is received via Ajax request or provided as JavaScript array, a different technique can be used utilizing the same idea.

I will use createdRow option to modify required cells when TR element is created in table body.

The following code demonstrates how to to group 3 cells starting from the cell in the second column when data in the first column is Ashton Cox.

var table = $('#example').DataTable({
    ajax: 'https://gyrocode.github.io/files/jquery-datatables/arrays.json',
    createdRow: function(row, data, dataIndex){
        // If name is "Ashton Cox"
        if(data[0] === 'Ashton Cox'){
            // Add COLSPAN attribute
            $('td:eq(1)', row).attr('colspan', 3);

            // Hide required number of columns
            // next to the cell with COLSPAN attribute
            $('td:eq(2)', row).css('display', 'none');
            $('td:eq(3)', row).css('display', 'none');

            // Update cell data
            this.api().cell($('td:eq(1)', row)).data('N/A');
        }
    }
});

Example

COLSPAN and ROWSPAN

It is possible to group cells both vertically and horizontally simultaneously if we combine workaround presented in this article with workaround for ROWSPAN attribute presented in jQuery DataTables: ROWSPAN in table body TBODY.

Example

Highlights

I have disabled sorting and searching for all columns except the first one so that the secondary row with additional information always appears after the primary row and both primary and secondary row appear on the screen when table is searched. There is a room for improvements but I don’t want to overcomplicate this example.

Below is the data for this example in JSON format.

{
   "data": [
      ["Tiger Nixon","System Architect","Edinburgh","5421","2011/04/25","$320,800"],
      ["Tiger Nixon","Additional information","","","",""],
      ["Garrett Winters","Accountant","Tokyo","8422","2011/07/25","$170,750"],
      ["Garrett Winters","Additional information","","","",""],
      ["Ashton Cox","Junior Technical Author","San Francisco","1562","2009/01/12","$86,000"],
      ["Ashton Cox","Additional information","","","",""],
      ["Cedric Kelly","Senior Javascript Developer","Edinburgh","6224","2012/03/29","$433,060"],
      ["Cedric Kelly","Additional information","","","",""],
      ["Airi Satou","Accountant","Tokyo","5407","2008/11/28","$162,700"],
      ["Airi Satou","Additional information","","","",""]
   ]
}

Grouping by name is possible because name is identical in both elements of the array representing primary and secondary row.

I am using empty value in the “Office” column as an indication that grouping with COLSPAN is needed in the secondary row.

Feedback

Please leave a comment on how you are using these workarounds for COLSPAN or ROWSPAN attributes in your project.