How to add row after the last row in ng2 smart table?

Question

Can Anyone help on this question. Is it possible to add a new Row after the last row on-click of Add-New Button in ng2 Smart table. If so, could you please help me with the solution/attribute? Please find the code below.

static settings= {
      add: {
        addButtonContent: '<i class="nb-plus"></i>',
        createButtonContent: '<i class="nb-checkmark"></i>',
        cancelButtonContent: '<i class="nb-close"></i>',
        confirmCreate: true
      },
      edit: {
        editButtonContent: '<i class="nb-edit"></i>',
        saveButtonContent: '<i class="nb-checkmark"></i>',
        cancelButtonContent: '<i class="nb-close"></i>',
      },
      delete: {
        deleteButtonContent: '<i class="nb-trash"></i>',
        confirmDelete: false,
      },
      columns: {
         options: {
            title: 'Options',
            type: 'html',
            width:"30%",
            editor:{
              type:'list',
              config:{
                selectText: 'Select',
                list:[{value:'Option1',title:'Option1'},
                {value:'Option2',title:'Option2'},
                {value:'Option3',title:'Option3'},
                {value:'Option4',title:'Option4'}]
              }
            }
          },
          values: {
            title: 'Values',
            width:"70%",
            type: 'html',
          },
        },
    };

[Image of Add new Row Button from Table] 1

HTML:

<ng2-smart-table [settings]="settings" [source]="settingsSource"
                    (createConfirm)="validateRecord($event,'cmd')">
</ng2-smart-table>  

validateRecord(event,module){
    if(module == 'cmd'){
      if (event.newData.command !== ""){
        event.confirm.resolve(event.newData);
        this.emptyRecordError = false;
      }
    }
  }

My requirement is, Everytime when i click on the Add button the row has to be added as the last row.

Answer 1

Ensure add.confirmCreate is set to true, which it is for you.

Add the (createConfirm) event listener

<ng2-smart-table
  [settings]="settings"
  [source]="data"
  (createConfirm)="create($event)"
></ng2-smart-table>

Append the data in the callback, reject the data being prepended.

  create(event: { newData: Object; source: DataSource; confirm: Deferred }) {
    event.source.append(event.newData);
    event.confirm.reject();
  }

You'll need these imports

import { DataSource } from 'ng2-smart-table/lib/lib/data-source/data-source';
import { Deferred } from 'ng2-smart-table/lib/lib/helpers';

Digging through the source code here: https://github.com/akveo/ng2-smart-table/blob/master/projects/ng2-smart-table/src/lib/lib/grid.ts I was able to find a way to close the create box afterwards as well

  create(event: { newData: Object; source: DataSource; confirm: Deferred }) {
    event.source.append(event.newData);
    event.confirm.resolve.skipAdd = true;
    event.confirm.resolve();
  }