JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.3/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.3/js/dataTables.responsive.min.js"></script>
<div style="width: 350px; border: 1px solid red">
    <table width="100%" class="display" id="example" cellspacing="0">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th></th>
            </tr>
        </thead>
    </table>
</div>

JavaScript

$(document).ready(function () {
    var aoColumns = [{
        "name": "First name"
    }, {
        "name": "Last name"
    }, {
        "name": "Position"
    }, {
        "name ": "Office "
    }, {
        data: null,
        defaultContent: "",
        className: 'control',
        orderable: false,
        targets: -1
    }];

    $('#example')

        .on('xhr.dt', function (e, settings, json) {
        //Doesn't help
        var tables = $.fn.dataTable.tables(true);
        $(tables).DataTable().responsive.recalc();
    })
        .on('page.dt', function (e, settings, json) {
        //Doesn't help also
        var tables = $.fn.dataTable.tables(true);
        $(tables).DataTable().responsive.recalc();
    })

        .DataTable({
        stateSave: true,
        responsive: {
            details: {
                type: "column",
                target: -1
            }
        },
        columns: aoColumns,
        serverSide: true,
        ajax: "http://webmax.ru/scripts/server_processing.php"
    });
});