Use https://datatables.net/ plugin to generate table on page and the bind your data using Ajax.
You can also use use-script along with jsoup api to avoid jquery/ajax. Adding some sample code for your understanding. You can then use this in your component html.
"use strict";
var jsoup = Packages.org.jsoup.Jsoup;
var document = Packages.org.jsoup.nodes.Document;
var element = Packages.org.jsoup.nodes.Element;
var elements = Packages.org.jsoup.select.Elements;
var sectionID = Math.floor((Math.random() * 100) + 1);
use(function() {
var tableHTML = properties.get("tableData");
var csvPath = properties.get("csvPath");
var captionAlignment = properties.get("caption-align");
var tableNewWidth = properties.get("paginationOn");
var captionColor = properties.get("caption-color");
var captionFontWeight = properties.get("caption-font-weight");
var captionSize = properties.get("caption-size");
if (tableHTML != null && tableHTML != '') {
document = jsoup.parseBodyFragment(tableHTML);
element = document.select("table");
var tableWidth = element.attr("width");
element.attr("width","");
var tableBorder = element.attr("border");
element.attr("id","tableNew_"+sectionID);
element.addClass("dataTable");
var caption = element.select("caption");
var captionStyles = ["text-align:" + captionAlignment + ";color:" + captionColor + "; font-weight:" + captionFontWeight + "; font-size:"+ captionSize +"px"];
caption.attr("style",captionStyles);
element.attr("style","border:" + tableBorder + "px solid;display:none;");
var tableStringHtml = element.toString();
return {
id: sectionID,
width: tableWidth,
html: tableStringHtml,
pageTitle: currentPage.getTitle()
};
}
});