Using smooth-dnd-container with a regular html table

[not-a-doctor-stromberg]

I'm having difficulty configuring this plugin to reordering rows in a regular html table. I tried:

<table>
  <tbody>
    <smooth-dnd-container>
      <smooth-dnd-draggable>
        <tr><td>something</td><tr>
      </smooth-dnd-draggable>
    <smooth-dnd-container>
  </tbody>
</table>

The problem is that this generates html like the following:

<table>
  <tbody>
    <smooth-dnd-container>
      <div class="smooth-dnd-container vertical">
        <smooth-dnd-draggable>
          <tbody> <!-- this is the problem -->
            <tr><td>something</td><tr>
          <tbody>
        </smooth-dnd-draggable>
      </div>
    </smooth-dnd-container>
  </tbody>
</table>

You can see we generate an extra tbody, which I think is injected by the browser (https://stackoverflow.com/questions/7490364/why-do-browsers-still-inject-tbody-in-html5). Regardless, having the additional tbody causes problems with styling and other functionality. Is there anyway to leverage this library with standard html tables like above?

[not-a-doctor-stromberg]

I think the right move is to use the standard smooth-dnd library:

@ViewChild('tableBody') tableBody: ElementRef;

onInit() {
  SmoothDnD(tableBody, options);
}

Also make sure the wrapperClass is used on the tr elements so smooth-dnd knows what can move.