Skip to Content
Author's profile photo Shubham Bathla

Custom Columns in Smart Table

Hi All,



This blog refers to customizing the existing default columns in SmartTable control. In this blog i would like to explain about how we can create and use our own customized column in a SmartTable. We would also go though a few problems faced which could be resolved by Custom Columns.

What is Custom Column: A custom column is nothing but a column which is not directly available in a SmartTable as this column is not available in oData metadata directly. Rather, such a column is generated by the user as per the requirement.

What is SmartTable: The SmartTable control creates a table based on OData metadata and the  configuration specified. More information can be found at



  • Assume of a situation where as a user you would like to see 2 inter-related fields combined with each other under a single column instead of 2 different columns.
  • Assume another situation where the data is getting displayed in a table but you want to change the look of data using a formatter.

For example, it would be better to show 1 Column of “Quantity” in table along with its units (like “25 EA”) instead of showing 2 columns of “Quantity” & “Unit” (“25” & “EA”).

For example, you are showing a Date column. It is coming in format of “ddmmyyyy” but as a user you want to format it to display in “dd-mm-yy” format using a fomatter.

A similar example is shown below,

  • Default Behavior –  The SmartTable control generates the columns of the table using the metadata, configuration and properties of the entitySet.

  • Customization – The problems arise when user wants to display the data by combining multiple properties of oData or multiple columns(like here ShipCity & ShipCountry). The SmartTable control does not have any predefined property as a solution available for this.


Here the Custom Columns comes into picture so the solution would be a Custom Column. Steps,

  • Create a container for your Custom Column (another table).
  • Define a column as per the requirement (custom column).
  • Place it under the SmartTable control.


So Let’s begin..


  • A SmartTable binded with an oData service.


For creating a Custom Column in SmartTable,

  • First we need to create a Table inside existing SmartTable control where we create and place our own custom columns.
  • The Custom Column is defined by user as requirement (here combination of 2 properties).

Note: The oData properties which are to be consumed (if not fetched initially using property “initiallyVisibleFields”) should be mentioned under property “requestAtLeastFields”.


Step 1: Create a table(in this example sap.m.Table) under your existing Smart Table control as shown below,

<mvc:View controllerName="" xmlns:html="" xmlns:mvc="sap.ui.core.mvc" xmlns:smartTable="sap.ui.comp.smarttable"
	displayBlock="true" xmlns="sap.m">
	<App id="idAppControl">
			<Page title="Blog">
					<smartTable:SmartTable id="testTable" entitySet="/Orders" header="Custom Column Table" enableAutoBinding="true"
						requestAtLeastFields="OrderID,ShipCity,ShipCountry" useExportToExcel="false" showTablePersonalisation="false">
								<Column hAlign="Left">
										<Text text="OrderID"/>
								<Column hAlign="Left">
										<Text text="Ship To"/>
										<Text text="{OrderID}"/>
										<ObjectIdentifier title="{ShipCity}" text="{ShipCountry}"/>

The Custom Column should be created as a part of internal table. The Custom Column can be a combination of any number of fields (as shows below).


Step 2: Create an oDataModel and set it to your view. You can skip this step In Case your have already set the model.

Note: This step would not be required in case you have already set the model for fetching data to your SmartTable earlier to display data.

], function (Controller) {
	"use strict";

	return Controller.extend("", {
		onInit: function () {
			this.oModel = new sap.ui.model.odata.v2.ODataModel("/northwind/V2/Northwind/Northwind.svc/", {
				useBatch: false


Step 3: Maintain routes in neo-app.json file for your oDataModel (in my case for Northwind oData). This step basically relates to maintaining the connection configurations.

Note: Please make sure the connection settings are maintained if you are using Northwind Services.

      "path": "/northwind",
      "target": {
        "type": "destination",
        "name": "northwind"
      "description": "Northwind OData Service"


Execute: Run the Application.

Result: You will see that the Custom Column that you created is now available in the table. In current example it would be a single column which is combination of 2 different properties.

  • Here we see that Column “Ship To” is a custom column which is a combined field of 2 oData properties “ShipCity” & “ShipCountry” as maintained in XML file.


Hence we can say that, in order to customize any field in SmartTable control or to create an entire new column which is not available by default, the approach of “Custom Columns” can be used.




Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Florian Henninger
      Florian Henninger

      Thank you for the blog.Technically it is nice to read and I like the coding snippets within your explainations.

      I don't see the construct, why you want to create a custom column inside the app itself, when you also can extend the odata, which defines the smarttable via annotations. So I really see a problem of finding bugs and errors when using such a construct.

      And, if the odata itself cannot be enhanced (whatever reason it is) I see the possibility to put the odata itself into a new one and add here the necessary information. Because your custom columns also have values and these need to come from somewhere.

      Maybe you can give me some background what brought you to that kind of solution to get a better understanding.

      Keep on blogging.


      Author's profile photo Larry DuBois
      Larry DuBois

      Perhaps if you have a better way using annotations to accomplish multiple values in the same column, or custom formatting, you can link a blog article of your own with the example.

      Author's profile photo Ila Chaudhary
      Ila Chaudhary

      Nicely explained. Keep it up.


      Ila Chaudhary

      Author's profile photo Rudramani Pandey
      Rudramani Pandey

      Bro, I have a requirement to change the navigation icon of smart table from > to something else. Please let me know, how to do that?

      Author's profile photo Urvashi Tibrewal
      Urvashi Tibrewal

      Great Blog! Well Done.



      Author's profile photo Vijendra Babu
      Vijendra Babu



      After adding custom columns, Smart table is loading all data at once, rather than doing lazy load on the scroll. Have I missed any setting here?


      Here is my code.

      <smartTable:SmartTable id="table" entitySet="xHDR_UI_CUSTOM" smartFilterId="smartFilterBar" useExportToExcel="false" useVariantManagement="true" useTablePersonalisation="true" header="FIDs"showRowCount="true"persistencyKey="" enableAutoBinding="true" class="sapUiResponsiveContentPadding"initiallyVisibleFields="ext_customer_id,proc_mode_Text,document_date,payment_group"><Table mode="MultiSelect"><columns><Column id="Dmbtr" width="100px" hAlign="Begin"><customData><core:CustomData key="p13nData"value='\{"columnKey":"fid_id","leadingProperty": "fid_id","sortProperty": "fid_id","filterProperty": "fid_id"}'/></customData><Text text="Test Column" /></Column></columns><items><ColumnListItem><cells><Linktext="{fid_id}" press=".onLinkPress"/></cells></ColumnListItem></items></Table><!-- layout data used to make the table growing but the filter bar fixed --><smartTable:layoutData><FlexItemData growFactor="1" baseSize="0%"/></smartTable:layoutData></smartTable:SmartTable>
      Author's profile photo Arun Mysore Chamaraju
      Arun Mysore Chamaraju

      Remove this :