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 lang="ts">
import { useDragAndDrop } from "fluid-dnd/svelte";

type Person = {
  name: string;
  age: number;
  alias: string;
};
const table = $state<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 the view section:

<table class="table-auto border-collapse">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Alias</th>
      </tr>
    </thead>
  <tbody use:parent>
    {#each table as person, index (person.name) }
      <tr data-index={index}>
        <td>{ person.name }</td>
        <td>{ person.age }</td>
        <td>{ person.alias }</td>
      </tr>
    {/each}
  </tbody>
  </table>
<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á