JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://datatables.net/release-datatables/media/js/jquery.js"></script>
<script src="https://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button id="show-table" class="btn btn-primary">Show Table on Modal</button>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
          <div class="col-md-12">
          <table id="employee" class="table table-bordered">
              <thead>
                <tr>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Email Name</th>
                  <th>Tax</th>
                  <th>Salary</th>
                </tr>
              </thead>
              <tbody>

              </tbody>
              <tfoot>
                <tr>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th>0%</th>
                  <th>0.00</th>
                </tr>
              </tfoot>
          </table>
          </div>
          </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS

.table {
  margin-bottom: 0;
  table-layout: fixed;
}

JavaScript

(function(){
	// Trigger Modal Containing the Table
	$(document).on('click', '#show-table', function(){
  		
  		var list = [
    	{
      	first_name: 'John',
        last_name: 'Doe',
        email: '[email protected]',
        tax: 4,
        salary: 50000
      },
      {
      	first_name: 'Jane',
        last_name: 'Doe',
        email: '[email protected]',
        tax: 2,
        salary: 35000
      }
    ];

		var employees_table = $('table#employee').dataTable({
      "sDom": "frt",
			"searching": false,
			"paging": false,
			"ordering": false,
			"destroy": true,
			"scrollY": "375px",
			"scrollX": true,
			"scrollCollapse": true,
			"autoWidth": false,
      "data": list,
      "columns": [
        { data: 'first_name' },
        { data: 'last_name' },
        { data: 'email' },
        { data: 'tax' },
        { data: 'salary' }
    	],
      "footerCallback": function ( row, data, start, end, display ) {
          var api = this.api();

          // 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;
          };

          // percen_total
          var percent_total = api
            .column( 3 )
            .data()
            .reduce( function (a, b) {
              return intVal(a) + intVal(b);
            }, 0 );

          // Update footer
          $( api.column( 3 ).footer() ).html(
            percent_total + '%'
          );

          // fee total
          var fee_total = api
            .column( 4 )
            .data()
            .reduce( function (a, b) {
              return parseFloat(a) + parseFloat(b);
            }, 0 );

					// Update footer
            $( api.column( 4 ).footer() ).html(
              fee_total
            );
        }
    });
    
    // Show Modal
    $('#myModal').modal('show');
  });
})()