JSFiddle - React, Tailwind, and code Playground

by dswitzer

HTML

<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<table id="example" class="display" width="400" cellspacing="0">
	<thead>
		<tr>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Age</th>
			<th>Start date</th>
			<th>Salary</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tiger Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>61</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
		</tr>
		<tr>
			<td>Garrett Winters</td>
			<td>Accountant</td>
			<td>Tokyo</td>
			<td>63</td>
			<td>2011/07/25</td>
			<td>$170,750</td>
		</tr>
		<tr>
			<td>Ashton Cox</td>
			<td>Junior Technical Author</td>
			<td>San Francisco</td>
			<td>66</td>
			<td>2009/01/12</td>
			<td>$86,000</td>
		</tr>
		<tr>
			<td>Cedric Kelly</td>
			<td>Senior Javascript Developer</td>
			<td>Edinburgh</td>
			<td>22</td>
			<td>2012/03/29</td>
			<td>$433,060</td>
		</tr>
		<tr>
			<td>Airi Satou</td>
			<td>Accountant</td>
			<td>Tokyo</td>
			<td>33</td>
			<td>2008/11/28</td>
			<td>$162,700</td>
		</tr>
		<tr>
			<td>Brielle Williamson</td>
			<td>Integration Specialist</td>
			<td>New York</td>
			<td>61</td>
			<td>2012/12/02</td>
			<td>$372,000</td>
		</tr>
		<tr>
			<td>Herrod Chandler</td>
			<td>Sales Assistant</td>
			<td>San Francisco</td>
			<td>59</td>
			<td>2012/08/06</td>
			<td>$137,500</td>
		</tr>
		<tr>
			<td>Rhona Davidson</td>
			<td>Integration Specialist</td>
			<td>Tokyo</td>
			<td>55</td>
			<td>2010/10/14</td>
			<td>$327,900</td>
		</tr>
		<tr>
			<td>Colleen Hurst</td>
			<td>Javascript Developer</td>
			<td>San...

CSS

.datatable-column-width {
  overflow: hidden;
  text-overflow: ellipsis;
}

JavaScript

var $example = $("#example");

// we need to update the columns to support their width definitions
var $headings = $example.find("thead > tr > th");
$headings.each(function (idx, el){
	var $heading = $headings.eq(idx)
		, data = $heading.data();

	// the nth-child is 1-indexed, so we need to add one to the index we're looking up
	$headings.closest("table").find("tbody > tr > *:nth-child(" + (idx+1) + ")").wrapInner($('<div class="datatable-column-width" />'));
});

$example
				.on('init.dt', function (e, settings){
					var instance = settings.oInstance.api();
          console.log('here');
            
					/*
					 * This is a hack to prevent the column widths from changing when the sort order is changed
					 */

					// update the data in the column so it can't be wider than the current column size
					$headings.each(function (idx, el){
						var $heading = $headings.eq(idx);

						// while this shouldn't be doing anything, w/out it the column sizes can shift when changing the sort order
						$heading.css("width", $heading.width());

						// this sets the max-width of each inner div to the current width of the column, so that changing the sort order will not cause the columns
						// to change size
						instance.column(idx).nodes().to$().find(".datatable-column-width").css("max-width", $heading.width());
					});

				})
.DataTable({
	  paging: true
	, pageLength: 5
	, pagingType: 'simple_numbers'
	, lengthChange: false
	, autoWidth: true // must be true for responsive designs when scrolling is enabled
	//, scrollY: 371 // comment out to remove fixed header
	, scrollCollapse: false
	, searching: true
	, order: [] // data is pre-sorted
});