Ngx-datatable: How do i add a new row ?

[junaidahmed93]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

Not provided adding a row functionality

Expected behavior

There should be some implementation for adding a new row

What is the motivation / use case for changing the behavior?

I have a use case where many different tables come from server (as JSON) and some data could be editable while user can add more data to the existing table without removing / overriding previous one.
So the requirement is to have a 'Add New Row' functionality
Didn't find anyway to perform this functionality

Please tell us about your environment:

• Table version: 0.8.x
  
  Table version: 8.0.0

• Angular version: 2.0.x
  
  Angular version: 2.4.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[h4s33b]

+1

[enough1987]

this.rows.push(newRow);

or

this.rows.splice(this.selected[idx].$$index, 0, row);

[Iraecio]

same problem

I change the lines but the table does not change

[amcdnl]

Replace the rows or push a new one into the rows array.

If that doesn't help, can you make a demo?

[Iraecio]

this.rows.splice(row.$$index, 1); // but dont work

let rows = [...this.rows];
rows.splice(row.$$index, 1);
this.rows = [...rows]; // and work update table whitout row

[murilobd]

Same here! Can't make that work!

[amcdnl]

The change detection is on push so the original row array needs to be a new instance.

this.rows = [...this.rows, myNewRow];

[murilobd]

That worked out!

But, I found another issue... I'm using a ngx-datatable inside a material tabs component. In one tab I have the ngx-datatable and in the other tab I have a form. After I submit the form, I add a new row in the ngx-datatable and when I return to that tab, looks awful! Take a look at the image:

After I zoom out and zoom in in chrome, everything gets back to normal!

[Iraecio]

What would be the problem with the image? I see a normal list with the option of removing each line and the entered normal data!

[murilobd]

Ops! I've updated images!!

[Iraecio]

Se voce estiver usando flexlayout talvez tenha que dar uma olhada em
https://github.com/angular/flex-layout/wiki/ObservableMedia

[ashokthrymr]

this.rows.splice(row.$$index, 1); // but dont work

let rows = [...this.rows];
rows.splice(row.$$index, 1);
this.rows = [...rows]; // and work update table whitout row

Check this Link may be you got the solution
https://stackblitz.com/edit/angular-syhlgh?file=src%2Fapp%2Fapp.component.ts