JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<link rel="stylesheet" href="http://mottie.github.io/tablesorter/css/theme.blue.css">
<script src="http://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<table id="call_details" class="tablesorter" style="width:100%;">

<thead>
	<tr>
		<th>date</th>
		<th>time</th>
		<th>from</th>
		<th>to</th>
		<th>int</th>
		<th>t.talking</th>
		<th>t.waiting</th>
	</tr>
	
</thead>

<tbody>
	<tr class="toggle">
		<td>02.12.2013</td>
		<td>09:54:16</td>
		<td>4952879550</td>
		<td>6607726</td>
		<td>140</td>
		<td>01:01:15</td>
		<td></td>
	</tr>
	<tr class="tablesorter-childRow">
		<td>02.12.2013</td>
		<td>10:54:16</td>
		<td>4952879550</td>
		<td>126</td>
		<td></td>
		<td></td>
		<td>00:00:07</td>
	</tr>
	<tr class="tablesorter-childRow">
		<td>02.12.2013</td>
		<td>10:54:16</td>
		<td>4952879550</td>
		<td>140</td>
		<td>140</td>
		<td>00:01:08</td>
		<td>00:00:07</td>
	</tr>
	<tr class="toggle lose">
		<td>06.12.2013</td>
		<td>12:41:58</td>
		<td>4952879550</td>
		<td>6607726</td>
		<td>140</td>
		<td>00:02:02</td>
		<td></td>
	</tr>
	<tr class="tablesorter-childRow lose">
		<td>06.12.2013</td>
		<td>12:41:58</td>
		<td>4952879550</td>
		<td></td>
		<td>118</td>
		<td>00:02:00</td>
		<td>00:00:02</td>
	</tr>
	<tr class="tablesorter-childRow lose">
		<td>06.12.2013</td>
		<td>12:41:58</td>
		<td>4952879550</td>
		<td>105</td>
		<td></td>
		<td></td>
		<td>00:00:02</td>
	</tr>
	<tr class="tablesorter-childRow lose">
		<td>06.12.2013</td>
		<td>12:41:58</td>
		<td>4952879550</td>
		<td>126</td>
		<td></td>
		<td></td>
		<td>00:00:02</td>
	</tr>
	<tr class="tablesorter-childRow lose">
		<td>06.12.2013</td>
		<td>12:41:58</td>
		<td>4952879550</td>
		<td>140</td>
		<td>140</td>
		<td>00:00:23</td>
		<td>00:00:02</td>
	</tr>
	<tr class="toggle">
		<td>06.12.2013</td>
		<td>15:26:58</td>
		<td>4952879550</td>
		<td>6607726</td>
		<td>105</td>
		<td>00:03:34</td>
		<td></td>
	</tr>
	<tr...

JavaScript

// Widget: filter
// **************************
;(function($) {
"use strict";
var ts = $.tablesorter || {};

ts.addWidget({
	id: "cfilter",
	priority: 50,
	options : {
		filter_anyMatch      : false, // if true overrides default find rows behaviours and if any column matches query it returns that row
		filter_childRows     : false, // if true, filter includes child row content in the search
		filter_columnFilters : true,  // if true, a filter will be added to the top of each table column
		filter_cssFilter     : '',    // css class name added to the filter row & each input in the row (tablesorter-filter is ALWAYS added)
		filter_filteredRow   : 'filtered', // class added to filtered rows; needed by pager plugin
		filter_formatter     : null,  // add custom filter elements to the filter row
		filter_functions     : null,  // add custom filter functions using this option
		filter_hideFilters   : false, // collapse filter row when mouse leaves the area
		filter_ignoreCase    : true,  // if true, make all searches case-insensitive
		filter_liveSearch    : true,  // if true, search column content while the user types (with a delay)
		filter_onlyAvail     : 'filter-onlyAvail', // a header with a select dropdown & this class name will only show available (visible) options within the drop down
		filter_reset         : null,  // jQuery selector string of an element used to reset the filters
		filter_saveFilters   : false, // Use the $.tablesorter.storage utility to save the most recent filters
		filter_searchDelay   : 300,   // typing delay in milliseconds before starting a search
		filter_startsWith    : false, // if true, filter start from the beginning of the cell contents
		filter_useParsedData : false, // filter all data using parsed content
		filter_serversideFiltering : false, // if true, server-side filtering should be performed because client-side filtering will be disabled, but the ui and events will still be used.
		filter_defaultAttrib : 'data-value' // data...