Row reordering in Angular material mat-table using drag events

Question

I am developing a website where I am using Data Table component of Angular Material. I want the user to be able to set some kind of priority to each row by dragging rows up and down. Something similar to Data Table for jQuery. I cannot find support for reordering using drag events in their documentation. How can I achieve this functionality while adding least dependencies to my project?

Answer 1

For those looking for an answer on how to use this with Angular Material tables (mat-table):

Instead of using <table mat-table ...> you will have to use the <mat-table ..> selector. The former will have a tbody element between the table element (where you applied your dragula bag) and the rows. Attempting to drag the rows will instead make dragula pick up the tbody element. For <mat table ...> however, the rows will be immediate child elements of the container.

You can then use dragula like so:

<!-- my-table.component.html -->
<mat-table 
    [dragula]='"my-bag"' 
    [dataSource]="myTableDataSource">
    <!-- your column and row defs go here -->
</mat-table>

In your component

// my-table.component.ts
constructor(private dragulaService: DragulaService) {
  dragulaService.drop.subscribe((value) => {
    this.onDrop(value);
  });
}

private onDrop(args) {
    console.log(args);
}