title: Add a New Item to a Table / List
body: <p>I have a fragment / view written in XML which contains a simple table with some columns and one ColumnListItem:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;m:Table id="CorrectiveActionsTable"&gt;
    &lt;m:columns&gt;
      &lt;m:Column&gt;
        &lt;m:Text text="Lfd. Nr"/&gt;
      &lt;/m:Column&gt;
      &lt;m:Column width="30%"&gt;
        &lt;m:Text text=""/&gt;
      &lt;/m:Column&gt;
      &lt;m:Column&gt;
        &lt;m:Text text="gefordert von"/&gt;
      &lt;/m:Column&gt;
      &lt;m:Column&gt;
        &lt;m:Text text="Durchführungsverantwortung"/&gt;
      &lt;/m:Column&gt;
      &lt;m:Column&gt;
        &lt;m:Text text="Planungstermin"/&gt;
      &lt;/m:Column&gt;
      &lt;m:Column&gt;
        &lt;m:Text text="IST-Termin"/&gt;
      &lt;/m:Column&gt;
    &lt;/m:columns&gt;
    &lt;m:ColumnListItem id="ListItem_00"&gt;
      &lt;m:Text text="1"/&gt;
      &lt;m:TextArea
        value="senf"
        rows="6"
        width="100%"
      /&gt;
      &lt;m:Input placeholder="bla"/&gt;
      &lt;m:Input placeholder="bla2"/&gt;
      &lt;m:DatePicker placeholder="bla3"/&gt;
      &lt;m:DatePicker placeholder="bla4"/&gt;
    &lt;/m:ColumnListItem&gt;
  &lt;/m:Table&gt;
  &lt;m:HBox&gt;
    &lt;m:Button
      text="Add Button"
      visible="true"
      press="onAddButton"
      icon="sap-icon://add"
    /&gt;
  &lt;/m:HBox&gt;
  </code></pre>
  
  <p>The Button should be used to add a new ColumnListItem to the Table.<br>
  I think I should write the <code>onAddButton</code> function in the controller but I don't know where to start.</p>
  
  <p>For now, my controller looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/ColumnListItem",
    "sap/m/Text",
    "sap/m/TextArea",
    "sap/m/Input",
    "sap/m/DatePicker"
  ], function(Controller, ColumnListItem, Text, TextArea, Input, DatePicker) {
    "use strict";
  
    return Controller.extend("...", {
      onAddButton: function(oEvent) {
        var columnListItemNewLine = new ColumnListItem({
          cells: [
            new Text({
              text: "1"
            }),
            new TextArea({
              value: "senf",
              rows: "6",
              width: "30%"
            }),
            new Input({
              type: "text",
              placeholder: "bla"
            }),
            new Input({
              type: "text",
              placeholder: "bla2"
            }),
            new DatePicker({
              placeholder: "bla3"
            }),
            new Datepicker({
              placeholder: "bla4"
            })
          ]
        });
        this._oTable.addItem(columnListItemNewLine);
      }
    });
  });
  </code></pre>
  
  <p>And I'm pretty sure there is a better way to do this than my approach.</p>