JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<table id="myTable" class="display">
			<thead>
				<tr>
				<th>Company</th>
				<th>Employee</th>
				<th>Position</th>
			</tr>
			</thead>
			<tbody>
         <tr>
           <td>Dunder Mifflin</td>
           <td>Michael Scott</td>
           <td>Manager</td>
         </tr>
         <tr>
           <td>Dunder Mifflin</td>
           <td>Dwight Schrute</td>
           <td>Assis. to the Regional Manager</td>
         </tr>
         <tr>
           <td>Dunder Mifflin</td>
           <td>Jim Halpert</td>
           <td>Salesman</td>
         </tr>
         <tr>
           <td>Pied Piper</td>
           <td>Richard Hendricks</td>
           <td>CEO</td>
         </tr>
          <tr>
           <td>Pied Piper</td>
           <td>Erlich Bachman</td>
           <td>Landlord</td>
         </tr>
         <tr>
           <td>Pied Piper</td>
           <td>Dinesh Chugtai</td>
           <td>Coder</td>
         </tr>
          <tr>
           <td>Stark Industries</td>
           <td>Tony Stark</td>
           <td>Iron Man</td>
         </tr>
         <tr>
           <td>Stark Industries</td>
           <td>Pepper Potts</td>
           <td>CEO</td>
         </tr>
         <tr>
           <td>Burns Industries</td>
           <td>Montgomery Burns</td>
           <td>CEO</td>
         </tr>
         <tr>
          <td>Wayne Enterprise</td>
           <td>Bruce Wayne</td>
           <td>Owner</td>
         </tr>
         <tr>
          <td>Wayne Enterprise</td>
           <td>Alfred Pennyworth</td>
           <td>Butler</td>
         </tr>
         <tr>
         <td>Los Pollos Hermanos</td>
           <td>Gustavo Fring</td>
           <td>Owner</td>
         </tr>  
			</tbody>
		</table>

JavaScript

table = $('#myTable').DataTable({
	        "order": [[ 0, 'asc' ]],
	        "pageLength": 5,
	        "lengthChange": false,
	        "drawCallback": function ( settings ) {
	            var api = this.api();
	            var rows = api.rows( {page:'current'} ).nodes();
	            var last=null;
	            
	            console.log('draw');
	 
	            api.column(0, {page:'current'} ).data().each( function ( group, i ) {
	                if ( last !== group ) {
	                    $(rows).eq( i ).before(
	                        '<tr class="group"><td colspan="3">'+group+'</td></tr>'
	                    );
	                    last = group;


	                }
	               $(rows).eq( i ).hide();
	            } );

				getlength();
// 				api.page.len(fred2);

	        }
	        
	    } );
      
    var fred2;
		var table;
		function getlength() {
			
			console.log('get length called');
				    fred2 = 0;
				    $('.group').each(function(i, obj) {
					    if(i < 11) {
					        var john = 		   $(this).prevAll('.group').first().nextUntil('.group').length;
					        console.log(john);
					        fred2 = fred2 + john;
					        console.log('fred2: ' + fred2);
					    }
				    });
				    return fred2; 
		 };
     
   
table.on( 'page.dt', function () {
	console.log( 'Redraw occurred at: '+new Date().getTime() );
	table.page.len(fred2).draw();
} );

table.on( 'init.dt', function () {
	console.log( 'Init occurred at: '+new Date().getTime() );
	table.page.len(fred2).draw();				
} );

      
      $(document).on('click', '.group', function(event){
			console.log('group');
			
			var grouphead = $(this);
			
			grouphead.nextUntil('.group').slideToggle();
			
		});