JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/parsers/parser-input-select.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-scroller.js"></script>
<table class="table_test" id="table_test">
    <thead>
        <tr>
            <th scope="col">Lorem</th>
            <th scope="col">Lorem Ipsum</th>
            <th scope="col">Lorem Ipsum is</th>
            <th scope="col" class="text-center action">
                <input type="checkbox">&nbsp;Lorem
                <br>[200.000]</th>
            <th scope="col" class="text-center action">
                <input type="checkbox">&nbsp;Lorem Ipsum
                <br>[200.000]</th>
            <th scope="col" class="text-center action">
                <input type="checkbox">&nbsp;Lorem Ipsum is
                <br>[200.000]</th>
            <th scope="col" class="text-center action">
                <input type="checkbox">&nbsp;Lorem Ipsum is simply
                <br>[200.000]</th>
            <th scope="col" class="text-center action">
                <input type="checkbox">&nbsp;Lorem Ipsum is simply dummy
                <br>[200.000]</th>
            <th scope="col" class="text-center action">
                <input type="checkbox">&nbsp;Lorem Ipsum is simply dummy texta
                <br>[200.000]</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lorem Ipsum is</td>
            <td>Lorem Ipsum</td>
            <td>Lorem</td>
            <td>
                <input...

CSS

/* row highlighting */
table.tablesorter tbody tr.odd.checked td {
	background: #8080c0;
	color: #fff;
}
table.tablesorter tbody tr.even.checked td {
	background: #a0a0e0;
	color: #fff;
}


.tablesorter-bootstrap .tablesorter-header, .tablesorter-bootstrap tfoot th, .tablesorter-bootstrap tfoot td {
    white-space: nowrap;
}
.table_test th {
    border-top: 1px solid #DDD !important;
    vertical-align: middle !important;
}
.tablesorter-scroller-has-fixed-columns.tablesorter-scroller-fixed:after {
    content:'';
    border-right: 1px solid #444;
    width: 1px;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    right: 0;
}
.tablesorter thead .disabled {
    display: none;
}

JavaScript

$(function(){

	var $table = $('#table_test');
/* same as scroller_upAfterSort: true
   **********************************
	$table.on('sortEnd', function () {
		$table.parent().animate({
			scrollTop: 0
		}, 'fast');
	});
*/
	$.tablesorter.themes.bootstrap = {
		table: 'table table-bordered table-striped',
		caption: 'caption',
		header: '',
		sortNone: '',
		sortAsc: '',
		sortDesc: '',
		active: '',
		hover: '',
		icons: '',
		iconSortNone: 'bootstrap-icon-unsorted',
		iconSortAsc: 'glyphicon glyphicon-chevron-up',
		iconSortDesc: 'glyphicon glyphicon-chevron-down',
		filterRow: '',
		footerRow: '',
		footerCells: '',
		even: '',
		odd: ''
	};

	$table.tablesorter({
		theme: "bootstrap",
		resort: false,
		widthFixed: true,
		headerTemplate: '{content} {icon}',
		widgets: ["uitheme", "filter", "zebra", "scroller"],
		widgetOptions: {
			zebra: ["even", "odd"],
			filter_reset: ".reset",
			filter_cssFilter: "form-control",
			scroller_upAfterSort: true,
			scroller_jumpToHeader: true,
			scroller_height: 0,
			scroller_fixedColumns: 3,
			scroller_addFixedOverlay: false,
			scroller_rowHighlight: 'hover',
			scroller_barWidth: null
		},
		headers: {
			'.action': {
				sorter: 'checkbox',
				filter: false
			}
		},
		initialized: function (table) {
            // make checkbox in headers work
			$(table).closest('.tablesorter-scroller').on('change', 'thead th.action input[type=checkbox]', function () {
				var indx,
					$this = $(this),
					checkboxColumn = parseInt( $this.closest('th,td').attr('data-column'), 10 ),
					isChecked = this.checked;
					$cells = $(table)
						.children('tbody')
						.children('tr')
						.children(':nth-child(' + (checkboxColumn + 1) + ')')
						.find('input'),
					len = $cells.length;
				for ( indx = 0; indx < len; indx++ ) {
					$cells.eq( indx )[0].checked = isChecked;
				}
				$(table).trigger('update');
			});
		}
	});

});