JSFiddle - React, Tailwind, and code Playground
by joedoe
HTML
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
JavaScript
var dataSet = [
['Trident','Internet Explorer 4.0','ThisveryveryveryveryveryveryLongTextShouldBreakinColumn','4','X','Trident','Internet Explorer 4.0','Win 95+','4','X','Trident','Internet Explorer 4.0','Win 95+','4','X','Trident','Internet Explorer 4.0','Win 95+','4','X','X','X','X','X','X','X','X','X','X','X','X','X'],
['Trident','Internet Explorer 4.0','Win 95+','This Text in column should not break and need to display in one line. So colunm has to be long .','X','Trident','Internet Explorer 4.0','Win 95+','4','X','Trident','Internet Explorer 4.0','Win 95+','4','X','Trident','Internet Explorer 4.0','Win 95+','4','X','X','X','X','X','X','X','X','X','X','X','X','X']
];
var $HtmlMarkup =
$("<div >\
<table id = 'grid' class='display compact' width='100%' >\
<thead>\
<tr>\
<th>id</th>\
<th>ON</th>\
<th>ASB</th>\
<th>VPSZ</th>\
<th>KVZ-Bez.</th>\
<th>AR</th>\
<th>HK-Bez.</th>\
<th>Prio</th>\
<th>ZOOM-Ring</th>\
<th>ZOOM-Reihenfolge</th>\
<th>MFG-Typ</th>\
<th>SM-NR MSAN</th>\
<th>Plz</th>\
<th>Ort</th>\
<th>Strasse</th>\
<th>Hausnr.</th>\
<th>Hausnr. Zusatz</th>\
<th>Plan Materialeingang</th>\
<th>Materialeingang_Lager_SUB_ActualStar</th>\
<th>Fehlmaterial Compass</th>\
<th>abweichender Lagerort</th>\
<th>Freigabe_Montage_ActualStart</th>\
<th>Freigabe_Inbetriebnahme_ActualStart</th>\
<th>Angeliefert</th>\
...