JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<div class="wrap">
    <table id="example" class="display" width="100%">
				<thead>
					<tr>
						<th>Name</th>
						<th>Position</th>
						<th>Office</th>
						<th>Age</th>
						<th>Start date</th>
						<th>Salary</th>
					</tr>
				</thead>

				

				<tbody>
					<tr>
						<td>Tiger Nixon</td>
						<td>System Architect</td>
						<td>Edinburgh</td>
						<td>1</td>
						<td>2011/04/25</td>
						<td>$3,120</td>
					</tr>
					<tr>
						<td>Garrett Winters</td>
						<td>Director</td>
						<td>Edinburgh</td>
						<td>1</td>
						<td>2011/07/25</td>
						<td>$5,300</td>
					</tr>
					<tr>
						<td>Ashton Cox</td>
						<td>Technical Author</td>
						<td>San Francisco</td>
						<td>1</td>
						<td>2009/01/12</td>
						<td>$4,800</td>
					</tr>
					<tr>
						<td>Cedric Kelly</td>
						<td>Javascript Developer</td>
						<td>Edinburgh</td>
						<td>1</td>
						<td>2012/03/29</td>
						<td>$3,600</td>
					</tr>
					<tr>
						<td>Jenna Elliott</td>
						<td>Financial Controller</td>
						<td>Edinburgh</td>
						<td>1</td>
						<td>2008/11/28</td>
						<td>$5,300</td>
					</tr>
					<tr>
						<td>Brielle Williamson</td>
						<td>Integration Specialist</td>
						<td>New York</td>
						<td>1</td>
						<td>2012/12/02</td>
						<td>$4,525</td>
					</tr>
					<tr>
						<td>Herrod Chandler</td>
						<td>Sales Assistant</td>
						<td>San Francisco</td>
						<td>1</td>
						<td>2012/08/06</td>
						<td>$4,080</td>
					</tr>
					<tr>
						<td>Rhona Davidson</td>
						<td>Integration Specialist</td>
						<td>Edinburgh</td>
						<td>1</td>
						<td>2010/10/14</td>
						<td>$6,730</td>
					</tr>
					<tr>
						<td>Colleen Hurst</td>
						<td>Javascript Developer</td>
						<td>San...

CSS

.wrap {
    width: 300px;
}

JavaScript

$('#example').DataTable( {
        "drawCallback": function( settings ) {
           $(this).append('<tfoot><tr><th></th><th></th><th></th><th></th><th></th><th></th></tr></tfoot>');
        },
        
    } );
    //$('#example').DataTable().destroy();
    $('#example').DataTable( {
            
            "fnInitComplete": function(){
                // Disable TBODY scoll bars
                $('.dataTables_scrollBody').css({
                    'overflow': 'hidden',
                    'border': '0'
                });
                
                // Enable TFOOT scoll bars
                $('.dataTables_scrollFoot').css('overflow', 'auto');
                
                // Sync TFOOT scrolling with TBODY
                $('.dataTables_scrollFoot').on('scroll', function () {
                    $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
                });                    
            },
            "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
            // Total over all pages
            total = api
                .column( 3 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Total over all pages
            total2 = api
                .column( 5 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Update footer
            $( api.column( 3 ).footer() ).html(
                total
            );
            $( api.column( 5 ).footer() ).html(
               ...