jQuery DataTables: ROWSPAN in table body TBODY

February 1, 2018
See jQuery DataTables: COLSPAN in table body TBODY if you are looking for a solution to add support for COLSPAN attribute for a cell in table body.

Plugin requires jQuery DataTables version 1.10 or above. According to the author’s post on DataTables forum, this plugin has the following features:

  • supports nested multi grouping rows
  • supports both client-side and server-side processing
  • correctly handles single-column and multi-column ordering

To use the plugin, you need to include JavaScript file dataTables.rowsGroup.js and use rowsGroup option as shown below. Option rowsGroup should be an array of the column selectors in order you want the grouping to be applied.

var table = $('#example').DataTable({
   'rowsGroup': [2]

More details on usage can be found on plugin’s project page.


Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary
   var table = $('#example').DataTable({
      'ajax': 'https://api.myjson.com/bins/qgcu',
      'rowsGroup': [2]

In addition to the above code, the following Javascript library files are loaded for use in this example:


The following CSS library files are loaded for use in this example to provide the styling of the table:


Edit on jsFiddle

You Might Also Like

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.

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