JSFiddle - React, Tailwind, and code Playground

by Sanjay Aswani

HTML

<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>

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"
}));

   var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({modelData: aData});
oTable.setModel(oModel);
oTable.bindRows("/modelData");
	
		var xlBtn = new sap.m.Button({id:"xlBtn", text:"Export To Excel", width:"100%", layoutData: new sap.ui.layout.GridData({span:"L2 M1 S1"})});
		var pdfBtn = new sap.m.Button({id:"pdfBtn", text:"Export To PDF", width:"100%", layoutData: new sap.ui.layout.GridData({span:"L2 M1 S1"})});
		var printBtn = new sap.m.Button({id:"printBtn", text:"Print", width:"100%", layoutData: new sap.ui.layout.GridData({span:"L2 M1 S1"})});
		
		var btnGrid = new sap.ui.layout.Grid({
			id: "btnGrid",
			visible : true, // boolean
			width : "100%", // sap.ui.core.CSSSize
			vSpacing : 1, // float
			hSpacing : 0.5, // float
			position : sap.ui.layout.GridPosition.Left, // sap.ui.layout.GridPosition
			defaultSpan : "L6 M6 S6", // sap.ui.layout.GridSpan
			content : [xlBtn, pdfBtn, printBtn]
		// sap.ui.core.Control
		});
		
		var bar = new sap.m.Bar({
			visible...