How to insert new row at top of mat-table

Question

I have a mat-table which displays a list of jobs. Now when I create a new job I want to display it in first row rather than last one.If i create and add a new job it goes to bottom of mat-table. How can I achieve this .

I want something similar to this Stackblitz.but rather than adding row at bottom i want it in first row

Answer 1

To push an element to the first row , there is a method in array called unshift() .

To do that , take for an example :

var a = [1,2,3,4]; if i want to push 0 to a in the first position , i would simply do a.unshift(0)

All you have to do is instead of .push() , use .unshift()

I have forked the stackbltiz to help you out with the solution https://stackblitz.com/edit/angular-axjzov-8zmcnp

Answer 2

If you want to add new rows to the top of MaterialTable you can add the fallowing option:

<MaterialTable
    ...
   options={
     addRowPosition: 'first'
   }
    ...    
>

You can only chose from first or last. The default is set to last.