JSFiddle - React, Tailwind, and code Playground

by piyushpranjal

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/scroller/1.4.2/js/dataTables.scroller.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/1.4.2/css/scroller.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table id="example" class="table table-bordered table-condensed" width="100%"></table>

CSS

.text-wrap{
    white-space:normal;
}
.width-200{
    width:100px;
}

JavaScript

var detailsSample = "DataTables and its extensions are extremely configurable libraries and almost every aspect of the enhancements they make to HTML tables can be customised. Features can be enabled, disabled or customised to meet your exact needs for your table implementations."
var dataList = [];

for (var i=1; i<=500; i++)
{
		var dataRow = {};
    
    dataRow.ID = i;
    dataRow.FirstName = "First Name " + i;
    dataRow.LastName = "Last Name " + i;
    
    if (i%5 ==0)
    {
    	dataRow.Details = detailsSample;
    }
    else
    {
    	dataRow.Details = "Large text "+i;
    }
    dataRow.Country = "Country Name";
    
    dataList.push(dataRow);
}

$('#example').DataTable( {
				data:						dataList,
        deferRender:    true,
        scrollX: 				true,
        scrollY:        200,
        scrollCollapse: true,
        scroller:       true,
        searching: 			false,
        paging: 				true,
        info: 					false,
        columns: [
                { title: "ID", data: "ID" },
                { title: "First Name", data: "FirstName" },
                { title: "Change Summary", data: "LastName"},
                { title: "Details", data: "Details" },
                { title: "Country", data: "Country" }               
            ],
  columnDefs: [
    {
      render: function (data, type, full, meta) {
        return "<div class='text-wrap width-200'>" + data + "</div>";
      },
      targets: 3
    }
  ]
    } );