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

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

• javascript
• angular
• typescript
• angular-material

• 1 use .unshift(element) on your array – CruelEngine Commented Feb 1, 2019 at 6:20
• can you please explain in detail i am fairly new to angular – Cpt Kitkat Commented Feb 1, 2019 at 6:22
• please check my answer – CruelEngine Commented Feb 1, 2019 at 6:42

3 Answers 3

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./edit/angular-axjzov-8zmcnp

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.

With your datasource declared in your ponent as follows:

dataSource = new MatTableDataSource<any>();

You can add a rown to the top op the table with:

this.dataSource.data.unshift(newRowObject);