JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/dt-2.1.7/datatables.min.js"></script>
  <div id="mainDiv" style="padding:25px; background-color:white;">
    <div class="col-sm-12">
        <table id="table" class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>1</th>
              <th>2</th>
              <th>3</th>
              <th>4</th>
              <th>5</th>
              <th>6</th>
              <th>7</th>
              <th>8/th>
              <th>9/th>
            </tr>
          </thead>
        </table>
    </div>
</div>
</body>
</html>

CSS

#table tr:nth-child(n):hover {
     --bs-table-bg: yellow;
 }

 /* tr.odd { */
 #table > tbody > tr:nth-child(2n+1) {
     --bs-table-bg: lightcyan;
 }

 /* tr.even { */
 #table > tbody > tr:nth-child(2n) {
     --bs-table-bg: #c5fbfb;
 }

 #table td, #table th {
     border: 0;
 }

 /* #table tr.odd td { */
 /* #table tr:nth-child(2n+1) td {
     border-top: 1px solid black;
 } */

 /* #table tr.even td { */
 #table tr:nth-child(n) td {
     border-top: 1px solid black;
 }

 #table thead th, #table tbody td {
     padding-top: 4px;
     padding-bottom: 4px;
 }

 #table td {
     max-width: 100%;
     white-space: normal;
     text-overflow: ellipsis;
     word-break: break-all;
     overflow: hidden;
 }

 #table_filter {
     position: absolute;
     right: 25px;
     top: 100px;
 }

 td input[type="checkbox"] {
     margin: 0 auto;
     width: 100%;
 }

 div.dataTables_filter {
     display: inline-block;
     margin-left: 1em;
     float: right;
 }

JavaScript

var dataSet = [{"UnqMbrId":111111,"CommentNum":3,"CommentsUser":"xxxxxx ","CommentsDttm":"2024-10-04T11:44:48.289605","Comments":"This is a comment 3.","FLN":"             ","AlertInd":"0","AlertUserEndDt":"1900-01-01T00:00:00","IsSystemAccount":0},{"UnqMbrId":111111,"CommentNum":2,"CommentsUser":"xxxxxx ","CommentsDttm":"2024-10-04T11:44:35.902748","Comments":"This is a comment 2.","FLN":"             ","AlertInd":"0","AlertUserEndDt":"1900-01-01T00:00:00","IsSystemAccount":0},{"UnqMbrId":111111,"CommentNum":1,"CommentsUser":"xxxxxx ","CommentsDttm":"2024-10-04T11:44:11.412695","Comments":"This is a comment 1.","FLN":"             ","AlertInd":"0","AlertUserEndDt":"1900-01-01T00:00:00","IsSystemAccount":0}];

$("#table").DataTable({
    data: dataSet,
    destroy: true,
    columns: [
        {
            data: "CommentsDttm",
            visible: false,
            // render: function (data, type, row) { return moment(row.CommentsDttm).unix(); }
            render: function (data, type, row) { return new Date(row.CommentsDttm).getTime(); }
        },
        {
            data: "CommentsDttm",
            width: "15%",
            orderData: [0],
            // render: function (data, type, row) { return moment(row.CommentsDttm).format('MM/DD/YYYY') + '/' + row.CommentsUser; }
            render: function (data, type, row) { return new Date(row.CommentsDttm).toLocaleDateString('en-US').replace(/\d+/g, c => c.padStart(2, '0')) + '/' + row.CommentsUser; }
        },
        { data: "FLN", width: "12%", orderable: false },
        { data: "Comments", width: "68%", orderable: false },
        {
            data: "AlertInd",
            width: "5%",
            orderable: false,
            render: function (data, type, row, meta) {
                if (row.AlertInd === "1") {
                    return '<input id="chkAlert' + meta.row + '" type="checkbox" checked="checked" name="alertInd" />';
                }
                return '<input id="chkAlert' +...