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

Issue

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.

Solution

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();
  }

Answered By - Chris Hamilton