JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.12.1/af-2.4.0/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/date-1.1.2/fc-4.1.0/fh-3.2.4/r-2.3.0/sc-2.0.7/sb-1.3.4/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.12.1/af-2.4.0/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/date-1.1.2/fc-4.1.0/fh-3.2.4/r-2.3.0/sc-2.0.7/sb-1.3.4/datatables.min.js"></script>
<script src="https://kit.fontawesome.com/202333858a.js"></script>
            <table class="Grid" id="DistroGrid" data-dbtable="Bogeys">
              <thead>
                <tr>
                  <th class="TwoLtrOrg">2-Letter Org</th>
                  <th class="CivPayBaseline">CivPay</th>
                  <th class="CivPayOffset">CivPay Offset ($)</th>
                  <th class="CivPayOffsetPrcnt">CivPay Offset (%)</th>
                  <th class="NonPayBaseline">Non-Pay</th>
                  <th class="NonPayOffset">Non-Pay Offset ($)</th>
                  <th class="NonPayOffsetPrcnt">Non-Pay Offset (%)</th>
                  <th class="PecSum">Total Dist</th>
                  <th class="GeneralOffset">General Offset ($)</th>
                  <th class="GeneralOffsetPrcnt">General Offset (%)</th>
                </tr>
              </thead>
              <tfoot>
                <tr class="TotalRow SumRow">
                  <td>
                    Total
                  </td>
                  <td class="CivPaySum NA acct">
                    <span>0</span>
                  </td>
                  <td class="CivPayOffsetSum NA acct">
                    <span>0</span>
                  </td>
                  <td class="CivPayOffsetPrcntSum NA prcnt">
                    <span>0</span>
                  </td>
                  <td class="NonPaySum NA acct">
                    <span>0</span>
                  </td>
                  <td class="NonPayOffsetSum NA acct">
                    <span>0</span>
                  </td>
                  <td...

CSS

.Grid {
  /*border: 1px solid #ddd !important;*/
  /*border-collapse: collapse !important;*/
  /*font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;*/
  width: 100% !important;
  min-width: 100% !important;
}

.Grid th,
th.dtfc-fixed-left {
  background-color: steelblue !important;
  font-weight: bold !important;
  color: white !important;
  text-align: center !important;
}

.Grid tr:nth-child(odd),
tr.odd td {
  background-color: #FFFFFF !important;
}

.Grid tr:nth-child(even),
tr.even td {
  background-color: #F2F2F2 !important;
}

.Grid tr:hover {
  background-color: #ddd !important;
}

.Grid th,
.Grid td {
  padding: 5px;
  border: 1px solid #ccc;
  font-size: 10pt;
  border-top-width: 0px;
  min-width: 90px;
  max-width: 250px;
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.Grid td {
  /*height: 25px;*/
  color: black;
}

td.acct,
th.acct {
  min-width: 120px;
}

.Grid th:hover,
.Grid td:hover {
  overflow: visible;
  white-space: normal;
}

.Grid,
.Grid table td {
  border: 0px solid #ccc;
}

.Grid th a,
.Grid th a:visited {
  color: #FFFFFF;
}

tbody .TotalRow {
  display: none;
}

tfoot .SumRow td {
  border-top-width: medium;
  border-top-color: black;
  border-top-style: solid;
}

.TotalRow td {
  background-color: #FAFFC6;
  font-weight: bold;
}

.TotalCol {
  background-color: #FAFFC6;
  font-weight: bold;
}

.enMoney {
  text-align: right;
}

.enMoney::before {
  content: "$";
  float: left;
}

.negMoney {
  text-align: right;
  color: red !important;
}

.negMoney::before {
  content: '($';
  float: left;
}

.negMoney::after {
  content: ')';
}

.delta {
  font-weight: bold;
}

.negDelta {
  color: red;
}

.posDelta {
  color: green;
}

.prcnt,
.acct {
  text-align: right !important;
}

.prcnt::after {
  content: " %";
}

JavaScript

$(document).ready(function() {
  renderWingFinPlanDistroGrid();
});

function renderWingFinPlanDistroGrid() {
  $("#DistroGrid").DataTable({
    data: json.data,
    createdRow: function(row, data, dataIndex, cells) {
      $(row).addClass('DistroRow');
      if (data.IsArchived === true) {
        $(cells).each(function() {
          $(this).attr('data-readonly', 'true')
            .removeAttr('onfocus')
            .addClass('NA');
        });
      }
    },
    columns: [{
        data: 'Grouping',
        render: function(data, type, row) {
          var html = '';
          html += '<span class="deleto"><i class="fas fa-trash"></i></span>&nbsp;|&nbsp;' + data + '<br />';
          if (row.HasUsers) {
            html += '<a href="#" class="ManageUsers raitem" data-hasusers="True" title="Assign Users" data-org="' + row.GroupingId + '" data-fy="' + $('#hiddenFy').val() + '"><i class="fas fa-user-edit"></i></a>&nbsp;|&nbsp;';
          } else {
            html += '<a href="#" class="ManageUsers raitem" data-hasusers="False" title="Assign Users" data-org="' + row.GroupingId + '" data-fy="' + $('#hiddenFy').val() + '"><i class="fas fa-user-edit"></i></a>&nbsp;|&nbsp;';
          }
          html += '<a href="../SubDistributions/FinPlanSubDistro?orgId=' + row.GroupingId + '&fy=' + $('#hiddenFy').val() + '&pecId=' + $('#hiddenPecId').val() + '" title="Sub Distribution"><i class="fas fa-hand-holding-usd"></i></a>&nbsp;|&nbsp;';
          html += '<a href="../IrlMaster/TwoLtrIrlWorkspace?orgId=' + row.GroupingId + '&fy=' + $('#hiddenFy').val() + '" title="IRL"><i class="fas fa-money-check-alt"></i></a>';
          return html;
        }
      },
      {
        data: 'CivPayDollars',
        render: function(data, type, row) {
          if (row.PecCivPay) {
            return '<span>' + data + '</span>';
          } else {
            return null;
          }
        },
        createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
          if...