JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid">
    <table id="TableItem" class="table table-bordered dataTable table-striped table-hover table-condensed dt-responsive" style="width:100%;" cellspacing="0">
        <thead>
            <tr>
                <th>User</th>
                <th>Name</th>
                <th>Email</th>
                <th>Modified On</th>
                <th>Status</th>
                <th>Active</th>
                <th>Profiles</th>
                <th>Actions</th>
            </tr>
        </thead>
    </table>
</div>

JavaScript

$(function () {
    oTable = $("#TableItem").DataTable({
        "sDom": 'TCR<"clear">lfrtip',
        tableTools: {
            "sRowSelector": 'td:not(.noselect)',
            "sRowSelect": "multi",
            "sSwfPath": "/Scripts/DataTables/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                "select_all",
                "select_none",
                "copy",
                "print",
                {
                    "sExtends": "collection",
                    "sButtonText": "Save",
                    "aButtons": ["xls", "pdf"]
                }
            ]
        },
        "responsive": true,
        "processing": true,
        "serverSide": true,
        "bPaginate": true,
        "bFilter": false,
        "aoColumns": [
            {
                "mRender": function (oAux, oType, oData) {
                    return oData.UserName;
                },
            },
            {
                "mRender": function (oAux, oType, oData) {
                    return oData.Name;
                },
            },
            {
                "mRender": function (oAux, oType, oData) {
                    return oData.Email;
                },
            },
            {
                "mRender": function (oAux, oType, oData) {
                    return (oData.ModifiedByName == null || oData.ModifiedByName == "") ? "" : DatetimeConverter(oData.ModifiedDate) + " - " + oData.ModifiedByName;
                },
            },
            {
                "mRender": function (oAux, oType, oData) {
                    return oData.StatusDescription;
                },
            },
            {
                "mRender": function (oAux, oType, oData) {
                    return oData.IsActive ? "<i class='fa fa-check'></i>" : "";
                },
                'class': 'dt-body-center'
            },
            {
                "mRender": function (oAux, oType, oData) {
                    var roles =...