JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.pengoworks.com/workshop/jquery/tablesorter/jquery.tablesorter.mod.js"></script>
<script src="http://www.pengoworks.com/workshop/jquery/tablesorter/jquery.tablesorter.collapsible.js"></script>
	<script type="text/javascript" src="./jquery-latest.js"></script>
	<script type="text/javascript" src="./jquery.tablesorter.mod.js"></script>
	<script type="text/javascript" src="./jquery.tablesorter.collapsible.js"></script>
	
<table id="makes" class = "grid tablesorter">
	<thead>
		<tr>
			<th class="" style="padding: 0; margin: 0;"></th>
			<th>Make</th>
			<th>Price From</th>
			<th>Price to</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td rowspan="2" class="collapsible"><a href="#" class="collapsed"></a></td>
         		<td rowspan="2" class="collapsible_alt">Vauxhall</td>
         		<td>8495</td>
         		<td>18080</td>
		</tr>
 		<tr class="expand-child">
			<td style="display: none;border: 2px" colspan="3">
				<table class = "grid tablesorter">
					<thead>
						<tr>
           						<th class="" style="padding: 0; margin: 0;"></th>
							<th>Model</th>
							<th>Price From</th>
							<th>Price To</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td rowspan="2" class="collapsible"><a href="#" class="collapsed"></a></td>
            						<td rowspan="2" class="collapsible_alt">Corsa</td>
            						<td>9495</td>
            						<td>18080</td>
						</tr>
       						<tr class="expand-child">
							<td style="display: none;border: 2px" colspan="3">
								<table class =...

CSS

body {
			font-family: Arial, Helvetica, sans-serif;
			font-size: smaller;
		}
		
		.bold {
			font-weight: bold !important;
		}
		
		/* define table skin */
		table.grid {
			margin: 0;
			padding: 0;
			border-collapse: separate;
			border-spacing: 0;
			width: 100%;
		}
		
		table.grid * {
			font: 11px Arial, Helvetica, sans-serif;
			vertical-align: top;
			text-align: left;
		}
		
		table.grid thead, table.grid .collapsible {
			background-color: #e6edc1;
		}

		/* use the below style below to hide the collapsed rows via CSS, you must also set the showCollapsed setting to true */		
/*
		table.grid tr.expand-child td {
			display: none;
		}
*/

		table.grid th {
			color: #565770;
			padding: 4px 16px 4px 0;
			cursor: pointer;
		} 
		
		table.grid td {
			color: #565770;
			padding: 4px 6px;
		}
		
		table.grid th.headerSortUp {
			background: #e6edc1 url(./tablesorter_bkgrd.png) no-repeat 100% -80px;
		}
		
		table.grid th.headerSortUp span {
			background: #e6edc1 url(./tablesorter_bkgrd.png) no-repeat 0 -80px;
		}
		
		table.grid th.headerSortDown {
			background: #e6edc1 url(./tablesorter_bkgrd.png) no-repeat 100% 2px;
		}
		
		table.grid th.headerSortDown span {
			background: #e6edc1 url(./tablesorter_bkgrd.png) no-repeat 0 2px;
		}
		
		table.grid th span {
			padding: 4px 0 4px 6px;
			font-weight: bold;
		}
		
		table.grid a:link,
		table.grid a:visited,
		table.grid a:focus,
		table.grid a:hover {
			color: #565770;
			font-weight: bold;
			text-decoration: underline;
		}
		
		table.grid a:hover {
			color: #d07c57;
		}
		
		table.grid tr.even {
			background-color: #f0f0f0;
		}
		
		/* expand/collapse */
		table.grid .collapsible {
			padding: 0 0 3px 0;
		}

		.collapsible a.collapsed {
			margin: 2px;
			display: block;
			width: 15px;
			height: 15px;
			background: url(./tablesorter_expand.png) no-repeat 3px 3px;
			outline: 0;
		}
		
		.collapsible a.expanded {
			margin: 2px;
			display: block;
			width: 15px;
			height:...

JavaScript

$(document).ready(function (){
			$(".tablesorter")
				/*
				 * td.collapsible = collapse to the first table row and show +/-
				 * td.collapsible_alt = anchor to order number
				 */
			.collapsible("td.collapsible", {
						collapse: true
			})
			.tablesorter({
				// set default sort column
				sortList: [[1,0],[2,0]],
				// don't sort by first column
				headers: {0: {sorter: false}},
				// set the widgets being used - zebra stripping
				widgets: ['zebra'],
				onRenderHeader: function (){
					this.wrapInner("<span></span>");
				},
				selectorHeaders: 'thead tr th',
				debug: false
			});
		});