JSFiddle - React, Tailwind, and code Playground

by nrayburn

HTML

<link href="https://unpkg.com/tabulator-tables@4.6.2/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.6.2/dist/js/tabulator.min.js"></script>

JavaScript

const div = document.createElement('div');
document.body.appendChild(div);

const input = document.createElement('input');
input.addEventListener('change', (event) => {
	if (isNaN(event.target.value)){
    return;
  }
  table.setPage(Number(event.target.value));
})
document.body.appendChild(input);


const columns = [
	{
		field: 'firstName',
    title: 'First Name'
	}
];

const data = [
	{firstName: 'bob'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'},
  {firstName: 'john'}
];

const table = new Tabulator(div, {
	columns: columns,
  data: data,
  pagination: 'local',
  height: 300
})