sapui5 SAPUI5 Responsive Table


Example

A Responsive Table(sap.m.Table) can be created as below

XML View

<mvc:View
controllerName="com.sap.app.controller.Main"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m">
<Page title="Table Example">
    <content>
    <Table id="idEmployeesTable"
        items="{/Employees}">
        <headerToolbar>
            <Toolbar>
                <Title text="Employees"/>
            </Toolbar>
        </headerToolbar>
        <columns>
            <Column>
                <Text text="Name" />
            </Column>
            <Column>
                <Text text="City" />
            </Column>
            <Column>
                <Text text="Country" />
            </Column>
            <Column
                hAlign="Right">
                <Text text="Reporting" />
            </Column>
        </columns>
        <items>
            <ColumnListItem>
                <cells>
                    <Text
                        text="{FirstName} {LastName}" />
                    <Text
                        text="{City}" />
                    <Text
                        text="{Country}" />
                    <ObjectNumber
                        number="{ReportsTo}"
                        unit="employees"
                        />                      
                </cells>
            </ColumnListItem>
        </items>
    </Table>
    </content>
</Page>
</mvc:View>

Controller JS

var oModel = new sap.ui.model.odata.ODataModel("http://services.odata.org/V2/Northwind/Northwind.svc");
this.getView().setModel(oModel);