JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="tableUserReport" style="width:1200px">
            <thead>
            <tr>
                <th>Region</th>
                <th>Group</th>
                <th>Billing unit</th>
                <th>Role</th>
                <th>Userid</th>
                <th>Email id</th>
                <th>First name</th>
                <th>Last name</th>
                <th>Last sign on date</th>
                <th>Created date</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
  </body>
</html>

CSS

table#tableUserReport {
    table-layout: fixed;
}
td.details-control {
	background: url('../images/details_open.png') no-repeat right bottom;
	cursor: pointer;
}

tr.shown td.details-control {
	background: url('../images/details_close.png') no-repeat right bottom;
}

tr.breakword {
    word-break: break-word;
}

div#divErrMsg ol li{
  margin-left: 40px;
}

div.dt-buttons.buttons-right {
    float: left;
}

JavaScript

$(document).ready( function () {
  
  var jsonArr = [{"userInfo":{"userId":"testuser4","emailId":"broker-not-available@test.com","firstName":"MeceinEmp","lastName":"ln"},"region":"CAL","groupId":51,"billingUnit":"ALL","purchaserRole":"PURCHASER 4","lastSignOnDate":"07/17/2019","createdDate":"07/17/2019"},{"userInfo":{"userId":"testuser4","emailId":"broker-not-available@test.com","firstName":"MeceinEmp","lastName":"ln"},"region":"CAL","groupId":45,"billingUnit":"ALL","purchaserRole":"PURCHASER 4","lastSignOnDate":"07/17/2019","createdDate":"07/17/2019"},{"userInfo":{"userId":"testuser4","emailId":"broker-not-available@test.com","firstName":"MeceinEmp","lastName":"ln"},"region":"CAL","groupId":46,"billingUnit":"ALL","purchaserRole":"PURCHASER 4","lastSignOnDate":"07/17/2019","createdDate":"07/17/2019"},{"userInfo":{"userId":"testuser4","emailId":"broker-not-available@test.com","firstName":"MeceinEmp","lastName":"ln"},"region":"CAL","groupId":55,"billingUnit":"ALL","purchaserRole":"PURCHASER 4","lastSignOnDate":"07/17/2019","createdDate":"07/17/2019"},{"userInfo":{"userId":"testuser4","emailId":"broker-not-available@test.com","firstName":"MeceinEmp","lastName":"ln"},"region":"CAL","groupId":62,"billingUnit":"ALL","purchaserRole":"PURCHASER 4","lastSignOnDate":"07/17/2019","createdDate":"07/17/2019"},{"userInfo":{"userId":"testuser4","emailId":"broker-not-available@test.com","firstName":"MeceinEmp","lastName":"ln"},"region":"CAL","groupId":65,"billingUnit":"ALL","purchaserRole":"PURCHASER 4","lastSignOnDate":"07/17/2019","createdDate":"07/17/2019"},{"userInfo":{"userId":"testuser4","emailId":"broker-not-available@test.com","firstName":"MeceinEmp","lastName":"ln"},"region":"CAL","groupId":83,"billingUnit":"ALL","purchaserRole":"PURCHASER...