JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css">
<button onclick="createTable(true)">Create with visible cols</button>
<button onclick="createTable(false)">Create with an invisible col</button>
Render called <span id="renderCounter"></span> times

JavaScript

function createTable(visible)
{
    $('table').DataTable().destroy(true);
    $('#renderCounter').text('0');
    var tableData = [];
    for(var i=0; i < 500; ++i)
        tableData.push({ data1:'testData1', data2:'testData2' });
    //$('<table/>').appendTo('body').dataTable({ aoColumns:[{mData:'data'}], aaData:tableData });
    var table = $('<table/>').appendTo('body');
    
    var columns = 
        [
            {
                mData:'data1',
                type:'numeric',
                render:function ( data, type, item, meta )
                {
                    if(type == 'display')
                    {
                        $('#renderCounter').text(parseInt($('#renderCounter').text())+1);
                        return 'testRender';
                    }
                    return 1;
                }
            },
            { mData:'data2', visible:visible }
        ];
    
    
    //createDataTable(table, columns, tableData)
    table.dataTable({ aoColumns:columns, aaData:tableData, deferRender:true });
}