Table Header Not Visible in UI5 Application

Question

I have created a table, but the header is not getting displayed. Inside my component, I am reading an OData entity and storing it inside a JSON Model. This JSON Model is then used to bind the header column texts.

I have attached the table output image for reference:

Header View.xml:

<mvc:View controllerName="NPAWRMA.controller.header" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true" xmlns="sap.m" xmlns:l="sap.ui.layout">
    <App id="idAppControl">
        <pages>
            <Page title="NPAW RMA Report">
                <content>
                    <l:VerticalLayout>
                        <Table id="table" growing="true" items="{odata>/RmaPercRevColSet}">
                            <columns>
                                <Column>
                                    <Text text="CBU" id="CbuShortNameColumnTitle"/>
                                </Column>
                                <Column>
                                    <Text text="{Labels>/Labels1/Label01}"/>
                                </Column>
                                <Column>
                                    <Text text="{Labels>/Labels1/Label02}"/>
                                </Column>
                                <Column>
                                    <Text text="{Labels>/Labels1/Label03}"/>
                                </Column>
                                <Column>
                                    <Text text="{Labels>/Labels1/Label04}"/>
                                </Column>
                                <Column>
                                    <Text text="{Labels>/Labels1/Label05}"/>
                                </Column>
                                <Column>
                                    <Text text="{Labels>/Labels1/Label06}"/>
                                </Column>
                                <Column>
                                    <Text text="{Labels>/Labels1/Label07}"/>
                                </Column>
                                <Column>
                                    <Text text="{Labels>/Labels1/Label08}"/>
                                </Column>
                            </columns>
                            <items>
                                <ColumnListItem type="Active" press="onPress">
                                    <cells>
                                        <Text text="{odata>CbuShortName}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc01', formatter: '.formatter.numberUnit' }"  state="{State01}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc02', formatter: '.formatter.numberUnit' }"  state="{State02}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc03', formatter: '.formatter.numberUnit' }"  state="{State03}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc04', formatter: '.formatter.numberUnit' }"  state="{State04}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc05', formatter: '.formatter.numberUnit' }"  state="{State05}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc06', formatter: '.formatter.numberUnit' }"  state="{State06}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc07', formatter: '.formatter.numberUnit' }"  state="{State07}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc08', formatter: '.formatter.numberUnit' }"  state="{State08}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc09', formatter: '.formatter.numberUnit' }"  state="{State09}"/>
                                    </cells>
                                </ColumnListItem>
                            </items>
                        </Table>
                        <Table id="table1" growing="true" items="{odata>/RmaPercRevColSet}">
                            <columns>
                                <Column>
                                    <Text text="CBU" id="CbuShortNameColumnTitle1"/>
                                </Column>
                                <Column>
                                    <Text text="{Labels>/Labels1/Label01}"/>
                                </Column>
                                <Column>
                                    <Text text="{Labels>/Labels1/Label02}"/>
                                </Column>
                                <Column>
                                    <Text text="{Labels>/Labels1/Label03}"/>
                                </Column>
                                <Column>
                                    <Text text="{Labels>/Labels1/Label04}"/>
                                </Column>
                                <Column>
                                    <Text text="{Labels>/Labels1/Label05}"/>
                                </Column>
                                <Column>
                                    <Text text="{Labels>/Labels1/Label06}"/>
                                </Column>
                                <Column>
                                    <Text text="{Labels>/Labels1/Label07}"/>
                                </Column>
                                <Column>
                                    <Text text="{Labels>/Labels1/Label08}"/>
                                </Column>
                            </columns>
                            <items>
                                <ColumnListItem type="Active" press="onPress">
                                    <cells>
                                        <Text text="{odata>CbuShortName}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc01', formatter: '.formatter.numberUnit' }" unit="%" state="{State01}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc02', formatter: '.formatter.numberUnit' }" unit="%" state="{State02}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc03', formatter: '.formatter.numberUnit' }" unit="%" state="{State03}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc04', formatter: '.formatter.numberUnit' }" unit="%" state="{State04}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc05', formatter: '.formatter.numberUnit' }" unit="%" state="{State05}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc06', formatter: '.formatter.numberUnit' }" unit="%" state="{State06}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc07', formatter: '.formatter.numberUnit' }" unit="%" state="{State07}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc08', formatter: '.formatter.numberUnit' }" unit="%" state="{State08}"/>
                                        <ObjectNumber number="{ path: 'odata>NpiPerc09', formatter: '.formatter.numberUnit' }" unit="%" state="{State09}"/>
                                    </cells>
                                </ColumnListItem>
                            </items>
                        </Table>
                    </l:VerticalLayout>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

Component.js:

sap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/Device",
	"NPAWRMA/model/models"
], function(UIComponent, Device, models) {
	"use strict";

	return UIComponent.extend("NPAWRMA.Component", {

		metadata: {
			manifest: "json"
		},

		/**
		 * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
		 * @public
		 * @override
		 */
		init: function() {
			//"Access-Control-Allow-Origin: *.local.com";
			//"Access-Control-Allow-Headers: X-KEY";
			UIComponent.prototype.init.apply(this, arguments);
				debugger;
			var sModel = this.getModel("odata");
			sModel.setSizeLimit(999);
			var oJson1 = new sap.ui.model.json.JSONModel();
			sModel.read("/Labels1Set('0')", {
				success: function(oss) {
					oJson1.setData({
						Label: oss
					});
				},
				error: function(oss) {}
			});
			this.setModel(oJson1, "Labels");
			            
 			// enable routing
			this.getRouter().initialize();
			// set the device model
			this.setModel(models.createDeviceModel(), "device");
		}
	});
});

Answer 1

In your screenshot, the table header is actually displayed. The first column header (which is statically bound) is rendered correctly.

So the problem seems to reside with the binding paths or the model content itself. I am not completely sure what you obtain inside the sModel.read("/Labels1Set('0')", ...) success callback, because it depends completely on how you defined your OData model. You should check if the indeed has all these Label01 to Label08 properties.

Another thing that I can spot is that you are actually setting the result in the /Label binding path, but then you are using the /Labels1/LabelXX binding path(i.e. the path starts with Labels1 instead of just Label). TO fix this, you should adjust the success callback of the read call:

success: function(oss) {
    oJson1.setData({
        Labels1: oss
    });
}

Or, maybe more readable would be to just do oJson1.setData(oss) and then simply remove the /Labels1 prefixes from the binding paths.