JSFiddle - React, Tailwind, and code Playground

HTML

<?php if (isset($testResult)): ?>
  <table id="test">
    <thead>
      <tr>
        <th>RTVNum</th>
        <th>RTVDt</th>
        <th>Area</th>
        <th>CustCode</th>
        <th>ExtMatGrp</th>
        <th>Qty</th>
        <th>ExpDt</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tfoot>

    <tbody>
      <?php foreach ($testResult as $value): ?>
        <tr>
          <td>
            <?php echo $value['RTVNum']; ?>
          </td>
          <td>
            <?php echo $value['RTVDt']; ?>
          </td>
          <td>
            <?php echo $value['SOffcNm']; ?>
          </td>
          <td>
            <?php echo $value['CustCode']; ?>
          </td>
          <td>
            <?php echo $value['ExtMatGrp']; ?>
          </td>
          <td>
            <?php echo $value['Qty']; ?>
          </td>
          <td>
            <?php echo $value['ExpDt']; ?>
          </td>
        </tr>
        <?php endforeach ?>
    </tbody>

  </table>
  <?php endif; ?>

JavaScript

/* Test Table */
    $('#test').DataTable({
      deferRender: true,
      scrollY: 500,
      scrollCollapse: true,
      scroller: true,
      order: [
        [2, 'asc'],
        [4, 'asc']
      ],
      rowGroup: {
        startRender: function(rows, group) {
          var avg = rows
            .data()
            .pluck(5)
            .reduce(function(a, b) {
              return a + b.replace(/[^\d]/g, '') * 1;
            }, 0);

          return 'Total BO for ' + group + ' : ' +
            $.fn.dataTable.render.number(',', '.', 0, '').display(avg);
        },
        dataSrc: 2
      },

    });