JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div class="search_in_table">
    <input class="search-inp" />
</div>

<table class="table_default table1 search_on">
    <thead>
        <tr class="table_header"></tr>
    </thead>
    <tbody>
        
    </tbody>    
</table>

<div class="next_prev pagination">
    <div class="prev">
        <a id="prev-page">&lt; Previous 10</a>
    </div><div class="next">
    <a id="next-page">Next 10 &gt;</a>
    </div>
</div>

SCSS

.sortable-true {
	position: relative;
	cursor: pointer;
	user-select: none;
}

.up-arrow {
	position: relative;

	&:after {
		display: inline-block;
		content: 'sortable-after';
		color: transparent;
		background: url('http://s16.postimg.org/sk09lfwht/up_arrow.png') no-repeat;
		position: absolute;
		width: 22px;
		height: 12px;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 10px;
	}
}

.down-arrow {
	position: relative;
	cursor: pointer;
	user-select: none;

	&:after {
		display: inline-block;
		content: 'sortable-after';
		color: transparent;
		background: url('http://s8.postimg.org/94toltrip/down_arrow.png') no-repeat;
		position: absolute;
		width: 22px;
		height: 12px;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 10px;
	}
}
.table_default {
	border: none;
	border-collapse: collapse;
	border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-spacing: 0;
	color: #fff;
	font-size: 20px;
	table-layout: fixed;
	width: 100%;

	.table_header {
		border-radius: 10px 10px 0 0;
	    -moz-border-radius: 10px 10px 0 0;
	    -webkit-border-radius: 10px 10px 0 0;

		th {
			border-left: 1px solid #fff;
			background-color: #26659a;
			padding: 35px 0;
			text-align: center;
			vertical-align: middle;
			background-clip: padding-box;

			&:first-child {
				border-left: none;
			}
		}
	}


	td {
		border-left: 1px solid #fff;
		border-bottom: 1px solid #57a1cc;
		background-color: #4a9bca;
		padding: 35px 20px;
		text-align: center;
		vertical-align: middle;

		&:first-child {
			border-left: none;
		}
	}

	th:first-child {
	    border-radius: 10px 0 0 0;
	    -moz-border-radius: 10px 0 0 0;
	    -webkit-border-radius: 10px 0 0 0;
	}

	th:last-child {
		border-radius: 0 10px 0 0;
		-moz-border-radius: 0 10px 0 0;
		-webkit-border-radius: 0 10px 0 0;
	}

	tr:last-child {

		border-radius: 0 0 10px 10px;
		-moz-border-radius: 0 0 10px 10px;
		-webkit-border-radius: 0 0 10px 10px;

		td {
			border-bottom:...

JavaScript

(function($) {

	$.fn.TableSort = function( options ) {

		// Establish our default settings
		var settings = $.extend({
			jsonSource   : '',
			header_sortable_class: 'sortable-true',
			header_notsortable_class: 'sortable-false',
			header_arrow_up_class: 'up-arrow',
			header_arrow_down_class: 'down-arrow',
			data_source_key_name: 'TableSortSource',
			pagination_container: '',
			pagination_prev: '',
			pagination_next: ''
		}, options);

		var RetrieveJson = function(onSuccessHandler) {
			$.ajax({
			  url: settings.jsonSource,
			  dataType: 'json',
			  success: onSuccessHandler,
			  error: function(error){console.log("error", error)}
		  });
		}

		var ConstructTable = function (element, data) {
			// empty existing table
			$(element).empty();
			$(settings.pagination_container).hide();

			// header
			$(element).append("<thead><tr class='table_header'></tr></thead>");
			$.each(data.headers, function(index, value){
				$(".table_header", element).append("<th class='"+ (value.is_sortable ? settings.header_sortable_class : settings.header_notsortable_class) +"'><span class='title_on_desktop'>"+value.text.on_desktop+"</span><span class='title_on_mobile'>"+value.text.on_mobile+"</span></th>");
			});

			// set default arrow
			$("th:nth-child("+(data.default_sort_on+1)+")", element).addClass(data.sort_direction == "ascending" ? settings.header_arrow_up_class : settings.header_arrow_down_class);

			// add rows
			$(element).append("<tbody></tbody>");
			var currentRow;
			var currentColumn;
			var currentCell;
			$.each(data.rows, function(index, value){
				currentRow = value.hasOwnProperty("row_class") ? $("<tr class='"+ value.row_class + "'>") : $("<tr></tr>");
				// add columns
				$.each(value.items, function(index, value){
					currentColumn = $("<td></td>");
					if (value.is_link)
					{
						currentCell = $("<a href='#'></a>");
						$(currentCell).text(value.text);
						// add attributes
						$.each(value.attributes, function(index,...