JSFiddle - React, Tailwind, and code Playground
by Sanjay Aswani
HTML
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"></script>
<div id='content'></div>
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: 5,
firstVisibleRow: 3,
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"
}));
oTable.bindColumns("meta>/", function(sId, oContext) {
var sColumnId = oContext.getObject().ColLable;
var columnNo = oContext.getObject().ColPosition;
columnNo = parseInt(columnNo,10) + 1;
var string = "data>Col" + columnNo;
return new sap.ui.table.Column({
label: sColumnId,
template: new sap.ui.commons.TextView().bindText(string)
});
});
oTable.bindRows("data>/");
var xlBtn = new sap.m.Button({id:"xlBtn", text:"Export To Excel", width:"100%", press:oController.exportExcel, layoutData: new sap.ui.layout.GridData({span:"L2 M1 S1"})});
var pdfBtn = new sap.m.Button({id:"pdfBtn", text:"Export To PDF", width:"100%", press:oController.exportPdf, layoutData: new sap.ui.layout.GridData({span:"L2 M1 S1"})});
var printBtn = new sap.m.Button({id:"printBtn", text:"Print", width:"100%", press:oController.print, layoutData: new sap.ui.layout.GridData({span:"L2 M1 S1"})});
var btnGrid = new sap.ui.layout.Grid({
id:...