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

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

orz050orz050 Posts: 4Questions: 2Answers: 0

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>

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 63,236Questions: 1Answers: 10,418 Site admin
    Answer ✓

    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

  • orz050orz050 Posts: 4Questions: 2Answers: 0

    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".

  • allanallan Posts: 63,236Questions: 1Answers: 10,418 Site admin

    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

  • bluefantasybluefantasy Posts: 2Questions: 0Answers: 0

    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?

  • allanallan Posts: 63,236Questions: 1Answers: 10,418 Site admin
    Answer ✓

    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

  • bluefantasybluefantasy Posts: 2Questions: 0Answers: 0

    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!

Sign In or Register to comment.