Reorder Mat List rows onclick of Up & Down Buttons


I need to move up and down Mat List rows on click of arrow button present on each rows. Using drag and drop options with cdk/drag-drop is not required, but can this be done using just buttons. Is there any package available for this or do I need to implement logic for this like updating the array sequence to reflect that.

What is the best way to accomplish this without using drag & drop?


I made a stackblitz which should solve your problem:

You only need to add another Column to your mat-table which holds the buttons to move an list element up or down the list. Each button should have a click-handler with the functionality to swap the given element one position up or down the list, see the functions moveUp and moveDown in my stackblitz example.

Answered By – EricKrg

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.