I'm trying to add a sorting feature on each column of a table. I have inspected the example provided by SAPUI5 explored here: https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.ui.table.sample.Sorting/preview
Specifically I added a sortProperty
attribute to the column element in my XML-view (see Qty
below), but I don't see any sorting functionality nor any sorting arrows like in the example provided. Could someone examine what I'm missing here?
<Table id="searchResultsTable"
selectionMode="MultiToggle"
visible="true"
items="{
path: '/ProductCollection',
sorter: {
path: 'AwdDate',
descending: true
}
}">
<columns>
<Column minScreenWidth="Tablet" width="7%" demandPopin="false">
<FormattedText htmlText="Awd Date" />
</Column>
<Column minScreenWidth="Tablet" width="5%" demandPopin="false" hAlign="Left">
<FormattedText htmlText="CAGE" />
</Column>
<Column minScreenWidth="Tablet" hAlign="Left" demandPopin="false">
<FormattedText htmlText="Vendor" />
</Column>
<Column minScreenWidth="Tablet" width="4%" hAlign="Left" demandPopin="false">
<FormattedText htmlText="Type" />
</Column>
<Column minScreenWidth="Tablet" width="4%" hAlign="Left" demandPopin="false">
<FormattedText htmlText="PRC" />
</Column>
<Column minScreenWidth="Tablet" width="4%" hAlign="Left" demandPopin="false">
<FormattedText htmlText="EX" />
</Column>
<Column minScreenWidth="Tablet" width="6%" hAlign="Left" demandPopin="false">
<FormattedText htmlText="PPI Cost" />
</Column>
<Column minScreenWidth="Tablet" width="6%" hAlign="Left" demandPopin="false">
<FormattedText htmlText="Hist Cost" />
</Column>
<Column minScreenWidth="Tablet" width="4%" hAlign="Left" demandPopin="true">
<FormattedText htmlText="Unit" />
</Column>
<Column minScreenWidth="Tablet" width="10%" hAlign="Left" demandPopin="false">
<FormattedText htmlText="PIIN" />
</Column>
<Column minScreenWidth="Tablet" width="5%" hAlign="Left" demandPopin="false" sortProperty="Qty">
<FormattedText htmlText="Qty" />
</Column>
<Column minScreenWidth="Tablet" width="6%" hAlign="Left" demandPopin="false">
<FormattedText htmlText="Hist PPI" />
</Column>
<Column minScreenWidth="Tablet" width="6%" hAlign="Left" demandPopin="false">
<FormattedText htmlText="Curr PPI" />
</Column>
<Column minScreenWidth="Tablet" width="10%" hAlign="Left" demandPopin="false">
<FormattedText htmlText="PPI Factor" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{AwdDate}"/>
<Text text="{CAGE}" />
<Text text="{Vendor}" />
<Text text="{Type}" />
<Text text="{PRC}" />
<Text text="{EX}" />
<Text text="${PPICost}" />
<Text text="${HistCost}" />
<Text text="{Unit}" Style="font-color:red" />
<Link text="{PIIN}"
press="handleLinkPress" app:mydata="{HistPPI},{Qty},{AwdDate}" />
<Text text="{Qty}" />
<Text text="{HistPPI}" />
<Text text="{CurrentPPI}" />
<Text text="{PPIConversionFactor}" />
</cells>
</ColumnListItem>
</items>
</Table>