JSFiddle - React, Tailwind, and code Playground

by KarmaProd

HTML

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>

JavaScript

const searchCount = document.createElement('input');
document.body.appendChild(searchCount);

const totalCount = document.createElement('input');
document.body.appendChild(totalCount);

const printButton = document.createElement('button');
printButton.textContent = 'Print';
printButton.addEventListener('click', print);
document.body.appendChild(printButton);

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

var table = new Tabulator(tableDiv, {
  columns: [
    {
      title: "name",
      field: "name",
      bottomCalc: "count",
      headerFilter: "input"
    },
    {
      title: "Type",
      field: "Type",
      bottomCalc: "count",
      headerFilter: "input"
    },
  ],
	data: [
		{
			name: 'John1',
			Type: 'some typeAAA'
		},
    		{
			name: 'John2',
			Type: 'some typeBBB'
		},
    		{
			name: 'John3',
			Type: 'some typeCCC'
		}
	],
	downloadConfig: {
		columnCalcs: false
	},
  dataFiltered: function(filters, rows) {
		searchCount.textContent = rows.length;
  },
  dataLoaded: function(data) {
		totalCount.textContent = data.length;
  },
});


function print(){
	table.download("xlsx", "name.xlsx", { sheetName: "Info" });
}

/* var total_count = $(".tabulator-footer").find('.tabulator-cell:first-child()').text();
$("#total_count").text(total_count);


$(".tabulator-footer").append("<span class='search_count' id='search_count'></span> Of<span class='search_result'>Total Productions: <span class='total_count'></span></span>")

var totalsearch = $("#total_count").text();
var resultsearch = $("#search_count").text();
$(".total_count").text(totalsearch)
$(".search_count").text(totalsearch); */