jQuery DataTables: Row grouping and checkboxes


Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary
   var table = $('#example').DataTable({
      'ajax': '/lab/articles/jquery-datatables-row-grouping-and-checkboxes/arrays.txt',
      'rowsGroup': [0, 3],
      'columns': [
            'data': 2,
            'checkboxes': {
               'selectRow': false
         { 'data': 0 },
         { 'data': 1 },
         { 'data': 2 },
         { 'data': 3 },
         { 'data': 4 },
         { 'data': 5 }

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:


You May Also Like


  1. This is excellent work.

    I am trying to combine collapsible\expandable row grouping with checkboxes. I only need the collapse\expand button next to the row groups whilst still be able to select the checkboxes but I have been unable to achieve the desired result

    I put together an example here


    The idea is that I could collapse or expand all row groups OR I could collapse or expand individual row groups AND at the same time I could select or unselect all rows of the table or only certain rows within some or all of the row groups inside the table. 

    I believe the same question was asked by another user here:


    Is this doable with the gyrocode extensions and plugins?

      1. Hi Michael,

        Thank you for looking into this issue for me.

        The desired result is actually the reverse of what you have done. I think I didn’t explain or describe the issue correctly.

        The intention is to have the expand button ONLY on the header rows, next to the checkboxes of the header rows.

        For example take the first header row ,Tokyo(2)

        On this header row, I want an expand button followed by the checkbox.

        The expand button next to the header row will expand or collapse the two child rows under Tokyo(2) and the checkbox on this header row will select or unselect the two child rows under Tokyo(2)

        The child rows will have NO expand button but only their checkboxes as the user could select only one item under a header row and submit, leaving the others in place.

        The goal is for the table to only show the header rows by default or when the table first loads. The user can then expand each header row individually by clicking on the Expand button 

        On top of the table, we could have a pair of Expand All \ Collapse All buttons to expand or collapse all header rows at once.

        I hope this makes sense.

        Thank you,


  2. Any news? Could you please let me know if the above collapsible row groups with checkboxes can be achieved with the gyrocode library?

    Thanks, Rod

      1. This is perfect!  Thank you so much. I think this example should be published as another use case of the gyrocode plugin.

Leave a Reply


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