title: Button to add new row in SAPUI5 table
body: <p>I am trying to add new lines on a SAPUI5 table by a click of a button. I have seen plenty of online tutorials but I have not found exactly my use case.</p>
  
  <p>The JSON is loaded through a mock server for now (for testing purposes and has this structure:</p>
  
  <pre><code>{
    "Invoices": [
      {
        "ProductName": "Pineapple",
        "Quantity": 21,
        "ExtendedPrice": 87.2000,
        "ShipperName": "Fun Inc.",
        "ShippedDate": "2015-04-01T00:00:00",
        "Status": "A"
      },
      ...
    ]
  }
  </code></pre>
  
  <p>I have a table that is defined like this in the <code>view</code>:</p>
  
  <pre><code>&lt;mvc:View controllerName="stepbystep.demo.wt.controller.App" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:core="sap.ui.core"
  xmlns:html="http://www.w3.org/1999/xhtml" displayBlock="true"&gt;
  &lt;Table id="ins" items="{ path : 'invoice&gt;/Invoices', sorter : { path : 'ProductName' } }"&gt;
      &lt;headerToolbar&gt;
          &lt;Toolbar&gt;
              &lt;Button icon="sap-icon://add" text="Row" press="addRow"/&gt;
              &lt;Button icon="sap-icon://display" text="Row" press="fetchRecords"/&gt;
          &lt;/Toolbar&gt;
      &lt;/headerToolbar&gt;
      &lt;columns&gt;
          &lt;Column hAlign="Right" minScreenWidth="Small" demandPopin="true" width="4em"&gt;
              &lt;Text text="{i18n&gt;columnQuantity}"/&gt;
          &lt;/Column&gt;
          &lt;Column&gt;
              &lt;Text text="{i18n&gt;columnName}"/&gt;
          &lt;/Column&gt;
          &lt;Column minScreenWidth="Small" demandPopin="true"&gt;
              &lt;Text text="{i18n&gt;columnStatus}"/&gt;
          &lt;/Column&gt;
          &lt;Column minScreenWidth="Tablet" demandPopin="false"&gt;
              &lt;Text text="{i18n&gt;columnSupplier}"/&gt;
          &lt;/Column&gt;
          &lt;Column hAlign="Right"&gt;
              &lt;Text text="{i18n&gt;columnPrice}"/&gt;
          &lt;/Column&gt;
      &lt;/columns&gt;
      &lt;items&gt;
          &lt;ColumnListItem type="Navigation" press="onPress"&gt;
              &lt;cells&gt;
                  &lt;ObjectNumber number="{invoice&gt;Quantity}" emphasized="false"/&gt;
                  &lt;ObjectIdentifier title="{invoice&gt;ProductName}"/&gt;
                  &lt;Text text="{ path: 'invoice&gt;Status', formatter: '.formatter.statusText' }"/&gt;
                  &lt;Text text="{invoice&gt;ShipperName}"/&gt;
                  &lt;ObjectNumber
                      number="{ parts: [{path: 'invoice&gt;ExtendedPrice'}, {path: 'view&gt;/currency'}], type: 'sap.ui.model.type.Currency', formatOptions: { showMeasure: false } }"
                      unit="{view&gt;/currency}" state="{= ${invoice&gt;ExtendedPrice} &gt; 50 ? 'Error' : 'Success' }"/&gt;
              &lt;/cells&gt;
          &lt;/ColumnListItem&gt;
      &lt;/items&gt;
  &lt;/Table&gt;
  </code></pre>
  
  <p></p>
  
  <p>and the controller contains this function (I am only pasting the part that works):</p>
  
  <pre><code>addRow: function() {
      var oList = this.getView().byId("ins");
      var oDt = oList.getBinding("items").getModel().oData;
  }
  </code></pre>
  
  <p>However, I am not sure how to proceed. I have tried <code>push()</code> in the model, but I am getting errors. What I was thinking of doing now is to add an empty row in <code>oDt</code> and bind it to the table, but I am not sure how to proceed with this, and whether it is the optimal solution.</p>
  
  <p><strong>EDIT:</strong> <a href="https://stackoverflow.com/questions/48222553/how-to-add-a-new-columnlistitem-to-a-table">How to Add a New ColumnListItem to a Table</a> was marked as potential duplicate. This question is on the same topic, but the approach of the OP does not seem to match my use case (I am new to SAPUI5, so I might be wrong - in which case, please forgive me).</p>