JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<script src="http://www.datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://www.datatables.net/release-datatables/media/css/demo_table_jui.css">
<link rel="stylesheet" href="http://www.datatables.net/media/css/jui_themes/smoothness/jquery-ui-1.7.2.custom.css">
<script src="http://www.datatables.net/media/css/site_jui.ccss"></script>
<table id="institutionsTable"></table>

JavaScript

data= [
  {inst_id: 123, institution_name: 'test1', institution_type: 'test2', address: '12'},
    {inst_id: 123, institution_name: 'test1', institution_type: 'test2', address: '12'},
  {inst_id: 123, institution_name: 'test1', institution_type: 'test2', address: '12'},
  {inst_id: 123, institution_name: 'test1', institution_type: 'test2', address: '12'},
  {inst_id: 123, institution_name: 'test1', institution_type: 'test2', address: '12'},
  {inst_id: 123, institution_name: 'test1', institution_type: 'test2', address: '12'},
  {inst_id: 123, institution_name: 'test1', institution_type: 'test2', address: '12'},
  {inst_id: 123, institution_name: 'test1', institution_type: 'test2', address: '12'},
  {inst_id: 123, institution_name: 'test1', institution_type: 'test2', address: '12'},
  {inst_id: 123, institution_name: 'test1', institution_type: 'test2', address: '12'},
  {inst_id: 123, institution_name: 'test1', institution_type: 'test2', address: '12'},
  {inst_id: 123, institution_name: 'test1', institution_type: 'test2', address: '12'},
  {inst_id: 123, institution_name: 'test1', institution_type: 'test2', address: '12'},
  {inst_id: 123, institution_name: 'test1', institution_type: 'test2', address: '12'}  
]

var oTable = $('#institutionsTable').dataTable( {
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bAutoWidth": false,
                  //for defer rendering! but not work well
                "bDeferRender": true,
                "iDisplayLength" : 10,
  "iDeferLoading": data.length,
                "aaData": data,                
                "aoColumns": [
                    {
                        "mData": "institution_name"
                    },
                    {
                        "mData": "institution_type"
                    },
                    {
                        "mData": "address"
                    } ,
                    { 
                        "sTitle":...