Sorting tables

Table with person data

To showing how to use Fluid DnD for sorting a table. First, we’re going to create a table with person data:

<script setup lang="ts">
import { ref } from "vue";
import { useDragAndDrop } from "fluid-dnd/vue";

type Person = {
  name: string;
  age: number;
  alias: string;
};
const table = ref<Person[]>([
  { name: "Carlos", age: 26, alias: "Carli" },
  { name: "Jorgito", age: 34, alias: "Pipo" },
  { name: "Ivis", age: 68, alias: "Mamá" },
]);
const [ parent ] = useDragAndDrop<Person>(table, {
  draggingClass: "drag-row",
});

</script>

Creating the view

Next, create a table on vue template using parent element from useDragAndDrop:

<template>
  <table class="table-auto border-collapse">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Alias</th>
      </tr>
    </thead>
    <tbody ref="parent">
      <tr v-for="(person, index) in table" :index="index" :key="person.name">
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
        <td>{{ person.alias }}</td>
      </tr>
    </tbody>
  </table>
</template>
<style scoped>
/*...*/
table tbody tr td {
  width: 33.3%;
}
.drag-row {
  background-color: var(--sl-color-text-accent) !important;
  color: var(--sl-color-text-invert);
  display: table;
}

</style>

Caution

Set a fixed width to tr and td elements because it maintains the proportion of the columns when the row is dragged. Set display property to table to drag-row class selector treating the dragged row as a table.

Preview

Name	Age	Alias
Carlos	26	Carli
Jorgito	34	Pipo
Ivis	68	Mamá