JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/examples/jspdf.debug.js"></script>
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/jspdf.plugin.autotable.js"></script>
<script src="http://cdn.uriit.ru/jsPDF/libs/FileSaver.js/FileSaver.js"></script>
<script src="http://cdn.uriit.ru/jsPDF/libs/FileSaver.js/FileSaver.min.js"></script>
<script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-cachebuster/sap-ui-core.js' data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m, sap.ui.layout, sap.suite.ui.commons, sap.ui.commons, sap.ui.table">
</script>
<body class="sapUiBody" id="content">
JavaScript
var aData = [{
lastName: "Dente",
name: "Al"
}, {
lastName: "Friese",
name: "Andy"
}, {
lastName: "Mann",
name: "Anita"
}, {
lastName: "Schutt",
name: "Doris"
}, {
lastName: "Open",
name: "Doris"
}];
var oTable = new sap.ui.table.Table({
id: "oTable",
title: "",
showNoData: true,
selectionMode: sap.ui.table.SelectionMode.None,
visibleRowCount: 3,
firstVisibleRow: 0,
navigationMode: sap.ui.table.NavigationMode.Paginator
});
var oColumn = new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Last Name"
}),
template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
sortProperty: "lastName",
filterProperty: "lastName",
width: "200px"
});
oTable.addColumn(oColumn);
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "First Name"
}),
template: new sap.ui.commons.TextField().bindProperty("value", "name"),
sortProperty: "name",
filterProperty: "name",
width: "100px"
}));
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
modelData: aData
});
oTable.setModel(oModel);
oTable.bindRows("/modelData");
var pdfBtn = new sap.m.Button({
id: "pdfBtn",
text: "Export To PDF",
width: "100%",
press: exportPDF
});
var btnGrid = new sap.ui.layout.Grid({
id: "btnGrid",
visible: true,
width: "100%",
vSpacing: 1,
hSpacing: 0.5,
position: sap.ui.layout.GridPosition.Left,
defaultSpan: "L4 M4 S4",
content: [pdfBtn]
});
oTable.placeAt("content");
btnGrid.placeAt("content");
/*For Using Auto Table You need to create
an Array for Row and Colums*/
function exportPDF(){
var columnsArray = [{title:"Last Name", key:"lastName"},
{title:"First Name", key:"name"}];
var dataArray = [];
var table = sap.ui.getCore().byId("oTable");
//Will give you list of indices after filter & sort
var...