Skip to Content

Add/Remove Rows – sap.m.Table Quick Reference

Problem Statement

Create an editable Table ( sap.m.Table) where we can dynamically add / Remove rows to accept user inputs . Consider this blog as a quick reference for developers to adapt the code and concept

Solution Steps

Step 1 . Create a table in your view – In this step, i created a table with 2 columns ( Product and Dimension )

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
		controllerName="tableinsert.Main" xmlns:html="">
	<Page title="Title">
			<Table id="ins" items="{/Products}">
				<Button icon="sap-icon://add" text="Row" press="addRow"/>
				<Button icon="sap-icon://display" text="Row" press="fetchRecords"/>
			<Column width="50px"/>
				<Text text="Product" />
				<Text text="Dimensions" />
					<Button icon="sap-icon://delete" press="deleteRow" type="Reject"/>
					<Input value="{Name}"/><Input value="{size}"/>

Step 2Data Binding – Create JSON Object with sample records ( for test ) and add the same to a JSON Model. Bind the JSON Model to the Table

onInit: function() {
			this._data = {
				Products : [
				            { Name : 'Clock' , size : '1X2X5'},
				            { Name : 'Pen' , size : '7X2X5'}
			this.jModel = new sap.ui.model.json.JSONModel();

	onBeforeRendering: function() {

Step 3Add Row – Concept here is , when you insert a new record to the json object, the same will be reflected in the table on refreshing the json model.

addRow : function(oArg){
		this._data.Products.push({Name : '', size : ''});
		this.jModel.refresh();//which will add the new record


Step 4 – Deleting a record – Concept being the same as insert. here , we will match the record to be deleted with the json object we have. On finding the match – it will splice the record from json .
read more about splice –

deleteRow : function(oArg){
		var deleteRecord = oArg.getSource().getBindingContext().getObject();
		for(var i=0;i<this._data.Products.length;i++){
			if(this._data.Products[i] == deleteRecord )
					//	pop this._data.Products[i] 
						this._data.Products.splice(i,1); //removing 1 record from i th index.
						break;//quit the loop

Step 4 – read the data after change  – when the user enter the data in the screen , the same will be loaded automatically in the json object ( as the json model is two way bound to the table ) . Just read the data from JSON object

fetchRecords : function(oArg){
		//data will be in this._data.Products


You must be Logged on to comment or reply to a post.
  • Hi, thank you.

    Your tutorial works fine on desktop and tablet but not on phone.

    Usualy, we prefere to display tables on phone using popin to save room on the screen. So the table displays a square containing the data. One square for one row. The code for adding row does not work in that least for me.

    Can you help me with that issue?

    Thank you in advance.


    • Hi ,

      the code above is mobile view compatible. See the snapshot I took from iPhone.

      I added one TextArea below the table , jus to display the json. Also added one more statement in fetchRecords method.


      <TextArea width="100%" id="output" ></TextArea>
      fetchRecords : function(oArg){

      It worked for me

      Share your code,


    • /
  • Hi,  Thank you for your fast reply!


    Everything works.


    Last question: I read that some kind of mobiles can behave in different ways and not add row or delete rows from sap.m.Table. In fact, my code works on almost every mobile. But I tested it on one that did not work.

    The sapui5 should be able to work everywhere ?

    Thank you again.

    • Sorry for the very late response . I wasn’t around for a while. The issue with sap.m.Table may be for some lower versions . I have delivered many applications with the features I described above for various endpoints . Never noticed such issues . Still , I noticed that the control behaves slightly differently when inside different containers ..



  • HI Sreehari


    If i would to try to use this code, to reply a row structure that contain combobox, input and button, when i press AND OR buttons, such as this:

    How i can do?

    P.S: I use your code structure but new information was added in comboboxes in append.


    • Sorry for the late response . I wasn’t around for a while .

      I used a Json object to bind to the table . Let the json object be deep in your case to bind to the combo box .

      Like each tuple in the main jaon contained a json array ( corresponding to the combox) . The entries to be added in the combobox to be inserted to this json arrray and bind to combobox . Confused ????


    • Let the json variable has some blank rows initially itself. This will be rendered in table as blank records ( or call add row handler n times in the init method )