Could I use "rowReorder" with vue 3 composition API?

orz050

fork of ajax data

I firstly install "datatables.net-rowreorder" and import it, then add to options :options="{ rowReorder: true }".
But why can't change any row order? I can drag <tr> but the row will turn back to original position. Do I lost some codes? Thank you.

<script setup lang="ts">
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
import 'datatables.net-rowreorder';
DataTable.use(DataTablesCore);

const columns = [
  { data: 'name' },
  { data: 'position' },
  { data: 'office' },
  { data: 'extn' },
  { data: 'start_date' },
  { data: 'salary' },
];
</script>

<template>
  <div>
    <DataTable
      :columns="columns"
      :options="{ rowReorder: true }"
      ajax="/data.json"
      class="display"
      width="100%"
    >
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Extn.</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Extn.</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </tfoot>
    </DataTable>
  </div>
</template>

allan

You need to specify the rowReorder.dataSrc property if the rows don't have an id, or the Ajax data doesn't have a DT_RowId parameter for the rows.

Updated example.

Also, keep in mind that RowReorder operates on a data swap principle. Typically you would have a sequence number and the data is moved around that sequence number.

Allan

orz050

Thank you for your assistance, Allan. I will keep in mind the swap principle.

By the way, I tested the updated example and it worked perfectly in my local environment. However, the updated example doesn't seem to work properly on "stackblitz". I'm not sure what happened on "stackblitz".

allan

I think that is more of an artefact of the "data swap" that is used. It doesn't make a huge amount of sense on non-sequential data. For example when I load the table in the example it has "Airi" as an "Accountant" in "Tokyo". If you move that row down one, then you'll have Airi as "CEO" in "London". But Airi doesn't change place (since that column is the one currently being sorted). Imagine the name column being replaced by 1, 2, 3, ... and it makes a bit more sense.

Anyway, good to hear you got it working in your local environment now.

Allan

bluefantasy

Thanks Allan，by the way, could you please provide a vue3 reorder example with more functions, such as event, like @row-order...etc. Actually, your current example cannot realize the order that I really want as after dropping the mouse, the row return its original position. I wonder if it exists other event except for @row-order？

allan

Here is an updated example: https://stackblitz.com/edit/datatables-net-vue3-ajax-g7xdko?file=src%2FApp.vue%2Cpackage.json . I realised that the proxy I was using for the DataTables events to Vue events wasn't actually passing the event's arguments on. They are now.

The event names are listed here - there isn't a row-order event, but there is a row-reorder event, which I've used in the example.

Allan

bluefantasy

Thanks again Allan! That's great! After updating the datatables.net-vue3 from 2.1.2 to 2.1.3, I managed to get 3 arguments for @row-reorder. I'll work with that!