JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dataContainer data"></div>

CSS

.data table{
			border-collapse: collapse;
			width: 100%;
		}
		.data td{
			border: 1px solid #999;
			padding: 5px 10px;
		}
		.data tbody tr:nth-child(even){
			background: #eee;
		}
		.data thead td{
			background: #d2d2d2;
			padding: 10px;
		}
		.data tr:hover, .data .active{
			background: lightblue;
		}
		.data ul{
			margin-top: 10px;
			padding: 0;
		}
		.data li{
			margin-top: 10px;
			display: inline-block;
			padding: 5px 15px;
			background: #999;
			border: 1px solid #333;
			margin-right: 5px;
			cursor: pointer;
		}

JavaScript

"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,n,a){return n&&e(t.prototype,n),a&&e(t,a),t}}(),Table=function(){function e(t){_classCallCheck(this,e),this.config=t,this.currentPage=1,this.init()}return _createClass(e,[{key:"splitByPages",value:function(e){for(var t=e.shift(),n=document.querySelector(this.config.output.container),a=[],r=Math.ceil(e.length/this.config.perPage),i=0;r>i;i++){a[i]=[];for(var o=0;o<this.config.perPage&&0!==e.length;o++)a[i].push(e.shift())}localStorage.setItem("pages",JSON.stringify(a));var c=document.createElement("table"),l=document.createElement("thead"),u=document.createElement("tr"),s=!0,d=!1,f=void 0;try{for(var h,g=t[Symbol.iterator]();!(s=(h=g.next()).done);s=!0){var p=h.value,m=document.createElement("td");m.setAttribute("data-field",p.field),m.innerHTML=p.title,u.appendChild(m)}}catch(v){d=!0,f=v}finally{try{!s&&g["return"]&&g["return"]()}finally{if(d)throw f}}l.appendChild(u),c.appendChild(l),n.appendChild(c)}},{key:"switchPage",value:function(){if(localStorage.getItem("pages")){var e=document.querySelector(this.config.output.container+" table"),t=JSON.parse(localStorage.getItem("pages")),n=document.querySelector(this.config.output.container+" table tbody");n?n.innerHTML="":n=document.createElement("tbody"),t[this.currentPage-1].forEach(function(e){var t=document.createElement("tr");e.forEach(function(e){var n=document.createElement("td");n.innerHTML=e,t.appendChild(n)}),n.appendChild(t)}),e.appendChild(n)}}},{key:"pagination",value:function(){var e=this;if(localStorage.getItem("pages")){for(var...