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.

You May Also Like

Comments

  1. Hi Michael,

    Thank you for developing this fantastic plugin for the Datatable! I have two questions about “COLSPAN and ROWSPAN” that I hope you may have solutions.(https://jsfiddle.net/gyrocode/efuwgg1L/?utm_source=website&utm_medium=embed&utm_campaign=efuwgg1L)

    1. At the bottom of table it shows “Showing 1 to 10 of 10 entries”. Is it possible to use the row group as the identity and count the number of row groups instead of the rows. For example, for this case, I would like to show “Showing 1 to 5 of 5 entries” base on the counting of row groups.

    2. When I search by typing the key words that are included in columns “Position” to “Salary” in the search box, the result only shows the rows in which the key words are included. If I search by typing the person’s name, it returns the row group. Is it possible to show the row group no matter what key words are used? In other words, when I search for key words included in other columns than the first one, the returning results show the row group, not the specific single row.

  2. Brilliant! I have a simple, and short, HTML based table that I decided to use DataTable on. This was mostly to make it look uniform with all of the more complex AJAX processed forms. The COLSPAN trick worked great – leaving the cells in but hidden. Thank you for the solution!

        1. Ok, now I understand. See this example demonstrating emulation of ROWSPAN and COLSPAN attributes using DataTables with HTML-sourced data. Please see record for Ashton Cox where all records are grouped by office and that record is also have three columns combined (Age, Start Date, Salary).

  3. Hi

    How can we incorporate column visibilty in account. It works fine but when some columns are dynamically hidden how can it fit accordingly. 

    1. I haven’t tested it but I suppose you would need to use classes instead of td:eq(1) selector and calculate COLSPAN attribute value dynamically based on number of currently visible columns.

  4. Thank you for the plugin. Can you guide how can we have 2 instances of datatable with rowsgroup ?

    when i use 2 datatables it works with only one but not work for the second.

Leave a Reply

(optional)

This site uses Akismet to reduce spam. Learn how your comment data is processed.