JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<div class="container">
    <table class="grid"></table>
</div>

CSS

.dataTable {
    width: 100% !important;
    margin: 0;
}

.dataTables_wrapper {
    position: relative;
}

.dataTables_scrollHeadInner {
    width: 100% !important;
}



.container {
    position: relative;
    width: 70%;
    border: 1px solid #f0f;
}

.container .grid {
    position: relative;
    overflow-x: hidden;
}

JavaScript

$(".grid").dataTable({
    bFilter: false,
    bScrollInfinite: true,
    bSort: true,
    bInfo: false,
    iScrollLoadGap: 5,
    sScrollX: "100%",
    aaSorting: [[1, "desc"]],
    bDeferRender: true,
    bProcessing: false,
    aaData: [
        { name: "test", test: 1, count: 2 },
        { name: "blah", test: 1, count: 2 },
        { name: "1234567890123456789012345678901234567890xxxxx", test: 1, count: 2 },
        { name: "how", test: 1, count: 2 },
        { name: "do i", test: 1, count: 2 },
        { name: "fix", test: 1, count: 2 },
        { name: "this?", test: 1, count: 2 },
    ],
    aoColumns: [
        { sTitle: "Name", mData: "name", sWidth: "40%" },
        { sTitle: "Test", mData: "test", sWidth: "30%" },
        { sTitle: "Count", mData: "count", sWidth: "20%" }
    ]
});